随风
随风
  • 发布:2024-08-09 21:51
  • 更新:2024-08-09 21:56
  • 阅读:146

#插件讨论# 【 canvas万能绘图方法、新手简单入手、海报轻松绘制 - 小凡2020 】已经解决无法保存问题

分类:uni-app

给后来者打个样 解决微信小程序无法保存图片的问题

默认是 import { saveImg,qrcodeCanvas } from '@/uni_modules/fan-canvas/plugins/utils';
调用 saveImg(imgUrl) 进行图片保存的
async onSaveImg() {
let imgUrl = "";
if (this.canvasImg) {
imgUrl = await this.canvasImg;
saveImg(imgUrl)
}
}
uni.saveImageToPhotosAlbum 本地调用的就是临时地址
但是 这里保存的方法显示调用了 uni.downloadFile 下载 再调用的uni.saveImageToPhotosAlbum 这就出现重大失误了。
我直接舍弃了/utils 保存的方法

async onSaveImg() {  
                let imgUrl = "";  
                if (this.canvasImg) {  
                    imgUrl = await this.canvasImg;  
                    await this.getWriteAuth();  
                    uni.saveImageToPhotosAlbum({  
                        filePath: imgUrl,  
                        success: () => {  
                            uni.hideLoading();  
                            uni.showToast({  
                                title: '保存成功'  
                            });  
                        },  
                        fail(e) {  
                            uni.hideLoading();  
                            uni.showToast({  
                                title: '下载失败',  
                                icon: "none"  
                            });  
                        }  
                    });  

                }  
            },  
            getWriteAuth() {  
                return new Promise(resolve => {  
                    uni.getSetting({  
                        success(res) {  
                            if (!res.authSetting['scope.writePhotosAlbum']) {  
                                uni.authorize({  
                                    scope: 'scope.writePhotosAlbum',  
                                    success() {  
                                        resolve(true);  
                                    },  
                                    fail: () => {  
                                        uni.showModal({  
                                            title: '您已拒绝授权保存到相册',  
                                            content: '是否进入权限管理,调整授权?',  
                                            success: (res) => {  
                                                if (res.confirm) {  
                                                    uni.openSetting({  
                                                        success: function(  
                                                            res) {}  
                                                    });  
                                                } else if (res.cancel) {  
                                                    return this.$toast({  
                                                        title: '已取消!'  
                                                    });  
                                                }  
                                            }  
                                        });  
                                    }  
                                });  
                            } else {  
                                resolve(true);  
                            }  
                        }  
                    });  
                });  
            }

完美解决 无法保存 当然了我这里仅仅只是使用小程序

2024-08-09 21:51 负责人:无 分享
已邀请:
随风

随风 (作者)

或者把 uni_modules/fan-canvas/plugins/utils。js 改为 下面的 (没测试 理论是对的)

import qrcode from './qrcode'; //用于绘制二维码  
// 保存图片  
let settingWritePhotosAlbum = false;  
export const saveImg = function(url, callback) {  
    if (url) {  
        // #ifdef MP-WEIXIN  
        if (settingWritePhotosAlbum) {  
            uni.getSetting({  
                    success: res => {  
                        if (res.authSetting['scope.writePhotosAlbum']) {  
                            uni.showLoading({  
                                title: '正在下载'  
                            });  
                            uni.saveImageToPhotosAlbum({  
                                filePath: url,  
                                success: () => {  
                                    uni.hideLoading();  
                                    callback && callback();  
                                    uni.showToast({  
                                        title: '保存成功'  
                                    });  
                                },  
                                fail(e) {  
                                    uni.hideLoading();  
                                    uni.showToas({  
                                        title: '下载失败1,错误原因:' + e.errMsg,  
                                        icon: "none"  
                                    });  
                                }  
                            });  
                        });  
                }  
                else {  
                    uni.showModal({  
                        title: '提示',  
                        content: '请先在设置页面打开“保存相册”使用权限',  
                        confirmText: '去设置',  
                        cancelText: '算了',  
                        success: data => {  
                            if (data.confirm) {  
                                uni.openSetting();  
                            }  
                        }  
                    });  
                }  
            }  
        });  
} else {  
    settingWritePhotosAlbum = true;  
    uni.authorize({  
        scope: 'scope.writePhotosAlbum',  
        success: () => {  
            uni.showLoading({  
                title: '正在下载'  
            });  
            uni.saveImageToPhotosAlbum({  
                filePath:url,  
                success: () => {  
                    uni.hideLoading();  
                    callback && callback();  
                    uni.showToast({  
                        title: '保存成功'  
                    });  
                },  
                fail(e) {  
                    uni.hideLoading();  
                    uni.showToast({  
                        title: '下载失败',  
                        icon: "none"  
                    });  
                }  
            });  
        }  
    });  
}  
// #endif  
// #ifdef H5  
uni.showLoading({  
    title: '正在下载'  
});  
uni.downloadFile({  
    url: url,  
    success: data => {  
        uni.hideLoading();  
        if (data.statusCode == 200) {  
            callback && callback();  
            window.open(data.tempFilePath);  
        } else {  
            uni.showToast({  
                title: '下载失败',  
                icon: "none"  
            });  
        }  
    },  
    fail(e) {  
        uni.hideLoading();  
        uni.showToast({  
            title: '下载失败',  
            icon: "none"  
        });  
    }  
});  
// #endif  
// #ifdef APP-PLUS || MP-ALIPAY  
uni.showLoading({  
    title: '正在下载'  
});  
uni.saveImageToPhotosAlbum({  
    filePath: url,  
    success: () => {  
        uni.hideLoading();  
        callback && callback();  
        uni.showToast({  
            title: '保存成功'  
        });  
    },  
    fail(e) {  
        uni.hideLoading();  
        uni.showToast({  
            title: '下载失败',  
            icon: "none"  
        });  
    }  
});  
// #endif  
}  
else {  
    uni.showToast({  
        title: '未找到图片',  
        icon: 'none'  
    });  
}  
};  
// 绘制二维码  
export const qrcodeCanvas = function(id, code, width, height, that) {  
    qrcode.api.draw(code, {  
        ctx: uni.createCanvasContext(id, that),  
        width: convert_length(width),  
        height: convert_length(height)  
    })  
}  

function convert_length(length) {  
    return Math.round(uni.getSystemInfoSync().windowWidth * length / 750);  
}
  • 随风 (作者)

    早上起来测试了一下 代码有问题 自己改一下吧

    2024-08-10 08:34

要回复问题请先登录注册