HTML转化canvas 图片并保存到本地

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元素。img标签为我们转换成功以后要展示的图片，将生成的图片地址放进去即可

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对象。

首先，假使生成的二维码图片挂载在id为target的div标签下

<div data-v-4eb8d02a="" id="target" class="qrcode">
       <canvas width="85" height="85"></canvas>
</div>

生成canvas图片的方法：

$('#target').qrcode({
       text: "message",
       width: 85,
       height: 85
});

调用saveImg方法，将生成的二维码图片保存到本地：

saveImg() {
        var canvasData = $('#target').children('canvas');
        var a = document.createElement("a");
        a.href = canvasData[0].toDataURL();;
        a.download = "drcQrcode";
        a.click();
 },

当方法调用时，即可将生成的二维码图片下载到本地（注意：a链接的downlo属性的兼容性）