javascript 尝试将base64 png图像转换为p5.js图像

5cnsuln7 于 2022-12-25 发布在 Java

关注(0)|答案(3)|浏览(189)

所以正如标题所说，我正在尝试加载一个base64编码的png图像到一个p5js图像，这里有一个简化的我是如何做的：
PS：我使用base64映像，因为它是从服务器生成的

var img;
function setup() {
  // Canvas setup code ....

  img = loadImage('loading.png'); // show an image which says that it's loading
  img.loadPixels();

  // More setup code ...
}

// ...

function draw() {
  image(img, 0, 0, img.width, img.height);
  // ... more code
}

// ...

function receivedCallback(data) { // This function gets called once we receive the data
  // Data looks like this: { width: 100, height: 100, data: "...base64 data...." }
  img.resize(data.width, data.height);
  var imgData = data.data;
  var imgBlob = new Blob([imgData], { type: "image/png" }); // Create a blob
  var urlCreator = window.URL || window.webkitURL;
  var imageUrl = urlCreator.createObjectURL(imgBlob); // Craft the url
  img.src = imageUrl;
  img.loadPixels();
  img.updatePixels();
}

但是，它不工作，这就是为什么我在这里问。如果有任何方法可以做到这一点，我会非常感激。提前感谢。

编辑Steve的不太好用，我不得不用img = loadImage('data:image/png;base64,' + data.data);替换img.src = 'data:image/png;base64,' + data.data

JavaScript

来源：https://stackoverflow.com/questions/71884922/trying-to-get-base64-png-image-into-p5-js-image

3条答案

按热度按时间

bgibtngc1#

你可以直接使用Data URLs，它看起来像这样：

function receivedCallback(data) { // This function gets called once we receive the data
  // Data looks like this: { width: 100, height: 100, data: "...base64 data...." }
  loadImage('data:image/png;base64,' + data.data, function (newImage) {
    img = newImage;
  });
}

如果出于某种原因需要使用blob，可以考虑base64到blob的转换，比如this answer。

赞(0）回复(0）举报 2022-12-25

mwkjh3gx2#

Steve的并不太好用，我不得不加载图像而不是直接改变它的源代码，所以我选择了img.src = 'data:image/png;base64,' + data.data。
我需要做img = loadImage('data:image/png;base64,' + data.data);
感谢史蒂夫的回答！

赞(0）回复(0）举报 2022-12-25

ia2d9nvy3#

从P5.js中的文件加载base64图像和常规图像没有区别，只需将loadImage调用中的URL替换为base64数据即可。
为了获得一个可运行的完整示例（注意base64映像非常小）：

const imgData = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAIAQMAAAD+wSzIAAAABlBMVEX///+/v7+jQ3Y5AAAADklEQVQI12P4AIX8EAgALgAD/aNpbtEAAAAASUVORK5CYII";
let img;

function preload() {
  img = loadImage(imgData);
}

function draw() {
  image(img, 0, 0);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.min.js"></script>

如果你的数据应该在未来某个不确定的时间点加载，比如说，在交互之后，那么你可以使用回调来确定图像何时加载，这在某种程度上是特定于用例的，但是模式可能看起来像这样：
一个二个一个一个
如果你有一些异步代码，没有问题，只要你准备好base64字符串就调用loadImage，例如：

function mousePressed() {
  if (!img) {
    fetch("your endpoint")
      .then(response => response.json())
      .then(data => {  
        // prepend "data:image/png;base64," if
        // `data.data` doesn't already have it
        loadImage(data.data, imgResult => {
          img = imgResult;
        });
      });
  }
}

尽管如此，对于大多数应用程序来说，通过点击来加载图像是一种有点奇怪的模式。通常，你会希望在preload函数中预加载所有的资产，以便在请求时立即呈现它们。如果你通过fetch调用来加载图像以响应事件，在渲染图像之前，可能会有一个难看的延迟（或者需要显示一个临时消息/占位符图像/微调器），所以请确保这不是一个xy问题。

赞(0）回复(0）举报 2022-12-25

我来回答

javascript 尝试将base64 png图像转换为p5.js图像

3条答案

相关问题

热门标签

最新问答