Как сохранить изображение на холсте?

Я рисую изображение на холсте. Затем я хочу сохранить изображение. Я попробовал canvas.toDataURL («image/png»), но я понял, что не могу использовать toDataURL() из-за соображений безопасности. Однако мне нужно сохранить изображение. Как сохранить изображение?Как сохранить изображение на холсте?

Это мой примерный исходный код.

window.onload = function(){ 
    var oCanvas = document.getElementById("work_pallet"); 
    var oContext = oCanvas.getContext("2d"); 

    var imageObj = new Image();         
    imageObj.onload = function() { 
     oContext.drawImage(imageObj, 0, 0, oCanvas.width, oCanvas.height);  
    } 
    imageObj.src = "http://www.ehanftp.co.kr/ueditor/data/20130204/mini2/guide.pdf_1.png"; 


    function saveImage(){ 
     var bRes = false; 
     alert(oCanvas.toDataURL()); 
     bRes = Canvas2Image.saveAsPNG(oCanvas); 
     if (!bRes) { 
      alert("Sorry, this browser is not capable of saving image!"); 
      return false; 
     } 
    } 

    document.getElementById("saveCanvasImage").onclick = function() { 
     saveImage(); 
    } 
}

источник

2013-02-28 addio3305

Там нет Eason безопасности за toDataURL() это для getImageData(). – MJQ

Пример:

<html> 
    <head> 
     <script src="http://www.nihilogic.dk/labs/canvas2image/canvas2image.js"></script> 
     <script> 
      function draw(){ 
       var canvas = document.getElementById("thecanvas"); 
       var ctx = canvas.getContext("2d"); 
       ctx.fillStyle = "rgba(125, 46, 138, 0.5)"; 
       ctx.fillRect(25,25,100,100); 
       ctx.fillStyle = "rgba(0, 146, 38, 0.5)"; 
       ctx.fillRect(58, 74, 125, 100); 
      } 

      function to_image(){ 
       var canvas = document.getElementById("thecanvas"); 
       document.getElementById("theimage").src = canvas.toDataURL(); 
       Canvas2Image.saveAsPNG(canvas); 
      } 
     </script> 
    </head> 
    <body onload="draw()"> 
     <canvas width=200 height=200 id="thecanvas"></canvas> 
     <div><button onclick="to_image()">Draw to Image</button></div> 
     <image id="theimage"></image> 
    </body> 
</html>

источник

2013-02-28 11:51:32 Amrendra

Я использую Image Object. Когда я сохраняю только холст, все в порядке. Однако, если я использую объект Image для рисования изображения на холсте, это не работает. – addio3305

проверить это: http://stackoverflow.com/questions/923885/capture-html-canvas-as-gif-jpg-png-pdf – Amrendra

Как сохранить изображение на холсте?

ответ

Смежные вопросы