vue中使用html2canvas及解决html2canvas截屏图片模糊问题
2017-08-30 21:17
1711 查看
最近在项目中用到了html2canvas插件,遇到的一些坑写下来,与大家共勉。
html2canvas 官方网站http://html2canvas.hertzen.com/index.html
这是一个js截屏插件,在前台利用h5的canvas 将html的内容显示在canvas上,再利用 js 将canvas转化为图片
1.vue 文件中引入 html2canvas.js
2.在vue中使用该插件,在methods中定义一个方法,内容为:
3.关于html2canvas截出来的图片模糊的问题,我查了好多资料,试了好多方法,最终找到一篇非常有用的文章 https://segmentfault.com/a/1190000007707209
方法如下:
(1.修改插件的源码
<1.代码第999行renderWindow的方法中修改判断条件,增加一个options.scale存在的条件:
将
修改为
2.代码第 943 行 html2canvas 的方法中 修改width,height:
将
改为:
然后就可以使用了,将原来的使用放式稍微还一下就可以了,使用实例如下:
在vue的方法中添加一个获取设备像素密度的方法
然后将最上面的使用示例改为:
然后在html2canvas插件加载成功后调用get_img()方法即可将比较清晰的图片插入到指定位置
注:如需转载请注明出处:http://www.cnblogs.com/zhuchenglin/p/7455336.html
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
相关文章推荐
- html2canvas截屏跨域图片解决办法
- HTML5使用canvas画图时,图片被自动放大模糊的问题
- html的img中使用SVG图片做SRC在本地测试可用但是上传服务器后不能显示问题解决 标签: SVGMIME TYPE不显示服务器设置 2016-05-21 13:49 2517人阅读 评论(0)
- 使用 html2canvas 将 HTML 节点转为图片并解决跨域图片
- html2canvas截图如何解决图片跨域的问题?
- html的img中使用SVG图片做SRC在本地测试可用但是上传服务器后不能显示问题解决
- vue 使用html2canvas将DOM转化为图片的方法
- 使用vue-lazyload解决Vue+Webpack项目的图片加载问题
- vue实现pdf导出,解决生成canvas模糊等问题
- 使用html2canvas截图不全问题解决方案——经测可用
- html2canvas完整demo解决图片跨域问题(已经成功啦啦)
- 使用Rectangle+ImageBrush来代替Image,解决图片模糊的问题
- canvas 使绘制的图片在div 居中显示 ,解决绘图模糊问题
- megapix-image插件 使用Canvas压缩图片上传 解决手机端图片上传功能的问题
- 解决html5 canvas 绘制字体、图片与图形模糊问题
- 解决struts2+jasperReport在生成html形式的报表时的图片问题 没有测试
- cocos2d-x如何解决图片显示模糊问题
- 烂泥:使用火狐解决网站图片不能复制下载的问题
- 解决使用NPOI在已有Sheet中插入多张图片问题
- Jetty 使用 以及HTML 和Js代码无法保存问题解决