vue 引入canvas_Vue中Html2canvas的使用

Html2canvas是什么?

是一个脚本 这个脚本可以允许用户直接在浏览器上拍摄网页或其中一部分的"屏幕截图".屏幕截图是基于DOM,因此可能无法真实表示100％的准确度，因为它无法生成实际的屏幕截图，而是根据页面上的可用信息构建屏幕截图。

运行过程?

脚本遍历加载页面的DOM。它收集那里所有元素的信息，然后将其用于构建页面的表示形式。换句话说，它实际上并不截取页面的屏幕快照，而是根据它从DOM读取的属性来构建页面的表示形式。所以可能有些这个脚本识别不了的css或者html将会在编译过程中失效!

局限性

脚本使用的所有图像都必须位于相同的来源， 以便它无需代理即可读取它们。同样，如果canvas 页面上还有其他元素被跨域内容污染，它们将变脏并且无法被html2canvas读取。

该脚本不会呈现Flash或Java applet之类的插件内容。

安装

npm i html2canvas

导入

import html2canvas from html2canvas

用法

html

生成图片

截取内容

js

//图片格式转换方法

dataURLToBlob(dataurl) {

let arr = dataurl.split(',');

let mime = arr[0].match(/:(.*?);/)[1];

let bstr = atob(arr[1]);

let n = bstr.length;

let u8arr = new Uint8Array(n);

while (n--) {

u8arr[n] = bstr.charCodeAt(n);

}

return new Blob([u8arr], { type: mime });

},

//点击方法

saveImage(divText, imgText) {

let canvasID = this.$refs[divText];

let that = this;

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

html2canvas(canvasID).then(canvas => {

let dom = document.body.appendChild(canvas);

dom.style.display = 'none';

a.style.display = 'none';

document.body.removeChild(dom);

let blob = that.dataURLToBlob(dom.toDataURL('image/png'));

a.setAttribute('href', URL.createObjectURL(blob));

//这块是保存图片操作 可以设置保存的图片的信息

a.setAttribute('download', imgText + '.png');

document.body.appendChild(a);

a.click();

URL.revokeObjectURL(blob);

document.body.removeChild(a);

});

},

关于网络图片截取不了 是因为跨域,上面说过脚本使用的所有图像都必须位于相同的来源,这里我们只需要给图片上增加一个属性crossOrigin="Anonymous"，以及对应后台做跨域处理就行了