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() ...
随机推荐
- Redis常见配置redis.conf
redis的配置文件.相信学过SSH或SSM的读者都知道,配置文件的使用在当下开发已十分普遍,希望大家要熟悉习惯这 种开发方式,废话不多说,来开始我们今天的内容吧. 首先得找到 redis 的配置文件 ...
- bzoj2648/2716 kdtree
SJY摆棋子 Time Limit: 20 Sec Memory Limit: 128 MBSubmit: 5199 Solved: 1813[Submit][Status][Discuss] D ...
- My97DatePicker 时间控件
<td> <input type="text" id="sendDate" name="sendDate" class=& ...
- Jsp中路径问题
${pageContext.request.contextPath}”的作用是取出部署的应用程序名,这样不管如何部署,所用路径都是正确的. <!--使用绝对路径的方式引入CSS文件-->& ...
- 多线程环境下 cpu % 分析
1. top -H(查看阻塞进程,线程) 2. jstack pid(查看堆栈信息) 另附 利用 Java dump 进行 JVM 故障诊断 http://www.blogjava.net/yuwe ...
- hdu1569 方格取数 求最大点权独立集
题意:一个方格n*m,取出一些点,要求两两不相邻,求最大和.思路:建图,相邻的点有一条边,则建立了一个二分图,求最大点权独立集(所取点两两无公共边,权值和最大),问题转化为求总权和-最小点权覆盖集(点 ...
- 转:HtmlCxx用户手册
1.1 简介 使用由KasperPeeters编写的强大的tree.h库文件,可以实现类似STL的DOM树遍历和导航. 打包好的Css解析器. 看似很像C++代码的C++代码(其实已不再是C++了) ...
- spring启动时加载字典表数据放入map
import java.util.HashMap; import java.util.List; import org.springframework.beans.factory.annotation ...
- php编译安装后,加扩展模块
1.进入php源码包中,找到需要安装的扩展模块目录. cd /root/php-5.6.26/ext/mbstring 2.在扩展模块目录,运行phpize程序. /usr/local/bin/php ...
- Meteor 从一个列表页进入详情页怎样高速显示详情
无论是做android开发,还是做网页web开发,都 会有列表,都须要点击列表进入列表项的详情页面,查看具体信息,能常情况下,我们都是将这一列表项的id传到详情页,由详情页再到数据库查询具体信息. 在 ...