vue 使用html2canvas将DOM转化为图片的方法

 更新时间:2018年09月11日 14:59:36   作者:Peggy7   我要评论

这篇文章主要介绍了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.有跨域图片导致生成的图片不完整

这两个问题网上百度都有很多解决办法。

html2canvas在vue下的巨坑

使用

html

<div id="capture" style="padding: 10px; background: #f5da55">
  <h4 style="color: #000; ">Hello world!</h4>
</div>

js

html2canvas(document.querySelector("#capture")).then(canvas => {
  document.body.appendChild(canvas)
});
 
```
 
![clipboard.png](/img/bVbghPZ)
 
```
html2canvas(document.querySelector("#capture") {
  async: true
}).then(canvas => {
  document.body.appendChild(canvas)
});

如果你要配置一些参数可以在传入dom的后面进行 object 传参 官网文档可查

官网文档

我自己的工程环境是vue-cli会进行webpack打包在ios下运行的时候会出现错误因为我要生成一张图片是的canvas api 是 toDataURL

这错误在ios一直显示是权限问题  在ios 和safari 上的问题是一致的 原因是canva绘制dom上的图片的时候是 base64的格式(webpack会对asstes目录下的图片进行压缩)花费了几个小时才解决这个问题,感觉很不值所以分享给大家希望大家别踩进去了!解决方法是可以 static目录或者同域下的文件地址

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • Vue 动态设置路由参数的案例分析

    Vue 动态设置路由参数的案例分析

    这篇文章主要介绍了Vue 动态设置路由参数的案例分析,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2018-04-04
  • 基于Vue.js的表格分页组件

    基于Vue.js的表格分页组件

    这篇文章主要为大家详细介绍了基于Vue.js的表格分页组件使用方法,了解了Vue.js的特点,感兴趣的朋友可以参考一下
    2016-05-05
  • vue 微信授权登录解决方案

    vue 微信授权登录解决方案

    这篇文章主要介绍了vue 微信授权解决方案,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法

    vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法

    这篇文章主要介绍了vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法,非常不错,具有参考借鉴价值,,需要的朋友可以参考下
    2017-02-02
  • 浅谈vuepress 踩坑记

    浅谈vuepress 踩坑记

    本篇文章主要介绍了浅谈vuepress 踩坑记,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • 学习vue.js中class与style绑定

    学习vue.js中class与style绑定

    这篇文章主要和大家一起学习vue.js中class与style绑定操作,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • Vue.js 利用v-for中的index值实现隔行变色

    Vue.js 利用v-for中的index值实现隔行变色

    这篇文章主要介绍了Vue.js 利用v-for中的index值实现隔行变色效果,首先定义好样式,利用v-for中的index值,然后绑定样式来实现隔行变色,需要的朋友可以参考下
    2018-08-08
  • 关于vue.js v-bind 的一些理解和思考

    关于vue.js v-bind 的一些理解和思考

    本篇文章主要介绍了关于vue.js v-bind 的一些理解和思考,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • Vue2 SSR渲染根据不同页面修改 meta

    Vue2 SSR渲染根据不同页面修改 meta

    本篇文章主要介绍了Vue2 SSR渲染根据不同页面修改 meta,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • Vue插件打包与发布的方法示例

    Vue插件打包与发布的方法示例

    插件功能开发完成后,若需要发布到公共组件库中(例如:npmjs),需要对插件进行打包并发布,这篇文章主要介绍了Vue插件打包与发布的方法示例,感兴趣的小伙伴们可以参考一下
    2018-08-08

最新评论