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

我有一个在processing.js中制作的小型绘图应用程序。我想将使用应用程序制作的图像保存到使用php文件的服务器上（在此没有问题）。我知道canvas元素有一个获得该内容的方法，canvas.toDataURL（）但我不知道如何处理processing.js使用processing.js将图像保存到PNG文件中

任何提示？

干杯！

来源

2011-02-22 biquillo

也许

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

来源

2011-02-22 12:25:11 Breton

工程就像一个魅力！谢谢！ – biquillo

@Breton：实际上，我使用元素添加了一个图像，并在图像上使用javascript绘制了一些线条。现在，我想将修改的图像保存回服务器。在这种情况下，我应该使用上述答案那..例如var image = document.getElementById（“Image2”）。toDataURL（“image/png”）; – Saravanan

上面的函数返回一个数据uri。您可以通过XHR请求将其发回服务器。你甚至可以把它作为一种形式的价值。唯一需要注意的是你必须做好解码服务器端的准备。 – Breton

所以，当你在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来访问js中的数据。

image

请注意，您也可以使用style display：none;并让画布为您呈现图像，而不显示画布。它也支持透明PNG和默认的画布是透明的

来源

2017-03-01 11:45:11

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

回答

相关问题