html2canvas 在线引入,html转canvas工具-html2canvas.js

作用描述

项目中遇到动态生成海报的需求，在Web前端中，生成图片非Canvas莫属。实际工作中，为了提高效率，推荐一个轻松地将HTML代码转换成Canvas的工具：html2canvas。

学习途径

主要API

绘制图像： drawImage()

获取图像数据： getImageData()

重写图像数据： putImageData()

导出图像： toDataURL()

如何使用

安装：

npm install --save html2canvas@1.0.0-rc.4

在需要生成图片的页面中引入：

import html2canvas from 'html2canvas';

html代码块：

js代码块：

// 引入html2canvas

import html2canvas from 'html2canvas'

// 注册组件

data() {

return {

htmlUrl: ''

}

},

components: {

html2canvas

},

methods: {

// 页面元素转图片

toImage() {

let option = {

scale: 3,

useCORS: true,

backgroundColor: null

};

// 第一个参数是需要生成截图的元素,第二个是自己需要配置的参数

html2canvas(this.$refs.imageTofile,option).then((canvas) => {

let url = canvas.toDataURL('image/png');

this.htmlUrl = url;

// 把生成的base64位图片上传到服务器,生成在线图片地址

//this.sendUrl();

})

},

}

出现的问题及解决方案

① 图片模糊问题

有时候发现，导出的图片局部有些图片看起来没有原图那么清晰，这其实是因为使用了背景图片的原因。解决方法也很简单，就是直接使用 标签就好了。

② 图片不显示问题

发现有些图片并没有出现在导出的图片中，这基本上就是因为图片素材出现跨域，也就是说图片所在的域名与你项目所在域名不一致。这个问题的解决方案就是 html2canvas 使用时多加以下两个配置项就好了。

allowTaint: true,

useCORS: true,

③ PNG图片不透明问题

用到透明的PNG图片作为背景图，可是结果最后生成的图片却并不透明，这是因为 html2canvas 生成的canvas背景颜色默认为白色的缘故，所以导出的图片背景颜色当然也是白色。解决方案也是添加一个配置项。

backgroundColor: null

④终端兼容性问题

测试发现，安卓可以正常生成图片，而在苹果手机有的系统上实现不了生成图片的功能，经过查阅，对html2canvas进行了降版本处理，安装html2canvas@1.0.0-rc.4版本，测试正常。

npm install html2canvas@1.0.0-rc.4