Canvas - DrawImage Method

本文关键字：Method DrawImage Canvas 更新时间：2023-09-26

Canvas元素的"DrawImage"方法出现了一个奇怪的问题。使用以下代码，我创建画布并将其附加到"右画布"分区。

var rightcanvas = document.getElementById('rightcanvas');   
rcanvas = document.createElement('canvas');
rcanvas.setAttribute('width', canvasLength);
rcanvas.setAttribute('height', canvasHeight);
rcanvas.setAttribute('id', 'rcanvas');
rightcanvas.appendChild(rcanvas);

现在我尝试绘制一幅Base64编码的图像。

var rcontext = rcanvas.getContext('2d');
var image = new Image();
image.src = 'data:image/png;base64,iVBOR....';
rcontext.drawImage(image,0,0);

画布将被创建并附加。但是图像将不会显示。有人知道问题出在哪里吗=（

在将图像绘制到画布之前，必须等待图像加载。

var image = new Image();
image.onload = function() {
    rcontext.drawImage(image, 0, 0);
}
image.src = 'data:image/png;base64,iVBOR....';