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