所以正如标题所说,我正在尝试将 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();
}
但是,它不起作用,这就是我在这里问的原因。 如果有任何方法可以做到,我将不胜感激。 提前致谢。
编辑 史蒂夫的 quite 工作,我不得不用
img.src = 'data:image/png;base64,' + data.data
替换
img = loadImage('data:image/png;base64,' + data.data);
您可以直接使用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.
史蒂夫没有相当工作,我不得不加载图像而不是直接改变它的来源。 所以而不是
img.src = 'data:image/png;base64,' + data.data
.
我需要做
img = loadImage('data:image/png;base64,' + data.data);
感谢史蒂夫的回答!
在 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.6.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.6.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问题.