Сохранение холста как png

Question

Привет, я пытался сохранить свой холст в виде png и сгенерировать его на веб-странице, как только он будет выполнен. Проблема, с которой я сталкиваюсь, заключается в том, что когда изображение сохраняется и выводится, оно отображает только текст, который загружается из текстового поля. Я также загружаю фоновое изображение, которое отображается на холсте, но не в выведенном изображении.

<form> 
<input name="name" id="name" type="text"/> 
</form> 
<canvas id="myCanvas" width="640" height="480"></canvas> 
<input name="" type="button" onclick="save()" /> Generate 

<div id="sample"> 
</div> 
<script type="text/javascript" src="canvas.js"></script> 

ява скрипт

var myCanvasElement=document.getElementById("myCanvas"); 
    var drawingContext=myCanvasElement.getContext("2d"); 

    // clear canvas and div 
    drawingContext.clearRect (0 , 0 , 640 , 480); 
    document.getElementById("sample").innerHTML = ""; 

    // add text box text to canvas 
    var amount1 = document.getElementById("name").value; 
    drawingContext.font = "bold 12px sans-serif"; 
    drawingContext.fillText(amount1, 30, 43); 
    drawingContext.fillText(amount1, 30, 43); 

    //loads in image to canvas 

    var imageObj = new Image(); 
    imageObj.onload = function() { 
    drawingContext.drawImage(imageObj, 100, 150); 
    }; 
    imageObj.src ='132.png'; 

    //converts canvas to image 
    var canvas = document.getElementById('myCanvas'), 
    dataUrl = canvas.toDataURL(), 
    imageFoo = document.createElement('img'); 
    imageFoo.src = dataUrl; 

    //Style your image here 
    imageFoo.style.width = '640px'; 
    imageFoo.style.height = '480px'; 

    //After you are done styling it, append it to the BODY element 
    var theDiv = document.getElementById("sample"); 
    theDiv.appendChild(imageFoo); 
} 

мне было интересно, если кто-то какие-либо предложения о том, почему он мог бы делать это Спасибо заранее

Answer 1

Дайте время, чтобы загрузить изображение. когда он загружается, затем преобразуйте его в DataUrl.

Попробуйте это:

// your code 
    var imageObj = new Image(); 
    imageObj.onload = function() { 
     drawingContext.drawImage(imageObj, 100, 150); 
     setTimeout(loadImage,200) ; 
    }; 

imageObj.src ='132.png'; 

После загрузки изображения вызова этого:

function loadImage() 
{ 
    //converts canvas to image 
    var canvas = document.getElementById('myCanvas'), 
    dataUrl = canvas.toDataURL(), 
    imageFoo = document.createElement('img'); 
    imageFoo.src = dataUrl; 

    //Style your image here 
    imageFoo.style.width = '640px'; 
    imageFoo.style.height = '480px'; 

    //After you are done styling it, append it to the BODY element 
    var theDiv = document.getElementById("sample"); 
    theDiv.appendChild(imageFoo); 
}