如何使用圖像畫布保存爲PNG文件

HTML代碼畫布和圖像

<canvas id="myCanvas" style="display:none" width="400" height="400"></canvas> 
<img id="canvasImg" />

從獲取的圖像

的JavaScript代碼服務器並在畫布上顯示，然後顯示圖像

var canvas = document.getElementById("myCanvas"); 
var ctx = canvas.getContext("2d"); 

baseimage  = new Image(); 
baseimage.src = 'what.jpg'; 
baseimage.onload = function() { 
    ctx.drawImage(baseimage,1,1); 
} 

var dataURL = canvas.toDataURL("image/png"); 
document.getElementById('canvasImg').src = dataURL; 
$("#myCanvas").show();

圖像正在顯示但沒有「what.jpg」文件。在畫布上，文件是可見的，但在IMG標籤中什麼也看不到。我正在使用最新版本的Chrome。

來源

2013-04-04 Rahul Kadukar

有幾個問題與您的代碼。

您在加載和繪製jpeg圖像之前調用toDataUrl，以便獲取空畫布的數據URL。移動最後三行的例子成image.onload處理函數，它應該工作。
您的canvas元素上調用.show（），而不是img元素，你分配給dataUrl。但我不知道爲什麼你這樣做的所有，因爲它看起來像你的意圖是用一種無形的<canvas>生成內容的可見<img>，那就是在CSS樣式說的話。
應該在設置src之前定義onload處理程序，因爲當圖像位於瀏覽器緩存中時，可以在設置src屬性時調用onload函數，這是在定義自己的裝載處理程序之前。

這是固定的代碼（未經測試）：

var canvas = document.getElementById("myCanvas"); 
var ctx = canvas.getContext("2d"); 

baseimage  = new Image(); 
baseimage.onload = function() { 
    ctx.drawImage(baseimage,1,1);  
    var dataURL = canvas.toDataURL("image/png"); 
    document.getElementById('canvasImg').src = dataURL; 
} 
baseimage.src = 'what.jpg';

來源

2013-04-04 15:48:13 Philipp

完美的任何區別，這工作。所以我必須在繪製圖像後才能使用toDataURL。感謝你的回答。我只是隱藏在畫布上，因爲我不希望最終用戶看到是如何被產生的圖像。 – 2013-04-05 09:34:02

我想在onload調用SRC之前應該來。

像這樣：

baseimage = new Image(); 
baseimage.onload = function() { 
ctx.drawImage(baseimage,1,1); 
} 
baseimage.src = 'what.jpg';

來源

2013-04-04 13:04:07 Xavero

嘗試這個爲好，並沒有進行任何形式 – 2013-04-04 14:02:47

如何使用圖像畫布保存爲PNG文件

回答

相關問題