帶有圖像的畫布轉換爲jpeg

我想在畫布上得到一個.jpg，添加一個矩形和一個字符串，這非常好用。之後，我想從畫布中創建一個jpg，這很好，但畫布的jpg只顯示矩形和字符串。快速代碼的例子 - 我知道它是一個醜陋的畫布 - 只是測試;）帶有圖像的畫布轉換爲jpeg

<!DOCTYPE html> 
<html> 
<body> 
<canvas id="meinCanvas" width="600" height="600" style="border:1px solid #c3c3c3;"> 
Your browser does not support the canvas element. 
</canvas> 
</body> 

<script type="text/javascript"> 
var canv = document.getElementById("meinCanvas"); 
var context = canv.getContext("2d"); 
context.fillStyle = "#000000"; 
context.fillRect(10,10, 200, 100); 
var img = new Image(); 
img.onload = function() { 
context.drawImage(img, 300, 300); 
}; 
img.src="one.jpg"; 
context.font = "bold 12px sans-serif"; 
context.fillText("test", 500, 500); 
imgsr = canv.toDataURL("image/jpeg"); 
document.write('<img src="' +imgsr +'"/>'); 
</script> 
</html> 
}

在上部（畫布）的IMG正常顯示，但在.JPEG beneth它的IMG沒有顯示。幫助會很好。謝謝。

來源

2012-04-11 Mike Äfer

保存圖像時尚未加載圖像。

將toDataUrl放入img.onload中或將其鏈接到事件或計時器

來源

2012-04-11 09:15:06 jazzytomato

非常感謝您。 – 2012-04-11 09:31:14

帶有圖像的畫布轉換爲jpeg

回答

相關問題