Question

我想在画布中绘制图像并将画布导出到图像（jpg）文件和pdf文件..

点击下载链接和弹出文件保存对话框窗口..

我有一个示例源..但在Chrome中运行良好，但不能在IE11，IE10，IE9，IE8中运行....

    <!DOCTYPE html>
    <html>
    <head>
        <title>toDataURL example</title>
        <style>
          canvas {
            border:solid black 1px;
          }

          img {
            width:400px;
            height:400px;
            border:solid black 1px;
          }
        </style>
    </head>
    <body>
      <h1>Copy graphic using toDataURL</h1>

      <div>
        <button id="copy">Copy canvas image to image element</button> <br />
        <canvas id="MyCanvas" width="400" height="400"  >This browser or document mode doesn't support canvas</canvas>
        <img id="MyPix" src="" width="400" height="400" />

      </div>

      <script>
        // Create some graphics on the canvas.    
        var canvas = document.getElementById("MyCanvas");
        if (canvas.getContext) {
          var ctx = canvas.getContext("2d");
          ctx.fillStyle = "white";
          ctx.beginPath();
          ctx.rect(5, 5, 300, 250);
          ctx.fill();
          ctx.stroke();
          ctx.arc(150, 150, 100, 0, Math.PI, false);
          ctx.stroke();
       }

        // catch the click from the button and copy the graphic
        document.getElementById("copy").addEventListener("click", function () {
          var canvas1 = document.getElementById("MyCanvas");
          if (canvas1.getContext) {
            var ctx = canvas1.getContext("2d");                // Get the context for the canvas.
            var myImage = canvas1.toDataURL("image/png");      // Get the data as an image.
          }
          var imageElement = document.getElementById("MyPix");  // Get the img object.
          //imageElement.src = myImage;                           // Set the src to data from the canvas.
        window.location = myImage; 


        }, false);

      </script>
    </body>
    </html>

Answer 1

使用toDataUrl（）函数

var datImage = canvas.toDataURL("image/png");
document.write('<img src="'+datImage+'"/>');

此代码将获取画布的内容，并将其转换为PNG图像，并将其写入屏幕。

注意：在将图像更改为数据URL后将其绘制到画布上时，这不起作用。

希望这有帮助！

<html5>如何将画布导出到图像（jpg）和pdf文件</html5>

1 个答案: