2***@qq.com
2***@qq.com
  • 发布:2024-08-15 18:23
  • 更新:2024-08-15 18:29
  • 阅读:835

vue3兼容APP和微信小程序的base64图片保存到相册的方法

分类:HBuilderX

<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'  
                });  
            }  
        });  
    }
0 关注 分享

要回复文章请先登录注册

2***@qq.com

2***@qq.com (作者)

import {getCurrentInstance} from "vue";const app = getCurrentInstance();
2024-08-15 18:29