作用描述

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

学习途径

主要API

如何使用

安装：

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

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

import html2canvas from 'html2canvas';

html代码块：

<!-- 把需要生成图片的元素放在一个元素容器里,设置ref -->
<div ref="imageTofile">
　　<!-- 这里放需要截图的元素,自定义组件元素也可以 -->
</div>
<!-- 如果需要展示截取的图片,给一个img标签 -->
<img :src="htmlUrl" />

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();
　　　　})
　　},
}