一、前言

我发现将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转化为图片的更多相关文章

  1. vue的html2canvas将dom转化为图片时踩得坑

    一.html2canvas中图片涉及跨域图片 应用场景:做个投票活动,将参赛者的信息转化成图片截图分享.用户上传图片上传到腾讯云cos桶中,html2canvas只能转换本地资源的图片,涉及跨域的图片 ...

  2. Vue使用html2canvas将页面转化为图片

    需求是微信端将页面截屏之后保存到本地,使用了html2canvas插件 先引入插件 npm install --save html2canvas 之后在你所需要使用的页面引入 import html2 ...

  3. html dom 转化成图片踩坑记(canvas toDataURL)

    需求 在开发过程中遇到这么一个需求,h5页面需要将一个html dom转化成图片,便于用户保存. 面向百度搜索第三方得 html2canvas 和 dom-to-image 两者在写这篇笔记之前在gi ...

  4. html转化为图片下载

    业务需求:按照客户要求把排课表转化为图片下载到本地.一个月到排课有很多.所以图片会很大 <!DOCTYPE html> <html lang="en"> & ...

  5. javascript随机将第一个dom中的图片添加到第二个div中去

    javascript随机将第一个dom中的图片添加到第二个div中去,此代码的是一个简单的例子,将第一个div中的五张图片中,提取随机两张显示到第二个div中. <!DOCTYPE html P ...

  6. 【PDF单页转化为图片输出 注意:英文或图片类的PDF可转化,中文抛异常】

    public static void main(String[] args) throws IOException { /** * PDF单页转化为图片输出 注意:英文或图片类的PDF可转化,中文抛异 ...

  7. 将Word,PDF文档转化为图片

    #region 将Word文档转化为图片 /// <summary> /// 将Word文档转化为图片 /// </summary> /// <param name=&q ...

  8. vue build打包后css里的图片路径404不正确的问题

    vue build打包后css里的图片路径404 在vue-cli项目中build/utils.js中找到如下代码块,添加 publicPath:’../../’ if (options.extrac ...

  9. 将canvas画布内容转化为图片(toDataURL(),创建url)

    将canvas画布内容转化为图片(toDataURL(),创建url) 总结 1.现在的浏览器都支持右键另存为图片的方法来将canvas画布内容转化为图片 2.在代码里面可以通过toDataURL() ...

随机推荐

  1. Redis常见配置redis.conf

    redis的配置文件.相信学过SSH或SSM的读者都知道,配置文件的使用在当下开发已十分普遍,希望大家要熟悉习惯这 种开发方式,废话不多说,来开始我们今天的内容吧. 首先得找到 redis 的配置文件 ...

  2. bzoj2648/2716 kdtree

    SJY摆棋子 Time Limit: 20 Sec  Memory Limit: 128 MBSubmit: 5199  Solved: 1813[Submit][Status][Discuss] D ...

  3. My97DatePicker 时间控件

    <td> <input type="text" id="sendDate" name="sendDate" class=& ...

  4. Jsp中路径问题

    ${pageContext.request.contextPath}”的作用是取出部署的应用程序名,这样不管如何部署,所用路径都是正确的. <!--使用绝对路径的方式引入CSS文件-->& ...

  5. 多线程环境下 cpu % 分析

    1. top -H(查看阻塞进程,线程) 2. jstack  pid(查看堆栈信息) 另附 利用 Java dump 进行 JVM 故障诊断 http://www.blogjava.net/yuwe ...

  6. hdu1569 方格取数 求最大点权独立集

    题意:一个方格n*m,取出一些点,要求两两不相邻,求最大和.思路:建图,相邻的点有一条边,则建立了一个二分图,求最大点权独立集(所取点两两无公共边,权值和最大),问题转化为求总权和-最小点权覆盖集(点 ...

  7. 转:HtmlCxx用户手册

    1.1 简介 使用由KasperPeeters编写的强大的tree.h库文件,可以实现类似STL的DOM树遍历和导航. 打包好的Css解析器. 看似很像C++代码的C++代码(其实已不再是C++了) ...

  8. spring启动时加载字典表数据放入map

    import java.util.HashMap; import java.util.List; import org.springframework.beans.factory.annotation ...

  9. php编译安装后,加扩展模块

    1.进入php源码包中,找到需要安装的扩展模块目录. cd /root/php-5.6.26/ext/mbstring 2.在扩展模块目录,运行phpize程序. /usr/local/bin/php ...

  10. Meteor 从一个列表页进入详情页怎样高速显示详情

    无论是做android开发,还是做网页web开发,都 会有列表,都须要点击列表进入列表项的详情页面,查看具体信息,能常情况下,我们都是将这一列表项的id传到详情页,由详情页再到数据库查询具体信息. 在 ...