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 相关文章推荐
window.showModalDialog使用手册
Jan 11 Javascript
javascript 动态修改样式和层叠样式表代码
Apr 27 Javascript
Chrome Form多次提交表单问题的解决方法
May 09 Javascript
防止文件缓存的js代码
Jan 10 Javascript
jquery 实现密码框的显示与隐藏示例代码
Sep 18 Javascript
详解用vue.js和laravel实现微信授权登陆
Jun 23 Javascript
微信小程序 功能函数小结(手机号验证*、密码验证*、获取验证码*)
Dec 08 Javascript
vue cli 3.0 使用全过程解析
Jun 14 Javascript
Element-ui DatePicker显示周数的方法示例
Jul 19 Javascript
electron+vue实现div contenteditable截图功能
Jan 07 Javascript
通过angular CDK实现页面元素拖放的步骤详解
Jul 01 Javascript
使用Canvas绘制一个游戏人物属性图
Mar 25 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
很实用的一个完整email发送程序
2006/10/09 PHP
php下过滤HTML代码的函数
2007/12/10 PHP
PHP判断IP并转跳到相应城市分站的方法
2015/03/25 PHP
Laravel框架集合用法实例浅析
2020/05/14 PHP
论坛特效代码收集(落伍转发-不错)
2006/12/02 Javascript
jquery 操作DOM案例代码分享
2012/04/05 Javascript
JS中for循序中延迟加载动态效果的具体实现
2013/08/18 Javascript
jQuery实现锚点scoll效果实例分析
2015/03/10 Javascript
学习javascript面向对象 javascript实现继承的方式
2016/01/04 Javascript
javascript实现仿百度图片的瀑布流加载效果
2016/04/20 Javascript
jq实现左滑显示删除按钮,点击删除实现删除数据功能(推荐)
2016/08/23 Javascript
jQuery元素属性操作实例(设置、获取及删除元素属性)
2016/09/08 Javascript
原生js获取浏览器窗口及元素宽高常用方法集合
2017/01/18 Javascript
微信小程序侧边栏滑动特效(左右滑动)
2017/01/23 Javascript
js实现手机发送验证码功能
2017/03/13 Javascript
webstorm和.vue中es6语法报错的解决方法
2018/05/08 Javascript
js for终止循环 跳出多层循环
2018/10/04 Javascript
vue.js购物车添加商品组件的方法
2019/09/17 Javascript
JS Web Flex弹性盒子模型代码实例
2020/03/10 Javascript
VUE+elementui组件在table-cell单元格中绘制微型echarts图
2020/04/20 Javascript
Python编程给numpy矩阵添加一列方法示例
2017/12/04 Python
python将秒数转化为时间格式的实例
2018/09/16 Python
python去掉 unicode 字符串前面的u方法
2018/10/21 Python
Django重置migrations文件的方法步骤
2019/05/01 Python
python如何解析配置文件并应用到项目中
2019/06/27 Python
python计算二维矩形IOU实例
2020/01/18 Python
TensorFlow实现打印每一层的输出
2020/01/21 Python
在 Pycharm 安装使用black的方法详解
2020/04/02 Python
python实现图片转换成素描和漫画格式
2020/08/19 Python
马来西亚时装购物网站:ZALORA马来西亚
2017/03/14 全球购物
数字天堂软件测试面试题
2012/12/23 面试题
幼儿教师个人求职信范文
2013/09/21 职场文书
医院后勤自我鉴定
2013/10/13 职场文书
质量安全标语
2014/06/07 职场文书
交通事故协议书范文
2014/10/23 职场文书
纪律委员竞选稿
2015/11/19 职场文书