将Html页面截取成图片 html2canvas

1、安装

npm install --save html2canvas

2、在需要使用的vue组件中引入html2canvas

import html2canvasfrom"html2canvas"

3、在要截取的区域添加ref标记

/**

* 将页面ref指定节点的区域内容转为图片

* 1.拿到想要转换为图片的内容节点DOM；

* 2.转换，拿到转换后的canvas

* 3.转换为图片

generatePic() { //生成图片

html2canvas(this.$refs.toImg).then(canvas => {

// 转成图片，生成图片地址

let imgUrl = canvas.toDataURL("image/png"); //可将 canvas 转为 base64 格式

});

}

4、PC端保存生成的图片

downloadFile (fileName, content) {

let aLink = document.createElement('a');

let blob = this.base64ToBlob(content); //new Blob([content]);

let evt = document.createEvent("HTMLEvents");

evt.initEvent("click", true, true);//initEvent 不加后两个参数在FF下会报错事件类型，是否冒泡，是否阻止浏览器的默认行为

aLink.download = fileName;

aLink.href = URL.createObjectURL(blob);

aLink.dispatchEvent(new MouseEvent('click', {bubbles: true, cancelable: true, view: window}));//兼容火狐

base64ToBlob(code) {

let parts = code.split(';base64,');

let contentType = parts[0].split(':')[1];

let raw = window.atob(parts[1]);

let rawLength = raw.length;

let uInt8Array = new Uint8Array(rawLength);

for (let i = 0; i < rawLength; ++i) {

uInt8Array[i] = raw.charCodeAt(i);

}

return new Blob([uInt8Array], {type: contentType});

}

5、问题

（1）网络图片截取是跨域问题

{ allowTaint: true, useCORS: true }

html2canvas(this.$refs.toImg, {allowTaint: true}).then(canvas => { // append canvas to page });

（2）textarea标签多行文字变成一行文字截取不全；

可以使用span标签替换使用