將HTML Canvas捕獲爲gif / jpg / png / pdf嗎？

是否能夠捕獲或打印html畫布中顯示爲圖像或pdf的內容？

我想經過畫布生成圖像，並可以從該圖像生成png。

---

#1樓

另外一個有趣的解決方案是PhantomJS 。 這是一個無頭WebKit，可以使用JavaScript或CoffeeScript編寫腳本。

用例之一是屏幕捕獲：您能夠以編程方式捕獲Web內容，包括SVG和Canvas，和/或使用縮略圖預覽建立網站截圖。

最好的入口點是屏幕捕獲 Wiki頁面。

這是一個極地時鐘的好例子（來自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

---

#2樓

我覺得我會擴大此問題的範圍，並提供一些有關此事的有用提示。

爲了使畫布做爲圖像，您應該執行如下操做：

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的兩個實例，但不要更改image / octet-stream。 還值得一提的是，若是在渲染畫布時使用任何跨域資源，則在嘗試使用toDataUrl方法時會遇到安全錯誤。

---

#3樓

若是您經過服務器下載文件，則有一些幫助（經過這種方式，您能夠命名/轉換/後處理/等文件）：

-使用toDataURL發佈數據

-設置標題

$filename = "test.jpg"; //or png
header('Content-Description: File Transfer');
if($msie = !strstr($_SERVER["HTTP_USER_AGENT"],"MSIE")==false)      
  header("Content-type: application/force-download");else       
  header("Content-type: application/octet-stream"); 
header("Content-Disposition: attachment; filename=\"$filename\"");   
header("Content-Transfer-Encoding: binary"); 
header("Expires: 0"); header("Cache-Control: must-revalidate"); 
header("Pragma: public");

-建立圖像

$data = $_POST['data'];
$img = imagecreatefromstring(base64_decode(substr($data,strpos($data,',')+1)));

-將圖像導出爲JPEG

$width = imagesx($img);
$height = imagesy($img);
$output = imagecreatetruecolor($width, $height);
$white = imagecolorallocate($output,  255, 255, 255);
imagefilledrectangle($output, 0, 0, $width, $height, $white);
imagecopy($output, $img, 0, 0, 0, 0, $width, $height);
imagejpeg($output);
exit();

-或做爲透明PNG

imagesavealpha($img, true);
imagepng($img);
die($img);

---

#4樓

若是您使用的是不少人都使用的jQuery，則能夠像這樣實現已接受的答案：

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

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

---

#5樓

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);
}