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

Question

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

任何提示？

干杯！

Answer 1

也许

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

Answer 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

注意你也可以使用style display：none;并在没有画布显示的情况下为画布渲染图像。它还支持透明png，默认情况下画布是透明的