vue项目中将canvas生成的图片,保存为png格式并下载
在博主的稍前一篇文章中,写到vue中关于将信息生成二维码的方法,生成的二维码图片是canvas所绘制,在手机端我们往往需要将手机二维码图片可以保存到本地,该如何操作呢。首先,假使生成的二维码图片挂载在id为target的div标签下<div data-v-4eb8d02a="" id="target" class="qrcode&qu
·
在博主的稍前一篇文章中,写到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();
},
当方法调用时,即可将生成的二维码图片下载到本地。
更多推荐
所有评论(0)