使用 processing.js 将图像保存到 png 文件答案

【问题标题】：save image to a png file using processing.js使用 processing.js 将图像保存到 png 文件
【发布时间】：2011-02-22 12:19:23
【问题描述】：

我有一个在 processing.js 中制作的小型绘图应用程序。我想使用 php 文件将使用应用程序制作的图像保存到服务器（这没有问题）。我知道 canvas 元素有一个方法来获取该内容，canvas.toDataURL() 但我不知道如何对 processing.js 做同样的事情

有什么提示吗？

干杯！

【问题讨论】：

标签： javascript processing.js

【解决方案1】：

也许

var image = document.getElementsByTagName("canvas")[0].toDataURL();

【讨论】：

@Breton ：实际上，我使用元素添加了一张图像，并使用 javascript 在图像上成功绘制了一些线条。现在我想将修改后的图像保存回服务器。在这种情况下，我应该使用你上面的答案来做到这一点.. 例如 var image = document.getElementById("Image2").toDataURL("image/png");
上述函数返回一个数据uri。您可以通过 XHR 请求将其发布回服务器。您甚至可以将其作为值放在表单中。唯一需要注意的是，您必须准备好在服务器端进行适当的解码。

【解决方案2】：

所以当你在 processing.js 中使用 saveFrame() 时。图像在新窗口中打开，我发现很难截取数据。灵魂是在javascript中从画布中获取图像。

// this grabs the canvas and turns it into a base64 image    
var image = document.getElementsByTagName("canvas")[0].toDataURL();

// Log the data to the canvas to check it working
console.log(image);

// then you can place the image on your web page    
document.getElementById("theImage").src=image;

那么 html 就很简单了。只需添加

<img id="theImage"></img>

如果你想上传图片到服务器，你可以用js访问数据。

image

请注意，您也可以使用样式 display:none;并让画布在不显示画布的情况下为您呈现图像。它还支持透明png，默认情况下画布是透明的

【讨论】：