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 закодированного изображения. Поэтому проблема заключается в том, как вы назначаете это изображение для второго холста.