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

Если я добавлю к этому рабочему URL, то все в порядке. Но полученный URL из любой картинки, которую я пробовал, выглядит как

данные: изображения / PNG;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAACWCAYAAABkW7XSAAAAxUlEQVR4nO3BMQEAAADCoPVPbQhfoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOA1v9QAATX68/0AAAAASUVORK5CYII=.

Если вы попытаетесь использовать это, это не даст фотографию самолета, который был на холсте. Как я могу использовать функцию toDataURL нарисовать изображение на другом холсте?

Answer 1

Вы можете посмотреть пример использования HTMLCanvasElement.toDataURL() на developer.mozilla.org

toDataURL возвращает действительное изображение в кодировке base64. Так что проблема в том, как вы назначаете это изображение для второго холста.