TS_凤凤
TS_凤凤
  • 发布:2024-01-11 16:48
  • 更新:2024-01-11 16:48
  • 阅读:128

【报Bug】vue3创建 canvas 画布,保存到相册报错

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Mac

PC开发环境操作系统版本号: monosa 14.2.1

HBuilderX类型: 正式

HBuilderX版本号: 3.99

手机系统: 全部

手机厂商: 模拟器

页面类型: vue

vue版本: vue3

打包方式: 云端

项目创建方式: HBuilderX

测试过的手机:

mate60

示例代码:
<template>  
    <view>  
        <canvas style="width: 300px; height: 400px;"  
            canvas-id="firstCanvas" id="firstCanvas"></canvas>  

        <button @click="saveImage11">保存</button>  
    </view>  

</template>  

<script>  
    export default {  
        data() {  
            return {  
                selectId: 'firstCanvas',  
                scrollLeft: 0,  
                canvas: null  
            }  
        },  
        props: ['content'],  
        watch: {  
            content(value) {  
                if (value) {  
                    this.createCanvas11()  
                }  
            }  
        },  
        methods: {  
            // 生成canvas  
            createCanvas11() {  
                const ctx = uni.createCanvasContext('firstCanvas', this);  
                ctx.clearRect(0, 0, 300, 400)  
                ctx.fillStyle = "#FFFFFF";  
                ctx.fillRect(0, 0, 300, 400);  

                function findBreakPoint(text, width, context) {  
                    var min = 0;  
                    var max = text.length - 1;  
                    while (min <= max) {  
                        var middle = Math.floor((min + max) / 2);  
                        var middleWidth = context.measureText(text.substr(0, middle)).width;  
                        var oneCharWiderThanMiddleWidth = context.measureText(text.substr(0, middle + 1)).width;  
                        if (middleWidth <= width && oneCharWiderThanMiddleWidth > width) {  
                            return middle;  
                        }  
                        if (middleWidth < width) {  
                            min = middle + 1;  
                        } else {  
                            max = middle - 1;  
                        }  
                    }  
                    return -1;  
                }  

                function breakLinesForCanvas(text, width, font) {  
                    var result = [];  
                    var breakPoint = 0;  
                    if (font) {  
                        ctx.font = font;  
                    }  
                    while ((breakPoint = findBreakPoint(text, width, ctx)) !== -1) {  
                        result.push(text.substr(0, breakPoint));  
                        text = text.substr(breakPoint);  
                    }  
                    if (text) {  
                        result.push(text);  
                    }  
                    return result;  
                }  
                ctx.strokeRect(5, 5, 292, 392)  
                ctx.setFillStyle('black')  
                const content = breakLinesForCanvas(this.content, 260, '28px 微软雅黑');  
                content.forEach(function(line, index) {  
                    ctx.fillText(line, 20, 30 * index + 50);  
                });  
                ctx.drawImage("/static/er.jpg", 20, 260, 100, 100);  
                let wordsList = [  
                    '长按识别二维码',  
                    '一天一句毒鸡汤',  
                    '每天一碗,人生耀眼'  
                ]  
                ctx.setFontSize(14)  
                ctx.fillText(wordsList[0], 25, 380);  
                ctx.setFontSize(18)  
                ctx.fillText(wordsList[1], 140, 310);  
                ctx.setFontSize(16)  
                ctx.fillText(wordsList[2], 130, 340);  
                this.canvas = ctx  
                ctx.draw()  
            },  

            // 保存到相册  
            saveImage11() {  
                let that = this;  
                wx.canvasToTempFilePath({  
                    x: 0,  
                    y: 0,  
                    width: 300,  
                    height: 400,  
                    destWidth: 900,  
                    destHeight: 1200,  
                    // fileType: 'jpg',  
                    // quality: 1,  
                    canvasId: 'firstCanvas',  
                    canvas: this.canvas,  
                    success: function(res) {  
                        wx.saveImageToPhotosAlbum({  
                            filePath: res.tempFilePath,  
                            success() {  
                                that.canvasFlag = false  
                                that.$refs.shareBox.close();  
                                uni.showToast({  
                                    title: '保存成功!',  
                                    duration: 2000  
                                });  
                            }  
                        })  
                    },  
                    fail: function ( res ) {  
                        console.log(res)  
                    }  
                })  
            }  

        }  
    }  
</script>

操作步骤:

这段代码用的是 vue2 语法,运行环境为 vue3,canvas 能正常加载,但是保存 canvas 到临时目录报错

预期结果:

正常保存

实际结果:

报错

bug描述:

2024-01-11 16:48 负责人:无 分享
已邀请:

要回复问题请先登录注册