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 相关文章推荐
javascript window对象属性整理
Oct 24 Javascript
解析Javascript中大括号“{}”的多义性
Dec 02 Javascript
详解JS面向对象编程
Jan 24 Javascript
ui组件之input多选下拉实现方法(带有搜索功能)
Jul 14 Javascript
javascript 动态脚本添加的简单方法
Oct 11 Javascript
微信小程序 MD5加密登录密码详解及实例代码
Jan 12 Javascript
基本DOM节点操作
Jan 17 Javascript
bootstrap输入框组件使用方法详解
Jan 19 Javascript
EasyUI实现下拉框多选功能
Nov 07 Javascript
Angular实现的敏感文字自动过滤与提示功能示例
Dec 29 Javascript
jQuery层叠选择器用法实例分析
Jun 28 jQuery
Vue.js暴露方法给WebView的使用操作
Sep 07 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
wiki-shan写的php在线加密的解密程序
2008/09/07 PHP
php获取mysql字段名称和其它信息的例子
2014/04/14 PHP
解密ThinkPHP3.1.2版本之独立分组功能应用
2014/06/19 PHP
浅谈php错误提示及查错方法
2015/07/14 PHP
php实现的支付宝网页支付功能示例【基于TP5框架】
2019/09/16 PHP
页面使用密码保护代码
2013/04/10 Javascript
非常漂亮的相册集 使用jquery制作相册集
2016/04/28 Javascript
微信小程序scroll-view实现横向滚动和上拉加载示例
2017/03/06 Javascript
Vue实现购物车场景下的应用
2017/11/27 Javascript
webpack@v4升级踩坑(小结)
2018/10/08 Javascript
jquery分页插件pagination使用教程
2018/10/23 jQuery
element ui table 增加筛选的方法示例
2018/11/02 Javascript
Vue入门学习笔记【基本概念、对象、过滤器、指令等】
2019/04/13 Javascript
在Vue项目中使用snapshot测试的具体使用
2019/04/16 Javascript
深入了解JavaScript代码覆盖
2019/06/13 Javascript
js实现录音上传功能
2019/11/22 Javascript
浅谈vue项目,访问路径#号的问题
2020/08/14 Javascript
VUE实现吸底按钮
2021/03/04 Vue.js
[01:30:15]DOTA2-DPC中国联赛 正赛 Ehome vs Aster BO3 第二场 2月2日
2021/03/11 DOTA
基于Python实现的扫雷游戏实例代码
2014/08/01 Python
Python利用pyHook实现监听用户鼠标与键盘事件
2014/08/21 Python
Python列表推导式、字典推导式与集合推导式用法实例分析
2018/02/07 Python
python3 判断列表是一个空列表的方法
2018/05/04 Python
对python实时得到鼠标位置的示例讲解
2018/10/14 Python
Python pytesseract验证码识别库用法解析
2020/06/29 Python
python实现批处理文件
2020/07/28 Python
土耳其时尚潮流在线购物网站:Trendyol
2017/10/10 全球购物
Baracuta官方网站:Harrington夹克,G9,G4,G10等
2018/03/06 全球购物
英国最受信任的在线眼镜商之一:Fashion Eyewear
2019/10/31 全球购物
英国性能汽车零件和发动机配件在线:Maxpeedingrods
2019/11/05 全球购物
商场促销活动方案
2014/02/08 职场文书
《最佳路径》教学反思
2014/04/13 职场文书
查摆问题自我剖析材料
2014/08/18 职场文书
会计师事务所实习证明
2014/11/16 职场文书
2014年售票员工作总结
2014/11/19 职场文书
redis实现共同好友的思路详解
2021/05/26 Redis