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

Question

所以正如标题所说，我正在尝试将 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();
}

但是，它不起作用，这就是我在这里问的原因。 如果有任何方法可以做到，我将不胜感激。 提前致谢。

编辑史蒂夫没有相当工作，我不得不用img = loadImage('data:image/png;base64,' + data.data);替换img.src = 'data:image/png;base64,' + data.data

Answer 1

可以直接使用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。

Answer 2

史蒂夫没有相当工作，我不得不加载图像而不是直接更改它的来源。 所以而不是img.src = 'data:image/png;base64,' + data.data。

我需要做img = loadImage('data:image/png;base64,' + data.data);

感谢史蒂夫的回答！

Answer 3

从 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>

如果您的数据应该在未来某个不确定的时间点加载，比如在交互之后，那么您可以使用回调来确定图像何时加载。这有点特定于用例，但模式可能如下所示：

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

function setup() {
  createCanvas(300, 300);
}

function draw() {
  clear();
  textSize(14);
  text("click to load image", 10, 10);

  if (img) {
    image(img, 0, 0);
  }
}

function mousePressed() {
  if (!img) {
    loadImage(imgData, imgResult => {
      img = imgResult;
    });
  }
}

<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 problem。