最近练习vue有点入迷,连续一个月上班摸鱼学vue,前端+后台+node/express生成api接口搞出了一个网站,真是学到不少东西,今天就记录一下点击按钮,指定div生成图片的功能实现方法。
[div转canvas]vue+html2canvas 实现点击 指定div生成图片并下载-Qui-Note
效果体验:http://color.51qux.com/cai
[div转canvas]vue+html2canvas 实现点击 指定div生成图片并下载-Qui-Note
原理是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很多都是事件封装的