[div转canvas]vue+html2canvas 实现点击 指定div生成图片并下载

最近练习vue有点入迷，连续一个月上班摸鱼学vue，前端+后台+node/express生成api接口搞出了一个网站，真是学到不少东西，今天就记录一下点击按钮，指定div生成图片的功能实现方法。

效果体验：http://color.51qux.com/cai

原理是html5中的div转canvas，具体怎么转的我也不懂，插件生成的，现在流行的就是用 html2canvas.js （http://html2canvas.hertzen.com/）实现的。

废话不多说，还是开始日记步骤：

1.进入项目根目录，安装html2canva

npm install --save html2canvas

2.实例页面 引入插件

import html2canvas from "html2canvas";

3.按钮事件绑定

<el-button  @click="downIMG">下载配色</el-button>

4.转图片区域通过ref="imageWrapper"控制

<div class="card-yan"  v-if="imageUrl" ref="imageWrapper">
.......

5.js点击事件

downIMG() {
     html2canvas(this.$refs.imageWrapper).then(canvas => {     //imageWrapper转换图片的dom
            let dataURL = canvas.toDataURL("image/png"); 
            this.imgUrl = dataURL;

            //回调创建a链接下载图片
            var link = document.createElement('a');
            link.href = this.imgUrl;
            link.download = 'colorCard';
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
             
          }); 
}

这样就完成了点击生成图片并主动下载图片的事件效果了，前端知识真是深，vue很多都是事件封装的