캔버스를 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); 
}