l***@163.com
l***@163.com
  • 发布:2024-03-18 16:55
  • 更新:2024-03-18 18:47
  • 阅读:58

uni.saveImageToPhotosAlbum 保存图片空白

分类:uni-app

uni.canvasToTempFilePath 导出临时路径后 uni.saveImageToPhotosAlbum 保存到相册 ;安卓手机显示空白

2024-03-18 16:55 负责人:无 分享
已邀请:
喜欢技术的前端

喜欢技术的前端 - QQ---445849201

可以的,你试试android

<template>  
    <view class="c-display-flex-V-center my-page-container">  
        <canvas style="width: 300px; height: 200px;" canvas-id="myCanvas" id="myCanvas"></canvas>  
        <button  @click="downloadImg">保存</button>  
    </view>  
</template>  
<script>  
    const ctxW = 280;  
    const ctxH = 275;  
    export default {  
        onReady() {  
            var context = uni.createCanvasContext('myCanvas')  
            context.setStrokeStyle("#00ff00")  
            context.setLineWidth(5)  
            context.rect(0, 0, 200, 200)  
            context.stroke()  
            context.draw()  
        },  
        methods: {  
            downloadImg() {  
                uni.showLoading({  
                    title: '正在下载...',  
                });  
                console.log(ctxW, ctxH)  
                uni.canvasToTempFilePath({  
                    canvasId: 'myCanvas',  
                    x: 0,  
                    y: 0,  
                    width: ctxW,  
                    height: ctxH,  
                    destWidth: ctxW,  
                    destHeight: ctxH,  
                    quality: 1.0,  
                    success: function(res) {  
                        console.log('canvasToTempFilePath_success');  
                        uni.saveImageToPhotosAlbum({  
                            filePath: res.tempFilePath,  
                            success: function(saveRes) {  
                                uni.showToast({  
                                    title: '保存成功',  
                                });  
                            },  
                            fail: function(saveErr) {  
                                if (saveErr.errMsg === 'saveImageToPhotosAlbum:fail:auth denied' ||  
                                    saveErr.errMsg === 'saveImageToPhotosAlbum:fail auth deny' ||  
                                    saveErr.errMsg ===  
                                    'saveImageToPhotosAlbum:fail authorize no response'  
                                ) {  
                                    uni.showModal({  
                                        title: '需要您授权保存相册',  
                                        modalType: false,  
                                        success: modalRes => {  
                                            uni.openSetting({  
                                                success(settingRes) {  
                                                    console.log('settingRes',JSON.stringify(settingRes));  
                                                    if (settingRes.authSetting[  
                                                            'scope.writePhotosAlbum'  
                                                        ]) {  
                                                        uni.showModal({  
                                                            title: '温馨提醒',  
                                                            content: '获取权限成功,再次点击保存即可~',  
                                                            modalType: false,  
                                                        })  
                                                    } else {  
                                                        uni.showModal({  
                                                            title: '温馨提醒',  
                                                            content: '获取权限失败,将无法保存到相册哦~',  
                                                            modalType: false,  
                                                        })  
                                                    }  
                                                },  
                                                fail(settingError) {  
                                                    console.log('settingError',  
                                                        JSON.stringify(  
                                                            settingError));  
                                                },  
                                            });  
                                        },  
                                    });  
                                }  
                            },  
                        });  
                    },  
                    fail: function(err) {  
                        console.log(JSON.stringify(err));  
                        uni.showToast({  
                            title: '生成图片失败',  
                        });  
                    },  
                }, this);  
            },  
        },  
    }  
</script>  

<style scoped>  
    .my-page-container {  
        background-color: white;  
        height: 500px;  
    }  
    .my-page-canvas {  
        width: 280px;  
        height: 275px;  
    }  
    .my-page-canvas-core {  
        box-sizing: border-box;  
        width: 280px;  
        height: 275px;  
        padding: 15px;  
        display: flex;  
        flex-direction: column;  
        align-items: center;  
    }  
    .core-head-image {  
        width: 250px;  
        height: 35px;  
    }  
    .core-content-image {  
        margin-top: 10px;  
        width: 200px;  
        height: 200px;  
        background-color: #f3f3f3;  
    }  
</style>
BeardYound

BeardYound

需要加延迟导入,通病了

要回复问题请先登录注册