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


Posted in Javascript onSeptember 11, 2018

一、前言

我发现将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目录或者同域下的文件地址

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

Javascript 相关文章推荐
srcElement表格样式
Sep 03 Javascript
js模仿hover的具体实现代码
Dec 30 Javascript
JavaScript中的异常捕捉介绍
Dec 31 Javascript
html的DOM中document对象images集合用法实例
Jan 21 Javascript
Javascript简单改变表单元素背景的方法
Jul 15 Javascript
jQuery图片左右滚动代码 有左右按钮实例
Jun 20 Javascript
原生JS简单实现ajax的方法示例
Nov 29 Javascript
JS实现改变HTML上文字颜色和内容的方法
Dec 30 Javascript
详解使用Vue.Js结合Jquery Ajax加载数据的两种方式
Jan 10 Javascript
JQuery实现定时刷新功能代码
May 09 jQuery
基于 D3.js 绘制动态进度条的实例详解
Feb 26 Javascript
javascript中call,apply,callee,caller用法实例分析
Jul 24 Javascript
Vue项目数据动态过滤实践及实现思路
Sep 11 #Javascript
使用vue.js在页面内组件监听scroll事件的方法
Sep 11 #Javascript
vue+axios+element ui 实现全局loading加载示例
Sep 11 #Javascript
Webpack之tree-starking 解析
Sep 11 #Javascript
node.js之基础加密算法模块crypto详解
Sep 11 #Javascript
Vue在页面数据渲染完成之后的调用方法
Sep 11 #Javascript
浅谈Webpack核心模块tapable解析
Sep 11 #Javascript
You might like
DOTA2 玩家自创拉野攻略 特色英雄快速成长篇
2020/04/20 DOTA
php-app开发接口加密详解
2018/04/18 PHP
有关js的变量作用域和this指针的讨论
2010/12/16 Javascript
JQueryEasyUI datagrid框架的基本使用
2013/04/08 Javascript
构造函数+原型模式构造js自定义对象(最通用)
2014/05/12 Javascript
jQuery提交多个表单的小技巧
2014/07/27 Javascript
DOM基础教程之使用DOM + Css
2015/01/20 Javascript
nodejs通过phantomjs实现下载网页
2015/05/04 NodeJs
JavaScript重载函数实例剖析
2016/05/13 Javascript
jquery获取复选框的值的简单实例
2016/05/26 Javascript
JavaScript toUpperCase()方法使用详解
2016/08/26 Javascript
js中获取键盘事件的简单实现方法
2016/10/10 Javascript
Easyui Tree获取当前选择节点的所有顶级父节点
2017/02/14 Javascript
Express框架之connect-flash详解
2017/05/31 Javascript
学习React中ref的两个demo示例
2018/08/14 Javascript
解决在vue项目中webpack打包后字体不生效的问题
2018/09/01 Javascript
[15:56]Heroes18_暗影萨满(完美)
2014/10/31 DOTA
[46:32]Fnatic vs OG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
PyCharm安装第三方库如Requests的图文教程
2018/05/18 Python
python生成随机红包的实例写法
2019/09/02 Python
Python queue队列原理与应用案例分析
2019/09/27 Python
详解pandas中iloc, loc和ix的区别和联系
2020/03/09 Python
python使用Thread的setDaemon启动后台线程教程
2020/04/25 Python
Python爬虫之爬取淘女郎照片示例详解
2020/07/28 Python
纯CSS3实现图片无间断轮播效果
2016/08/25 HTML / CSS
彪马美国官网:PUMA美国
2017/03/09 全球购物
巴西食品补充剂在线零售商:Músculos na Web
2017/08/07 全球购物
加拿大在线眼镜零售商:SmartBuyGlasses加拿大
2019/05/25 全球购物
澳大利亚最早和最古老的巨型游戏专家:Yardgames
2020/02/20 全球购物
饲料采购员岗位职责
2013/12/19 职场文书
班组建设经验交流材料
2014/05/12 职场文书
教导主任个人总结
2015/03/03 职场文书
元旦晚会主持词开场白
2015/05/28 职场文书
班级管理经验交流材料
2015/11/02 职场文书
pytorch 实现变分自动编码器的操作
2021/05/24 Python
教你如何使用Python开发一个钉钉群应答机器人
2021/06/21 Python