试图将 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();
}

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

编辑 Steve 的完全没用，我不得不用 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 图像和普通图像没有区别。只需用 base64 数据替换 loadImage 调用中的 URL。

为了一个可运行的完整示例（注意 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.4.1/p5.min.js"></script>

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

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.4.1/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 调用加载，则在呈现之前可能会有 ugly-looking 延迟（或需要显示临时 message/placeholder image/spinner）图片，因此请确保这不是 xy problem.

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

Trying to get base64 png image into p5.js image

javascript

p5.js