vue项目中将canvas生成的图片，保存为png格式并下载

在博主的稍前一篇文章中，写到vue中关于将信息生成二维码的方法，生成的二维码图片是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方法时，将生成的二维码图片保存到本地，具体如下：

// 将canvas生成的二维码保存为图片
saveImg() {
        var canvasData = $('#target').children('canvas');
        var a = document.createElement("a");
        a.href = canvasData[0].toDataURL();;
        a.download = "drcQrcode";
        a.click();
 },

当方法调用时，即可将生成的二维码图片下载到本地。