小程序生成二维码并保存相册
2022-02-28 本文已影响0人
全栈的猫南北
弹窗里包含生成的画布二维码,可保存到本地
<van-popup show="{{ showDialog }}" round close-on-click-overlay="{{false}}" bind:close="onClose" closeable>
<view class="fileDialog">
<view class="continer">
<!-- <image class="image-w" src="{{qrCodeUrl}}"></image> -->
<canvas class='image-w' canvas-id='qrcode' bindlongtap='save'></canvas>
</view>
<p class="pb20 pt20 btn">
<text bindtap="saveCode" class="cobg">保存图片到相册</text>
</p>
</view>
</van-popup>
.js文件
声明基本信息
var QRCode = require('../../../utils/weapp-qrcode.js')
var qrcode;
const W = wx.getSystemInfoSync().windowWidth;
const rate = 750.0 / W;
const code_w = 400 / rate;
使用
//查看二维码
jumpCodeDeatil(e)
{
e = e.currentTarget.dataset
let texturl = `https://sa.tszg360.com/fac?id=${e.item.id}`,
qrcode = new QRCode('qrcode', {
text: texturl,
width: code_w,
height: code_w,
colorDark: "#1CA4FC",
colorLight: "white",
correctLevel: QRCode.CorrectLevel.H,
callback: (res) => {
// 生成二维码的临时文件
this.setData({
qrCodeUrl:res.path
})
}
});
保存
//把当前画布指定区域的内容导出生成指定大小的图片。在 `draw()` 回调里调用该方法才能保证图片导出成功
wx.canvasToTempFilePath({
canvasId: 'qrcode',
success: function (res) {
debugger
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success(ress) {
wx.showToast({
icon: "none",
title: '保存成功',
})
this.setData({
showDialog: false
})
}
})
}
})
//下载网络图片保存二维码到手机相册
saveCode() {
debugger
wx.downloadFile({
url: this.data.qrCodeUrl,
success: (res) => {
// 只要服务器有响应数据,就会把响应内容写入文件并进入 success 回调,业务需要自行判断是否下载到了想要的内容
debugger
if (res.statusCode === 200) {
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: (res) => {
}
})
}
}
})
},