vue 使用html2canvas将DOM转化为图片
一、前言
我发现将DOM转化为图片是一个非常常见的需求,而自己手动转是非常麻烦的,于是找到了html2canvas这个插件,既是用得比较多的也是维护得比较好的一个插件。
注意:版本比较多,这里介绍最新版
二、代码
1. 安装
npm install html2canvas --save
现在最新的版本应该是1.0.0,另外还有一个比较经典的版本是0.5.0,网上有许多关于这个版本的bug说明。
2. 使用
<div class="imageWrapper" ref="imageWrapper">
<img class="real_pic" :src="dataURL" />
<slot></slot>
</div>
slot里面是你需要转化为图片的DOM元素。
data() {
return {
dataURL: ''
}
},
dataURL是最后转化出来的图片base64地址,放在img标签中即可展示。
methods: {
toImage() {
html2canvas(this.$refs.imageWrapper,{
backgroundColor: null
}).then((canvas) => {
let dataURL = canvas.toDataURL("image/png");
this.dataURL = dataURL;
});
}
}
html2canvas的用法非常简单,不过1.0.0已经将写法改为了promise,在.then方法里获取canvas对象。
3.常见bug
1. 生成出来的图片有白色边框
在配置项里配置backgroundColor: null即可。
2. 有图片显示不出来并有报错(一般是跨域的错)
这是最常见的一个bug,就是这个插件无法生成跨域了的图片,也看了官方文档配置了也百度了都没有好的办法,最后是让后端直接把跨域的图片转成base64,就完美解决了这个问题。
3. 生成图片后会在原始DOM上覆盖而产生一个闪动的效果
先让生成的图片隐藏,等生成好以后再展示。(没有在手机上测试,效果不一定令人满意)
4.经典版本(0.5.0)常见bug
1.生成的图片模糊
2.有跨域图片导致生成的图片不完整
这两个问题网上百度都有很多解决办法。
三、结语
如果遇到任何无法解决的问题请在评论里留言。
来源:https://segmentfault.com/a/1190000016349236
vue 使用html2canvas将DOM转化为图片的更多相关文章
- vue的html2canvas将dom转化为图片时踩得坑
一.html2canvas中图片涉及跨域图片 应用场景:做个投票活动,将参赛者的信息转化成图片截图分享.用户上传图片上传到腾讯云cos桶中,html2canvas只能转换本地资源的图片,涉及跨域的图片 ...
- Vue使用html2canvas将页面转化为图片
需求是微信端将页面截屏之后保存到本地,使用了html2canvas插件 先引入插件 npm install --save html2canvas 之后在你所需要使用的页面引入 import html2 ...
- html dom 转化成图片踩坑记(canvas toDataURL)
需求 在开发过程中遇到这么一个需求,h5页面需要将一个html dom转化成图片,便于用户保存. 面向百度搜索第三方得 html2canvas 和 dom-to-image 两者在写这篇笔记之前在gi ...
- html转化为图片下载
业务需求:按照客户要求把排课表转化为图片下载到本地.一个月到排课有很多.所以图片会很大 <!DOCTYPE html> <html lang="en"> & ...
- javascript随机将第一个dom中的图片添加到第二个div中去
javascript随机将第一个dom中的图片添加到第二个div中去,此代码的是一个简单的例子,将第一个div中的五张图片中,提取随机两张显示到第二个div中. <!DOCTYPE html P ...
- 【PDF单页转化为图片输出 注意:英文或图片类的PDF可转化,中文抛异常】
public static void main(String[] args) throws IOException { /** * PDF单页转化为图片输出 注意:英文或图片类的PDF可转化,中文抛异 ...
- 将Word,PDF文档转化为图片
#region 将Word文档转化为图片 /// <summary> /// 将Word文档转化为图片 /// </summary> /// <param name=&q ...
- vue build打包后css里的图片路径404不正确的问题
vue build打包后css里的图片路径404 在vue-cli项目中build/utils.js中找到如下代码块,添加 publicPath:’../../’ if (options.extrac ...
- 将canvas画布内容转化为图片(toDataURL(),创建url)
将canvas画布内容转化为图片(toDataURL(),创建url) 总结 1.现在的浏览器都支持右键另存为图片的方法来将canvas画布内容转化为图片 2.在代码里面可以通过toDataURL() ...
随机推荐
- 【2018.9.20】JOI 2017 Final T3「JOIOI 王国 / The Kingdom of JOIOI」
题目链接 题目描述 JOIOI 王国是一个 $H$ 行 $W$ 列的长方形网格,每个 $1\times 1$ 的子网格都是一个正方形的小区块.为了提高管理效率,我们决定把整个国家划分成两个省 $JOI ...
- java面试题之简单介绍一下集合框架
集合框架分为三块:List列表.Set集合.Map映射 List列表在数据结构上可以被看做线性表,常用的有ArrayList和LinkList(不常用的有Vector(类似于ArrayList)),他 ...
- bzoj2324 [ZJOI2011]营救皮卡丘 费用流
[ZJOI2011]营救皮卡丘 Time Limit: 10 Sec Memory Limit: 256 MBSubmit: 2653 Solved: 1101[Submit][Status][D ...
- mysql语句优化方案(网上流传)
关于mysql处理百万级以上的数据时如何提高其查询速度的方法 最近一段时间由于工作需要,开始关注针对Mysql数据库的select查询语句的相关优化方法. 由于在参与的实际项目中发现当mysql表的数 ...
- 安装破解版的webstorne
参考以下链接:https://www.cnblogs.com/cui-cui/p/8507435.html
- vue之组件注册
一.组件名 写组件之前你要明确你的目的,想要做一个什么样的组件,我们在注册一个组件的时候,需要给组件一个名字,对于命名,尽可能明确,使用 kebab-case (短横线分隔命名) 或 PascalCa ...
- TYVJ P1577 泥泞的道路
题目链接:http://www.tyvj.cn/p/1577# P1577 泥泞的道路 时间: 1000ms / 空间: 131072KiB / Java类名: Main 描述 公园中有n个景点,编号 ...
- [Bzoj5043][Lydsy1709月赛]密码破译(按位dp)
5043: [Lydsy1709月赛]密码破译 Time Limit: 10 Sec Memory Limit: 256 MBSubmit: 477 Solved: 125[Submit][Sta ...
- Ubuntu 16.04安装Jetty Web服务器
一.下载 http://www.eclipse.org/jetty/download.html 二.安装 tar -zxvf jetty-distribution-9.4.7.v20170914.ta ...
- Linux查看系统状态命令top
用法 top 自动刷新系统状态,要结束使用[Ctrl]+[C] 效果图: 信息解释(转自百度经验http://jingyan.baidu.com/article/4d58d5412917cb9dd4e ...