如何将图像保存到画布上？

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. 我尝试使用canvas.toDataURL（“ image / png”），但由于安全原因，我意识到我无法使用toDataURL（）。 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();
    }
}

Answer 1

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>

如何将图像保存到画布上？

问题描述

1 个解决方案

解决方案1
1 2013-02-28 11:51:32

如何将图像保存到画布上？

问题描述

1 个解决方案

解决方案1 1 2013-02-28 11:51:32

解决方案1
1 2013-02-28 11:51:32