canvas.toDataURL()无法正常工作

Question

我有一个画布,我使用以下代码上传图像:

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()它将图像加载到另一个画布.代码是:

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;
}

如果我把这个工作网址都搞好了.但是我试过的任何图片中产生的网址都是以

数据:图像/ PNG; BASE64,iVBORw0KGgoAAAANSUhEUgAAASwAAACWCAYAAABkW7XSAAAAxUlEQVR4nO3BMQEAAADCoPVPbQhfoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOA1v9QAATX68/0AAAAASUVORK5CYII =.

如果你试图使用它,它将不会产生画布中的平面照片.如何使用该功能toDataURL在另一个画布上绘制图像？

Answer 1

您可以在developer.mozilla.org查看使用HTMLCanvasElement.toDataURL()的示例

toDataURL返回有效的 Base64 编码图像。所以问题是如何将此图像分配给第二个画布。