在html中使用
<body>
<div id="container">
<div id="qrcode"></div>
<button id="btn" onclick="handleDownload()">保存二维码</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/qrcanvas@3"></script>
<script>
// 生成canvas实例
const canvas = qrcanvas.qrcanvas({
data: 'hello, world'
});
// 将canvas实例添加到页面中
document.getElementById('qrcode').appendChild(canvas);
// canvas转为dataURL(dase64)
const dateUrl = canvas.toDataURL()
console.log(dateUrl);
// 保存图片
function saveFile(strData, fileType, fileName = "name") {
let saveLink = document.createElement("a");//创建a链接
saveLink.download = fileName + "." + fileType;//设置下载的文件名和类型
saveLink.href = strData;//设置下载链接
saveLink.click();//点击下载
}
function handleDownload(){
console.log('handleDownload');
saveFile(dateUrl,'png','二维码test')
}
</script>
</body>
在vue中使用
安装qrcanvas依赖
$ yarn add qrcanvas
# or
$ npm install qrcanvas -S
使用qrcanvas生成二维码，并保存为图片
<template>
<img :src="dateUrl" alt="">
<button @click="handleDownload">保存二维码</button>
</template>
<script>
import { qrcanvas } from 'qrcanvas';
// 生成canvas实例
const canvas = qrcanvas({
data: 'hello, world'
});
// canvas转为dataURL(dase64)
const dateUrl = canvas.toDataURL()
// 保存图片
function saveFile(strData, fileType, fileName = "name") {
let saveLink = document.createElement("a");//创建a链接
saveLink.download = fileName + "." + fileType;//设置下载的文件名和类型
saveLink.href = strData;//设置下载链接
saveLink.click();//点击下载
}
function handleDownload(){
console.log('handleDownload');
saveFile(dateUrl,'png','二维码test')
}
</script>
