canvas.toDataURL（）无法正常工作 [英] canvas.toDataURL() not working properly

问题描述

我有一个画布，其中我上传一个图像与以下代码：

I am having a canvas in which I upload an image with the following code:

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 ）将图像加载到另一个画布。代码是：

Now I wanted to use the canvas.toDataURL() to load the image to another canvas. The code is:

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产生出来的。

If I put to this a working url all fine. But the produced url from any picture I have tried comes out as

数据：图像/ PNG; BASE64，iVBORw0KGgoAAAANSUhEUgAAASwAAACWCAYAAABkW7XSAAAAxUlEQVR4nO3BMQEAAADCoPVPbQhfoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOA1v9QAATX68 / 0AAAAASUVORK5CYII =。

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAACWCAYAAABkW7XSAAAAxUlEQVR4nO3BMQEAAADCoPVPbQhfoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOA1v9QAATX68/0AAAAASUVORK5CYII=.

如果您尝试使用它，它不会产生在画布上的飞机的照片。如何使用函数 toDataURL 在另一个画布上绘制图像？

If you try to use that it would not produce the photo of a plane that was in the canvas. How can I use the function toDataURL to draw the image on another canvas?

推荐答案

您可以查看使用 HTMLCanvasElement.toDataURL（）

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

toDataURL returns valid base64 encoded image. So the problem is how you assign this image for second canvas.

这篇关于canvas.toDataURL（）无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！