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编码图像。所以问题是你如何为第二个画布分配这个图像。

canvas.toDataURL（）无法正常工作

1 个答案: