將圖像繪制到畫布並通過base64對其進行編碼

Question

我正在嘗試將現有圖像繪制到畫布上並通過base64對其進行編碼。 這是我的代碼：

var canvas = document.createElement("canvas");
canvas.id = "MyCanvas";

document.getElementById("Table1").appendChild(canvas);

var myCanvas = document.getElementById("MyCanvas");
var myCanvasContext = myCanvas.getContext("2d");

myCanvas.width = 135;
myCanvas.height = 170;

var img = new Image();

img.onload = function(){
    myCanvasContext.drawImage(img,0,0);
}

img.src = "https://example.com/asd.png";

var toURL = myCanvas.toDataURL();
console.log(toURL);

它將圖像繪制到畫布上，但是toURL是空圖像base64代碼，尺寸為135x170。 我嘗試對其進行解碼，但是它始終顯示空白圖像。

我找不到問題所在。

Answer 1

問題是myCanvas.toDataURL(); 在實際加載圖片之前調用。 為此，您需要將其移至onload -callback內部，例如：

var img = new Image();

img.onload = function(){
    myCanvasContext.drawImage(img,0,0);

    // ...moved here
    var toURL = myCanvas.toDataURL();
    console.log(toURL);
}

img.src = "https://example.com/asd.png";

---

以下是一個簡化的示例：

 const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); const img = new Image(); img.crossOrigin = ""; img.src = 'https://www.gravatar.com/avatar/8939f42cb6c31e31e570ea8f07fe9757?s=32&d=identicon&r=PG'; img.onload = () => { canvas.width = img.naturalWidth; canvas.height = img.naturalHeight; ctx.drawImage(img, 0, 0); console.log(canvas.toDataURL()); }; document.body.appendChild(canvas); // append the canvas ... document.body.appendChild(img); // ... and img for demo purposes only 

Answer 2

 var canvas = document.createElement("canvas"); canvas.id = "MyCanvas"; document.getElementById("Table1").appendChild(canvas); var myCanvas = document.getElementById("MyCanvas"); var myCanvasContext = myCanvas.getContext("2d"); myCanvas.width = 500; myCanvas.height = 500; var img = new Image(); img.onload = function(){ myCanvasContext.drawImage(img,0,0); } img.src = "http://underthebridge.co.uk/wp-content/uploads/2014/03/Example-main-image1.jpg"; var toURL = myCanvas.toDataURL(); console.log(toURL); var img2 = document.createElement("img"); img2.id = "MyImg"; img2.src = toURL; document.getElementById("Table1").appendChild(img2); 

 <div id='Table1'> </div> 

您不能將base64放在畫布中，而只能在標記img中。