html2canvas

最近公司有個需求，實現html 頁面元素轉為png圖像,這邊用了html2canvas來實現.,這里記錄一下，避免以后忘了~~

官網鏈接: http://html2canvas.hertzen.com/

npm安裝

 npm install --save html2canvas

或者下載文件引入

 

上圖右擊另存為

html：

js

 

一些簡單配置：

html2canvas(document,{scale:4,logging:false,useCORS:true}).then(function(canvas) {

var imgUrl= canvas.toDataURL("png"); // 獲取生成的圖片的url
}）

document：dom元素  // document.getElementById('elemnent')

scale:放大倍數

useCROS：是否允許跨域；

logging：日志打印；

返回的canvas 可以直接添加到頁面上進行預覽，也可以 轉成base64給后台 imgUrl

一些問題：

要截取的頁面若有圖片，需要把圖片轉成base64形式

下面是例子：

function getBase64Image(imgurl) {
var img = new Image();
img.src = imgurl;
img.setAttribute('crossOrigin', 'anonymous');
img.onload=function(){
var canvas = document.createElement("canvas");
canvas.width = 300;//這個設置不能丟，否者會成為canvas默認的300*150的大小
canvas.height = 300;//這個設置不能丟，否者會成為canvas默認的300*150的大小
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, 300, 300);
var dataURL = canvas.toDataURL("image/png");
console.log(dataURL)
$("#img").attr("src",dataURL);
html2img();
}
}

我在項目里是做了一個上傳圖片預覽的功能，就不需要進行這一步了。

這里簡單的使用就講完了，朋友們可以多多補充一下。