我有一个画布,在其中使用以下代码上传图像:
function handleImage(e){
var reader = new FileReader();
reader.onload = function(event){
var img = new Image();
img.onload = function(){
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img,0,0);
}
img.src = event.target.result;
}
reader.readAsDataURL(e.target.files[0]);
}
现在我想使用canvas.toDataURL()
将图像加载到另一个画布上。 代码如下:
现在我希望使用canvas.toDataURL()
将图像加载到另一个画布中。代码如下:
var dataURL = canvas.toDataURL();
drawDataURIOnCanvas(dataURL,canvas2);
function drawDataURIOnCanvas(dataURL, name_of_canvas) {
var myCanvas = document.getElementById(name_of_canvas);
var img3 = new Image;
var ctx2 = myCanvas .getContext('2d');
img3.onload = function(){
ctx2.drawImage(img3,0,0); // Or at whatever offset you like
};
img3.src = dataURL;
}
如果我使用一个有效的URL,一切都很好。但是我尝试过的所有图片生成的URL如下:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAACWCAYAAABkW7XSAAAAxUlEQVR4nO3BMQEAAADCoPVPbQhfoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOA1v9QAATX68/0AAAAASUVORK5CYII=.
如果你尝试使用它,将无法生成画布中的飞机照片。我该如何使用toDataURL
函数将图像绘制在另一个画布上?
var myCanvas = document.getElementById('name_of_canvas');
,在这里使用myCanvas
而不是canvas
:var ctx2 = canvas.getContext('2d');
。 - Niddro