最近在项目中用到了html2canvas插件，遇到的一些坑写下来，与大家共勉。
html2canvas 官方网站http://html2canvas.hertzen.com/index.html
这是一个js截屏插件，在前台利用h5的canvas 将html的内容显示在canvas上，再利用 js 将canvas转化为图片
1.vue 文件中引入 html2canvas.js
<remote-script src="../html2canvas.js"></remote-script> 说明：src中的路径是html2canvas.js在项目中的路径 remoteScript 标签是上篇博客定义的标签，详情见：http://www.cnblogs.com/zhuchenglin/p/7455203.html
2.在vue中使用该插件，在methods中定义一个方法，内容为：
setTimeout(function () {
html2canvas(dom,{
onrendered:function (canvas) {
var image = new Image();
image.src = canvas.toDataURL();
document.getElementById('content_img').appendChild(image)
dom.style.display='none'
},
});
},0)
这样就可以了 说明：
在方法中如果不加 setTimeout函数的话，虽然使用console输出的dom内容正常，但是如果在vue中定义的变量中的内容在canvas中显示不出来，可能与vue的声明周期有关，这个暂时不清楚，加上setTimeout函数之后，会将此函数中的操作加到处理队列末尾 在拿到canvas后，转化为图片，直接就可以使用了。
3.关于html2canvas截出来的图片模糊的问题，我查了好多资料，试了好多方法，最终找到一篇非常有用的文章 https://segmentfault.com/a/1190000007707209
方法如下：
(1.修改插件的源码
<1.代码第999行renderWindow的方法中修改判断条件，增加一个options.scale存在的条件：
将
if (options.type === "view") {
canvas = crop(renderer.canvas, {width: renderer.canvas.width, height: renderer.canvas.height, top: 0, left: 0, x: 0, y: 0});
} else if (node === clonedWindow.document.body || node === clonedWindow.document.documentElement || options.canvas != null) {
canvas = renderer.canvas;
} else {
canvas = crop(renderer.canvas, {width: options.width != null ? options.width : bounds.width, height: options.height != null ? options.height : bounds.height, top: bounds.top, left: bounds.left, x: 0, y: 0});
}
修改为
if (options.type === "view") {
canvas = crop(renderer.canvas, {width: renderer.canvas.width, height: renderer.canvas.height, top: 0, left: 0, x: 0, y: 0});
} else if (node === clonedWindow.document.body || node === clonedWindow.document.documentElement) {
canvas = renderer.canvas;
}else if(options.scale && options.canvas !=null){
log("放大canvas",options.canvas);
var scale = options.scale || 1;
canvas = crop(renderer.canvas, {width: bounds.width * scale, height:bounds.height * scale, top: bounds.top *scale, left: bounds.left *scale, x: 0, y: 0});
}
else {
canvas = crop(renderer.canvas, {width: options.width != null ? options.width : bounds.width, height: options.height != null ? options.height : bounds.height, top: bounds.top, left: bounds.left, x: 0, y: 0});
}
2.代码第 943 行 html2canvas 的方法中 修改width,height：
将
return renderDocument(node.ownerDocument, options, node.ownerDocument.defaultView.innerWidth, node.ownerDocument.defaultView.innerHeight, index).then(function(canvas) {
if (typeof(options.onrendered) === "function") {
log("options.onrendered is deprecated, html2canvas returns a Promise containing the canvas");
options.onrendered(canvas);
}
return canvas;
});
改为：
width = options.width != null ? options.width : node.ownerDocument.defaultView.innerWidth;
height = options.height != null ? options.height : node.ownerDocument.defaultView.innerHeight;
return renderDocument(node.ownerDocument, options, width, height, index).then(function(canvas) {
if (typeof(options.onrendered) === "function") {
log("options.onrendered is deprecated, html2canvas returns a Promise containing the canvas");
options.onrendered(canvas);
}
return canvas;
});
然后就可以使用了，将原来的使用放式稍微还一下就可以了，使用实例如下：
在vue的方法中添加一个获取设备像素密度的方法
getPixelRatio(context){
var backingStore = context.backingStorePixelRatio ||
context.webkitBackingStorePixelRatio ||
context.mozBackingStorePixelRatio ||
context.msBackingStorePixelRatio ||
context.oBackingStorePixelRatio ||
context.backingStorePixelRatio || 1;
return (window.devicePixelRatio || 1) / backingStore;
},
然后将最上面的使用示例改为：
get_img(){
let self = this;
setTimeout(function () {
var content_html = document.getElementById('content_html'); //要转化的div
let width = content_html.offsetWidth;
let height = content_html.offsetHeight;
let offsetTop = content_html.offsetTop;
let canvas = document.createElement("canvas");
let context = canvas.getContext('2d');
let scaleBy = self.getPixelRatio(context);
canvas.width = width*scaleBy;
canvas.height = (height+offsetTop)*scaleBy;
context.scale(scaleBy,scaleBy);
var opts = {
allowTaint:true,//允许加载跨域的图片
tainttest:true, //检测每张图片都已经加载完成
scale:scaleBy, // 添加的scale 参数
canvas:canvas, //自定义 canvas
logging: true, //日志开关，发布的时候记得改成false
width:width, //dom 原始宽度
height:height //dom 原始高度
};
html2canvas(content_html,opts).then(function (canvas) {
canvas.style.width = width+"px";
canvas.style.height = height+"px";
var image = new Image();
image.src = canvas.toDataURL();
document.getElementById('content_img').appendChild(image); //将转化好的图片插入到防止图片转换的div中
content_html.style.display='none'
});
}
然后在html2canvas插件加载成功后调用get_img()方法即可将比较清晰的图片插入到指定位置
注：如需转载请注明出处：http://www.cnblogs.com/zhuchenglin/p/7455336.html