How can I save an image onto canvas?

Question

I am drawing an image onto canvas. Then I want to save the image. I tried canvas.toDataURL("image/png"), but I realized that I can't use toDataURL() because of security reason. However, I have to save the image. How can I save the image?

This is my sample source code.

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();
    }
}

There is no security eason behind toDataURL() it is for getImageData(). — MJQ, Feb 28 '13 at 11:51

score 1 · Answer 1 · answered Feb 28 '13 at 11:51

Example:

<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>

I use Image Object. When I save the canvas only, it's fine. However, if I use Image object to draw an image onto canvas, it's not work. — addio3305, Feb 28 '13 at 11:57
check this : http://stackoverflow.com/questions/923885/capture-html-canvas-as-gif-jpg-png-pdf — Amrendra, Feb 28 '13 at 12:02

How can I save an image onto canvas?

1 Answers1