使用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文件中

回答

相關問題