使用wxqrcode.js生成二维码，保存到相册中不显示图片
下面是我的代码
wxqrcode.js我只下载了js
文件错误
我是在不知道怎么办了，希望大家告诉我解决方法，最好写详细一点
<template>
<view>
生成二维码中心
<canvas style="width: 200px;height: 200px;" canvas-id="mycanvas" />
<button type="primary" @click="savePoster">保存</button>
</view>
</template>
<script>
import QR from '@/utils/wxqrcode.js'
export default {
data() {
return {
contentList: [],
tempFilePath: '',
}
},
onLoad(options) {
// #ifndef APP-NVUE
const eventChannel = this.getOpenerEventChannel();
// #endif
eventChannel.on('acceptData', function(data) {
console.log(data);
this.contentList = data
})
this.createQrCode(
this.contentList,
'mycanvas', 200, 200)
},
methods: {
createQrCode(content, canvasId, cavW, cavH) {
//调用插件中的draw方法，绘制二维码图片
//this.canvasToTempImage 为绘制完成的回调函数，可根据自己的业务添加
QR.api.draw(content, canvasId, cavW, cavH, this, this.canvasToTempImage(canvasId));
},
//获取临时缓存图片路径，存入data中
canvasToTempImage(canvasId) {
console.log(canvasId)
setTimeout(() => {
wx.canvasToTempFilePath({
canvasId, // 这里canvasId即之前创建的canvas-id
success: res => {
this.tempFilePath = res.tempFilePath;
console.log(this.tempFilePath);
},
fail: res => {
console.log(res);
// console.log(canvasId,)
}
}, this);
}, 500)
},
// 保存二维码
savePoster() {
uni.getSetting({ //获取用户的当前设置
success: (res) => {
if (res.authSetting['scope.writePhotosAlbum']) { //验证用户是否授权可以访问相册
this.saveImageToPhotosAlbum();
} else {
uni.authorize({ //如果没有授权，向用户发起请求
scope: 'scope.writePhotosAlbum',
success: () => {
this.saveImageToPhotosAlbum();
},
fail: () => {
uni.showToast({
title: "请打开保存相册权限，再点击保存相册分享",
icon: "none",
duration: 3000
});
setTimeout(() => {
uni.openSetting({ //调起客户端小程序设置界面,让用户开启访问相册
success: (res2) => {
// console.log(res2.authSetting)
}
});
}, 3000);
}
})
}
}
})
},
saveImageToPhotosAlbum() {
let base64 = this.tempFilePath.replace(/^data:image\/\w+;base64,/, ""); //去掉data:image/png;base64,
let filePath = wx.env.USER_DATA_PATH + '/二维码.png';
uni.showLoading({
title: '加载中',
mask: true
})
uni.getFileSystemManager().writeFile({
filePath: filePath, //创建一个临时文件名
data: base64, //写入的文本或二进制数据
encoding: 'base64', //写入当前文件的字符编码
success: res => {
uni.saveImageToPhotosAlbum({
filePath: filePath,
success: res2 => {
uni.hideLoading();
uni.showToast({
title: '保存成功，请从相册选择再分享',
icon: "none",
duration: 5000
})
},
fail: err => {
uni.hideLoading();
console.log(err.errMsg);
}
})
},
fail: err => {
uni.hideLoading();
console.log(err)
}
})
},
}
}
</script>
<style>
</style>
wxqrcode.js来源于https://github.com/demi520/wxapp-qrcode/blob/master/utils/qrcode.js
改下面2点测试可以生成，由于没有题主的环境getOpenerEventChannel不知道传了什么数据，onLoad直接调用createQrCode传递一个测试的网址
第一处改动
onLoad(options) {
/*
// #ifndef APP-NVUE
const eventChannel = this.getOpenerEventChannel();
// #endif
var me=this;///存储实例
eventChannel.on('acceptData', function(data) {
console.log(data);
this.contentList = data;
me.createQrCode( this.contentList,'mycanvas', 200, 200);///使用me调用
});*/
this.createQrCode('https://www.w3dev.cn/','mycanvas', 200, 200);
},
第二个改动的地方saveImageToPhotosAlbum
saveImageToPhotosAlbum() {
let tempFilePath = this.tempFilePath;//临时路径
let filePath = wx.env.USER_DATA_PATH + '/二维码.png';
uni.saveImageToPhotosAlbum({
filePath: tempFilePath,
success: res2 => {
uni.hideLoading();
uni.showToast({
title: '保存成功，请从相册选择再分享',
icon: "none",
duration: 5000
})
},
fail: err => {
uni.hideLoading();
console.log(err.errMsg);
}
})
}
参考：
downloadQrCode() {
const myselfCanvas = document.getElementById('qrCode').getElementsByTagName('canvas')
const img = document.getElementById('qrCode').getElementsByTagName('img')
const ah = document.createElement('a')
const imgURL = myselfCanvas[0].toDataURL('image/jpg')
const u = navigator.userAgent
if (u.indexOf('Trident') !== -1 && u.indexOf('Windows') !== -1) {
const bstr = atob(imgURL.split(',')[1])
let n = bstr.length
const u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
const blob = new Blob([u8arr])
window.navigator.msSaveOrOpenBlob(blob, '二维码' + '.' + 'png')
} else if (u.indexOf('Firefox') > -1) {
const blob = this.base64ToBlob(imgURL)
const evt = document.createEvent('HTMLEvents')
evt.initEvent('click', true, true)
ah.download = ' '
ah.href = URL.createObjectURL(blob)
ah.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true, view: window }))
} else {
img.src = myselfCanvas[0].toDataURL('image/jpg')
ah.href = img.src
ah.download = '二维码图片'
ah.click()
}
},
PS：问答VIP年卡 【限时加赠：IT技术图书免费领】，了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632