캔버스 이미지를 디스크에 저장하는 방법은 무엇입니까?

Question

내 응용 프로그램에서 html.now 캔바스에 하나의 이미지로 두 이미지를 병합 캔버스 이미지를 내 디스크에 저장하고 싶습니다. 그러나 코드는 image.i를 저장하지 못했지만 2 번만 제대로 작동하지만 오류를 찾으려고 시도했지만 아무 것도 얻지 못했습니다. 제게 도와 주시면 도와 드리겠습니다.

<p>Image to use:</p> 

<img id="scream" src="img_the_scream.jpg" alt="The Scream" 
width="220" height="277"> 
<img id="scream2" src="img_the_scream.jpg" alt="The Scream" 
width="220" height="277"> 


<p>Canvas to fill:</p> 

<canvas id="canvas" width="800" height="300" 
style="border:1px solid #d3d3d3;"> 
Your browser does not support the HTML5 canvas tag.</canvas> 

<p><button onclick="myCanvas()">Try it</button></p> 

<script> 
function myCanvas() { 
    var c = document.getElementById("canvas"); 
    var ctx = c.getContext("2d"); 
    var img = document.getElementById("scream"); 
    ctx.drawImage(img,10,10); 

var img = document.getElementById("scream2"); 
    ctx.drawImage(img,210,10); 
} 
</script> 
     <h1>Save Image</h1> 


     <button type="button" onclick="saveImage()">save image</button> 
     <script type="text/javascript"> 
      function saveImage() { 
       var ua = window.navigator.userAgent; 

       if (ua.indexOf("Chrome") > 0) { 
        // save image without file type 
        var canvas = document.getElementById("canvas"); 
        document.location.href = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); 

        // save image as png 
        var link = document.createElement('a'); 
        link.download = "test1.png"; 
        link.href = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");; 
        link.click(); 
       } 
       else { 
        alert("Please use Chrome"); 
       } 
      } 
     </script> 

Answer 1

캔버스를 마우스 오른쪽 버튼으로 클릭하고으로 이미지를 저장하면됩니다.