“DrawImage”-Canvas 元素的方法出现了一个奇怪的问题。我使用以下代码创建 Canvas 并将其附加到“rightcanvas”div。
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);
将创建并附加 Canvas 。但是图像不会显示。有人知道是什么问题吗? =(
最佳答案
在将图像绘制到 Canvas 之前,您必须等待图像加载。
var image = new Image();
image.onload = function() {
rcontext.drawImage(image, 0, 0);
}
image.src = 'data:image/png;base64,iVBOR....';
关于javascript - Canvas - DrawImage 方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9963285/