vue中使用html2canvas及解决html2canvas截屏图片模糊问题
最近在项目中用到了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
vue中使用html2canvas及解决html2canvas截屏图片模糊问题的更多相关文章
- 完美解决scrollView 截屏图片模糊
UIGraphicsBeginImageContext 首先说明一下UIGraphicsBeginImageContextWithOptions 和UIGraphicsBeginImageCont ...
- 【Android实战】Bitmap图片的截屏、模糊处理、传递、使用
项目中遇到了这样一个需求: 当某个条件满足时就截取当前屏幕.并跳转到另外一个页面,同一时候将这个截屏图片作为下一个页面的背景图片,同一时候背景图片须要模糊处理 接下来就一步一步解决这个问题: 1.截取 ...
- IOS第17天(2,Quartz2D图片剪裁变圆行图,和截屏图片)
**** #import "HMViewController.h" #import "UIImage+Tool.h" @interface HMViewCont ...
- pytest框架优化——将异常截屏图片加入到allure报告中
痛点分析: 在做allure定制化的时候,关于附件添加这一块,我们在代码里可以添加我们准备好的附件,这里用图片,通过下面的方法就能实现 allure.attach(file, '图片描述', allu ...
- Selenium截屏 图片未加载的问题解决--【懒加载】
需求: 截屏后转PDF. 问题: selenium截屏后,图片未加载 如下图: 原因: 网站使用了懒加载技术:只有在浏览器中纵向滚动条滚动到指定的位置时,页面的元素才会被动态加载. 什么是图片懒加载? ...
- [Egret]长按截屏分享、分享截屏图片、本地存储
egret 分享有API可以把一个显示对象树渲染成一个位图纹理,我把它赋值给 HTML 的 Image 元素,就实现了图片的显示,在微信中,通过长按图片可以分享出去.当然在其他浏览器可以保存在本地. ...
- 获取camera截屏图片
Camera camera; SpriteRenderer sprRender; Texture2D t2d = New Texture2D(1300, 760, TextureFormat.RGB2 ...
- cocos2dx之保存截屏图片
http://blog.csdn.net/ganpengjin1/article/details/19088921 我们要保存当前的运行的scene的截图的话,我用到CCRenderTexture,看 ...
- iOS 中捕获截屏操作
转自:iOS知识小集 在iOS 7后,苹果提供了UIApplicationUserDidTakeScreenshotNotification通知来告诉App用户做了截屏操作.苹果的描述如下: // T ...
随机推荐
- Windows下NetBeans中文乱码解决办法
找到你的Netbeans安装目录下的etc文件夹,用记事本打开netbeans.conf,找到netbeans_default_options(不是最后那个带句号的…), 在其属性的最后(冒号以内)加 ...
- JS实现网站内容的禁止复制和粘贴、另存为
1.使右键和复制失效方法1:在网页中加入以下代码: <script language="Javascript"> document.oncontextmenu=new ...
- Hadoop Ls命令添加显示条数限制參数
前言 在hadoop的FsShell命令中,预计非常多人比較经常使用的就是hadoop fs -ls,-lsr,-cat等等这种与Linux系统中差点儿一致的文件系统相关的命令.可是细致想想,这里还是 ...
- IntelliJ IDEA给Serializable类加上自动的serialVersionUID
如题 见下图 设置以后,点击类,按Alt + Enter 自动加入的代码如下图
- SpringBoot之整合Redis分析和实现-基于Spring Boot2.0.2版本
背景介绍 公司最近的新项目在进行技术框架升级,基于的Spring Boot的版本是2.0.2,整合Redis数据库.网上基于2.X版本的整个Redis少之又少,中间踩了不少坑,特此把整合过程记录,以供 ...
- 【MySQL】MySQL查询数据库各表的行数
#倒序查询数据库[各表记录数] use information_schema; select table_name,table_rows from tables where TABLE_SCHEMA ...
- app优化之流量节省
前言:“客户端上传时间戳”的玩法,你玩过么?一起聊聊时间戳的奇技淫巧!,其实这个类似于数据版本号的东西. 缘起:无线时代,流量敏感.APP在登录后,往往要向服务器同步非常多的数据,很费流量,技术上有没 ...
- 使用PHPExcel实现Excel文件的导入和导出(模板导出)
在之前有写过一篇文章讲述了使用PHP快速生成excel表格文件并下载,这种方式生成Excel文件,生成速度很快,但是有缺点是:1.单纯的生成Excel文件,生成的文件没有样式,单元格属性(填充色,宽度 ...
- Atitit s2018.5 s5 doc list on com pc.docx v2
Atitit s2018.5 s5 doc list on com pc.docx Acc 112237553.docx Acc Acc 112237553.docx Acc baidu ne ...
- np.corrcoef()方法计算数据皮尔逊积矩相关系数(Pearson's r)
上一篇通过公式自己写了一个计算两组数据的皮尔逊积矩相关系数(Pearson's r)的方法,但np已经提供了一个用于计算皮尔逊积矩相关系数(Pearson's r)的方法 np.corrcoef() ...