javascript - todataurl品質 - js html to image




將HTML Canvas捕獲為gif/jpg/png/pdf? (7)

HTML5提供了在Opera,Firefox和Safari 4 beta中實現的Canvas.toDataURL(mimetype)。 然而,有很多安全限制(主要是將另一個來源的內容繪製到畫布上)。

所以你不需要額外的庫。

例如

 <canvas id=canvas width=200 height=200></canvas>
 <script>
      window.onload = function() {
          var canvas = document.getElementById("canvas");
          var context = canvas.getContext("2d");
          context.fillStyle = "green";
          context.fillRect(50, 50, 100, 100);
          // no argument defaults to image/png; image/jpeg, etc also work on some
          // implementations -- image/png is the only one that must be supported per spec.
          window.location = canvas.toDataURL("image/png");
      }
 </script>

理論上講,這應該創建並導航到中間有一個綠色正方形的圖像,但我沒有測試過。

是否可以捕獲或打印HTML畫布中顯示的圖像或PDF?

我想通過畫布生成一個圖像,並能夠從該圖像生成一個PNG。


另一個有趣的解決方案是PhantomJS 。 這是一個無頭的WebKit腳本,帶有JavaScript或CoffeeScript。

其中一個用例是屏幕截圖:您可以以編程方式捕捉網頁內容,包括SVG和Canvas和/或使用縮略圖預覽創建網站截圖。

最好的入口點是屏幕截圖維基頁面。

這是極地時鐘的一個很好的例子(來自RaphaelJS):

>phantomjs rasterize.js http://raphaeljs.com/polar-clock.html clock.png

您是否想要將頁面呈現為PDF?

> phantomjs rasterize.js 'http://en.wikipedia.org/w/index.php?title=Jakarta&printable=yes' jakarta.pdf

在某些版本的Chrome上,您可以:

  1. 使用繪圖函數ctx.drawImage(image1, 0, 0, w, h);
  2. 右鍵單擊畫布

如果你使用的jQuery,相當多的人都這樣做,那麼你會實現接受的答案是這樣的:

var canvas = $("#mycanvas")[0];
var img = canvas.toDataURL("image/png");

$("#elememt-to-write-to").html('<img src="'+img+'"/>');


我想我會稍微擴大這個問題的範圍,並提供一些有用的消息。

為了將畫布作為圖像,您應該執行以下操作:

var canvas = document.getElementById("mycanvas");
var image = canvas.toDataURL("image/png");

您可以使用它將圖像寫入頁面:

document.write('<img src="'+image+'"/>');

其中“image / png”是一個MIME類型(png是唯一必須支持的)。 如果你想要一個支持類型的數組,你可以按照這個方法做一些事情:

var imageMimes = ['image/png', 'image/bmp', 'image/gif', 'image/jpeg', 'image/tiff']; //Extend as necessary 
var acceptedMimes = new Array();
for(i = 0; i < imageMimes.length; i++) {
    if(canvas.toDataURL(imageMimes[i]).search(imageMimes[i])>=0) {
        acceptedMimes[acceptedMimes.length] = imageMimes[i];
    }
}

你只需要每頁運行一次 - 它永遠不會改變整個頁面的生命週期。

如果您希望讓用戶在保存時下載文件,您可以執行以下操作:

var canvas = document.getElementById("mycanvas");
var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); //Convert image to 'octet-stream' (Just a download, really)
window.location.href = image;

如果您使用不同的MIME類型,請務必更改image / png的兩個實例,但不要更改圖像/八位字節流。 還值得一提的是,如果您在呈現畫佈時使用任何跨域資源,則當您嘗試使用toDataUrl方法時,將會遇到安全錯誤。


function exportCanvasAsPNG(id, fileName) {

    var canvasElement = document.getElementById(id);

    var MIME_TYPE = "image/png";

    var imgURL = canvasElement.toDataURL(MIME_TYPE);

    var dlLink = document.createElement('a');
    dlLink.download = fileName;
    dlLink.href = imgURL;
    dlLink.dataset.downloadurl = [MIME_TYPE, dlLink.download, dlLink.href].join(':');

    document.body.appendChild(dlLink);
    dlLink.click();
    document.body.removeChild(dlLink);
}






png