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 相关文章推荐
onpropertypchange
Jul 01 Javascript
JS写的数字拼图小游戏代码[学习参考]
Oct 29 Javascript
javascript 获取url参数和script标签中获取url参数函数代码
Jan 22 Javascript
Ext JS添加子组件的误区探讨
Jun 28 Javascript
解决jquery版本冲突的有效方法
Sep 02 Javascript
jQuery分组选择器用法实例
Dec 23 Javascript
jQuery插件实现静态HTML验证码校验
Nov 06 Javascript
jQuery ajax中使用confirm,确认是否删除的简单实例
Jun 17 Javascript
使用JavaScript为一张图片设置备选路径的方法
Jan 04 Javascript
AngularJs表单校验功能实例代码
Feb 09 Javascript
react-native 圆弧拖动进度条实现的示例代码
Apr 12 Javascript
小程序采集录音并上传到后台
Nov 22 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
大师制作的中短波矿石收音机
2020/04/02 无线电
php array_map array_multisort 高效处理多维数组排序
2009/06/11 PHP
PHP生成指定长度随机数最简洁的方法
2014/07/14 PHP
php如何连接sql server
2015/10/16 PHP
php 截取GBK文档某个位置开始的n个字符方法
2017/03/08 PHP
用javascript做拖动布局的思路
2008/05/31 Javascript
jQuery实现的立体文字渐变效果
2010/05/17 Javascript
基于JQuery 选择器使用说明介绍
2013/04/18 Javascript
js函数setTimeout延迟执行的简单介绍
2013/07/17 Javascript
不使用浏览器运行javascript代码的方法
2013/07/24 Javascript
关于Jquery操作Cookie取值错误的解决方法
2013/08/26 Javascript
jQuery实现等比例缩放大图片让大图片自适应页面布局
2013/10/16 Javascript
jquery进行数组遍历如何跳出当前的each循环
2014/06/05 Javascript
jquery中$(#form :input)与$(#form input)的区别
2014/08/18 Javascript
深入理解JavaScript函数参数(推荐)
2016/07/26 Javascript
原生js封装自定义滚动条
2017/03/24 Javascript
为JQuery EasyUI 表单组件增加焦点切换功能的方法
2017/04/13 jQuery
利用JS判断客户端类型你应该知道的四种方法
2017/12/22 Javascript
快速对接payjq的个人微信支付接口过程解析
2019/08/15 Javascript
layui table单元格事件修改值的方法
2019/09/24 Javascript
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
2020/06/06 jQuery
vue从后台渲染文章列表以及根据id跳转文章详情详解
2020/12/14 Vue.js
跟老齐学Python之大话题小函数(1)
2014/10/10 Python
Python中获取对象信息的方法
2015/04/27 Python
Python实现感知机(PLA)算法
2017/12/20 Python
Python解析、提取url关键字的实例详解
2018/12/17 Python
Python实现Mysql数据统计及numpy统计函数
2019/07/15 Python
给Python学习者的文件读写指南(含基础与进阶)
2020/01/29 Python
python GUI库图形界面开发之PyQt5表格控件QTableView详细使用方法与实例
2020/03/01 Python
解决python多线程报错:AttributeError: Can't pickle local object问题
2020/04/08 Python
澳大利亚宠物食品和用品商店:PETstock
2020/01/02 全球购物
澳洲最大的时尚奢侈品电商平台:Cettire
2020/06/15 全球购物
好人好事事迹材料
2014/02/12 职场文书
文明寄语大全
2014/04/11 职场文书
国家助学金受助感言
2015/08/01 职场文书
Nginx防盗链与服务优化配置的全过程
2022/01/18 Servers