<html5>帆布如何導出圖像（JPG格式）和PDF文件

我想在畫布和出口畫布繪製圖像的圖像（JPG格式）文件和PDF文件..<html5>帆布如何導出圖像（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>

來源

2014-09-01 user3916421

使用toDataUrl（）函數

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

該代碼將在畫布的內容，並把它轉化爲一個PNG圖像，並將其寫入到屏幕上。

注意：在您更改數據URL時將圖像繪製到畫布上後，這不起作用。

希望這有助於！

來源

2014-09-01 02:54:27

謝謝..但我想下載XXX.jpg文件。 – user3916421 2014-09-01 06:06:47

也許這會有幫助嗎？ - http://stackoverflow.com/questions/10473932/browser-html-force-download-of-image-from-src-dataimage-jpegbase64 – 2014-09-02 23:32:28

<html5>帆布如何導出圖像（JPG格式）和PDF文件

回答

相關問題