<view style="padding:40rpx;">
<canvas id="myCanvas" canvas-id="myCanvas" type="2d" style="width: 670rpx; height: 670rpx;" @longpress="saveCode"></canvas>
</view>
API请求获取得到buffer
codeSrc.value = "data:image/png;base64," + res.data.buffer; // <image :src="codeSrc"></image>仅展示,要保存到相册,无法直接调用saveImageToPhotosAlbum,也无法间接通过getImageInfo、downloadFile、saveFile获得的临时文件地址再保存,故采用canvasToTempFilePath API解决;如您后端返回是图链该方法不适用。
const bufferRaw = res.data.buffer
由于个人原因小程序端fields获取的context接连抽风绘制不出图形
uni.createSelectorQuery().in(app.proxy).select('#myCanvas').context((res) => {let ctx=res})
uni.createSelectorQuery().in(app.proxy).select('#myCanvas').fields({node: true,context: true})((res) => {let canvas=res[0].node;let ctx=canvas.getContext('2d'); //或 let ctx=res[0].context})
所以小程序只能从canvas入手,最终
// 确保canvas已经挂载后执行下面的代码片段
const tempFilePath = ref("")
// #ifdef APP
const ctx = uni.createCanvasContext("myCanvas", app.proxy)
ctx.rect(0, 0, uni.upx2px(670), uni.upx2px(670))
ctx.setFillStyle('white')
ctx.fill()
ctx.drawImage(codeSrc.value, 0, 0, uni.upx2px(
670), uni.upx2px(670));
// !!!一定要在回调中获得这个canvas的临时地址
ctx.draw(false, async () => {
uni.canvasToTempFilePath({
canvasId: "myCanvas",
success: function(res) {
console.log(res
.tempFilePath)
tempFilePath.value = res
.tempFilePath
// 能预览就是画成功
// uni.previewImage({
// urls: [res
// .tempFilePath
// ],
// })
}
})
})
// #endif
// #ifdef MP
// 小程序废弃了createCanvasContext
const query = uni.createSelectorQuery().in(app.proxy)
query.select('#myCanvas')
.fields({
node: true,
size: true
})
.exec(async (res) => {
// console.log(res)
let canvas = res[0].node
let ctx = canvas.getContext('2d')
// console.log(ctx, canvas)
const dpr = wx.getSystemInfoSync().pixelRatio
canvas.width = res[0].width * dpr
canvas.height = res[0].height * dpr
ctx.scale(dpr, dpr)
const fsm = wx.getFileSystemManager() // 文件管理器
const fname = app.proxy.$utils.$helper.generateRandomString(16)
const FILE_BASE_NAME = `tmp_base64src_${fname}` // 文件名
const format = 'png' // 文件后缀
const buffer = wx.base64ToArrayBuffer(bufferRaw) // base 转二进制
const filePath = `${wx.env.USER_DATA_PATH}/${FILE_BASE_NAME}.${format}` // 文件名
fsm.writeFile({ // 写文件
filePath,
data: buffer,
encoding: 'binary',
success: (res) => {
// 能预览就是画成功
// wx.previewImage({
// urls: [filePath],
// })
var img = canvas.createImage();
img.src = filePath
img.onload = function() {
ctx.drawImage(img, 0, 0,
uni
.upx2px(
670), uni.upx2px(670));
// ctx.draw()
uni.canvasToTempFilePath({
canvasId: 'myCanvas',
canvas: canvas,
success: function(res) {
console.log(res
.tempFilePath)
tempFilePath.value = res
.tempFilePath
},
fail: function(error) {
console.error(error)
}
}, app.proxy);
}
},
fail: (err) => {
console.error(err)
}
})
})
// #endif
// 保存到相册
const saveCode = () => {
uni.saveImageToPhotosAlbum({
filePath: tempFilePath.value,
success: function() {
uni.showToast({
title: '保存成功',
icon: 'success'
});
},
fail: function(error) {
uni.showToast({
title: '未保存成功',
icon: 'none'
});
}
});
}
1 个评论
要回复文章请先登录或注册
2***@qq.com (作者)