js(網頁，程式碼，canvas）轉圖片
阿新 • • 發佈：2019-02-02
一般來說html程式碼不能直接轉換成圖片，需要先轉換成canvas在由canvas轉換成圖片。
本文將介紹以下幾種情況：
1.圖片轉換成canvas
2. canvas轉換成圖片
3. Html程式碼轉換成canvas
4. HTML程式碼轉換成圖片
1.圖片轉換成canvas
function convertImageToCanvas(image) {
var canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
canvas.getContext("2d").drawImage(image, 0, 0);
return canvas;
}
2.canvas轉換成圖片
註明：需要執行在伺服器
function convertCanvasToImage(canvas) {
var image = new Image();
image.crossOrigin = '*’; //用以解決跨域問題
image.src = canvas.toDataURL("image/png");
return image;
}
3.Html程式碼轉換成canvas
需要藉助一個三方工具html2canvas.js
view代表想要渲染的html程式碼區域
html2canvas(document.getElementById('view'), {
onrendered: function(canvas) {
document.body.appendChild(canvas);
},
});
4.HTML程式碼轉換成圖片
思路，先把html程式碼轉換成canvas，再將canvas轉換成圖片，但是這樣要經過兩步，而一般的需求都是一次性將html程式碼轉換成圖片。
經過試驗，發現，在html2canvas工具中可以直接整合.canvas轉換成圖片的程式碼，如下：
html2canvas(document.getElementById('view'), {
onrendered: function(canvas) {
var image = new Image();
image.crossOrigin = '*'; //用以解決跨域問題
image.src = canvas.toDataURL("image/png");
document.body.appendChild(image);
},
});