Html5 canvas 通过html5画布保存图像_Html5 Canvas

Html5 canvas 通过html5画布保存图像

html5-canvas

Html5 canvas 通过html5画布保存图像,html5-canvas,Html5 Canvas,下面的代码无法保存图像我想在画布上画一个点击图像，并想保存另一个保存按钮点击 <head> <script type="text/javascript"> function draw() { var canvas = document.getElementById("MyCanvas"); if (canvas.getContext) { var ctx = canvas.getContext("2d"

下面的代码无法保存图像

我想在画布上画一个点击图像，并想保存另一个保存按钮点击

<head>
    <script type="text/javascript">
    function draw()
    {
      var canvas = document.getElementById("MyCanvas");
      if (canvas.getContext) {
          var ctx = canvas.getContext("2d");                // Get the context.
          ctx.clearRect(0,0,canvas.width,canvas.height);    // Clear the last image, if it exists.
          var image = document.getElementById("pix");       // Get the address of the picture.

          ctx.drawImage(image,125,125,200,200);         
          dataURL = canvas.toDataURL("image/png");

          dataURL.onload = function () {
            ctx.drawImage(img, 0, 0);
            canvas.addEventListener("mousedown", function(event) {
                canvas.toBlob(function(blob) {
                    saveAs(blob, "exported_image.png");
                }, "image/png");
            });
        }


       }  
    }
    </script>
    </head>
    <body>
        <p>This picture will appear below.</p>
        <div>
        <img id="pix" src="http://go.microsoft.com/fwlink/?LinkID=199028" />   
        </div>
        <button onclick="draw()">Draw Images on canvas</button> 
      <canvas id="MyCanvas" width="600" height="500"> </canvas>
    </body>
    </html>


函数绘图（）
{
var canvas=document.getElementById（“MyCanvas”）；
if（canvas.getContext）{
var ctx=canvas.getContext（“2d”）；//获取上下文。
ctx.clearRect（0,0，canvas.width，canvas.height）；//清除最后一个图像（如果存在）。
var image=document.getElementById（“pix”）；//获取图片的地址。
ctx.drawImage（图像，125200200）；
dataURL=canvas.toDataURL（“image/png”）；
dataURL.onload=函数（）{
ctx.drawImage（img，0,0）；
canvas.addEventListener（“鼠标向下”，函数（事件）{
canvas.toBlob（函数（blob）{
saveAs（blob，“exported_image.png”）；
}，“图像/png”）；
});
}
}  
}
这张照片将出现在下面
在画布上绘制图像

如果绘制的图像可能尚未加载，请在画布上绘制图像之前使用onload（）函数：

     var image = document.getElementById("pix");       // Get the address of the picture.
     image.onload = function() { //ADD THIS LINE TO YOUR CODE
      ctx.drawImage(image,125,125,200,200);  
     };