微信小程序使用canvas进行绘图之后，pc端运行报错，真机调试绘图成功，但是只有黑色背景，没有内容 ，求大佬指教？

Question

代码稍长，还请大佬们担待

wxml

<view class="Jigsaw_modal" wx:if="{{visible}}">
        <view class="modal_content" style="position: relative;">
            <view class="modal_top">
                一键拼图
            </view>
            <canvas type="2d" id='MyCanvas' class="modal_middle" style="position: absolute;z-index: -1;"></canvas>

            <view class="modal_middle">
                <view class="desc_text">
                    <image src="{{teethIcon}}" mode="" />
                    <text>齿刻美 · 打造专属笑容</text>
                </view>
                <view class="desc_content">
                    <view>
                        <image src="{{beforeImage}}" mode="" />
                        <text>设计前</text>
                    </view>
                    <image class="vs_image" src="{{vsImage}}" mode="" />
                    <view>
                        <image src="{{afterImage}}" mode="" />
                        <text>设计后</text>
                    </view>
                </view>
            </view>
            <view class="modal_footer" bind:tap="initCanvas">
                保存拼图
            </view>
        </view>
        <view class="close_icon" bind:tap="handleCloseJigsawModa">
            <image src="{{closeIcon}}" mode="" />
        </view>
    </view>

wxjs

initCanvas() {
        const canvasQuery = wx.createSelectorQuery();
        canvasQuery.select('#MyCanvas')
            .fields({
                node: true,
                size: true,
                rect: true
            })
            .exec(res => this.CanvasInit(res));
    },

    CanvasInit(res) {
        console.log(res, '-----------');
        const width = res[0].width;
        this.canvasWidth = width;
        const height = res[0].height;
        this.canvasHeight = height;
        const canvas = res[0].node;
        this.canvas = canvas;
        const ctx = canvas.getContext('2d');

        // 适应各种屏幕
        const dpr = wx.getSystemSetting().pixelRatio;
        canvas.width = width * dpr;
        canvas.height = height * dpr;
        ctx.scale(dpr, dpr);

        ctx.save()
        // 绘制背景颜色
        ctx.fillStyle = '#fff';
        ctx.fillRect(0, 0, width, height);
        ctx.restore()

        // 初始化计数器为需要加载的图片数量
        let imageLoadCount = 4;

        // 绘制文字和图标部分
        ctx.save();
        ctx.beginPath();
        ctx.font = '22rpx';
        ctx.fillStyle = 'rgba(57, 77, 163, 1)';
        ctx.fillText('记录美好生活', width - 150, 40);
        ctx.translate(width - 50, 40);
        const teethImg = canvas.createImage();
        teethImg.src = this.data.teethIcon;
        teethImg.onload = () => {
            ctx.drawImage(teethImg, -15, -15, 30, 30);
            imageLoadCount--;
        };
        ctx.restore();

        // 绘制设计前部分
        ctx.save();
        ctx.beginPath();
        ctx.translate(0, 60);
        const beforeImg = canvas.createImage();
        beforeImg.src = this.data.afterImage;

        beforeImg.onload = () => {
            ctx.drawImage(beforeImg, 0, 0, width / 3, 390);
            ctx.font = '22rpx';
            ctx.fillStyle = 'rgba(57, 77, 163, 1)';
            ctx.fillText('设计前', width / 6, 390 + 20);
            imageLoadCount--;
        };
        ctx.restore();

        // 绘制对比图标
        ctx.save();
        ctx.beginPath();
        ctx.translate(width / 2, 200);
        const vsImg = canvas.createImage();
        vsImg.src = this.data.vsImage;

        vsImg.onload = () => {
            ctx.drawImage(vsImg, 0, 0, 50, 60);
            imageLoadCount--;
        };
        ctx.restore();

        // 绘制设计后部分
        ctx.save();
        ctx.beginPath();
        ctx.translate(width * 2 / 3, 60);
        const afterImg = canvas.createImage();
        afterImg.src = this.data.afterImage;

        afterImg.onload = () => {
            ctx.drawImage(afterImg, 0, 0, width / 3, 390);
            ctx.font = '22rpx';
            ctx.fillStyle = 'rgba(57, 77, 163, 1)';
            ctx.fillText('设计后', width * 5 / 6, 390 + 20);
            imageLoadCount--;
        };
        ctx.restore();

        // 检查图片加载完成状态
        const checkDrawingComplete = setInterval(() => {
            if (imageLoadCount === 0) {
                clearInterval(checkDrawingComplete);
                // 获取用户保存图片权限
                wx.getSetting({
                    success: (res) => {
                        if (['scope.writePhotosAlbum'] in res.authSetting) {
                            // 如果授权过且同意了
                            if (res.authSetting['scope.writePhotosAlbum']) {
                                this.canvasToImgSave();
                            } else {
                                wx.showModal({
                                    title: "请求授权相册存储",
                                    content: "需要获取您的相册存储权限，请确认授权",
                                    success: (resModal) => {
                                        if (resModal.confirm) {
                                            wx.openSetting({
                                                success: (resSetting) => {
                                                    this.canvasToImgSave();
                                                },
                                                fail: (err) => {
                                                    console.log(err);
                                                }
                                            });
                                        } else if (resModal.cancel) {
                                            console.log("你又取消了");
                                        }
                                    }
                                });
                            }
                        } else {
                            this.canvasToImgSave();
                        }
                    },
                    fail: (err) => {
                        console.log(err);
                    }
                });
            }
        }, 100);
    },

    canvasToImgSave() {
        wx.showLoading({
            title: '生成中...',
        });
        setTimeout(() => {
            wx.canvasToTempFilePath({
                canvas: this.canvas,
                x: 0,
                y: 0,
                width: this.canvasWidth * 2,
                height: this.canvasHeight * 2,
                destWidth: this.canvasWidth * 2,
                destHeight: this.canvasHeight * 2,
                success: (res) => {
                    wx.saveImageToPhotosAlbum({
                        filePath: res.tempFilePath,
                        success: (resSave) => {
                            wx.showModal({
                                title: "保存成功！",
                                content: "图片已保存到本地相册",
                                showCancel: false,
                                success: (resModal) => {

                                }
                            });
                        },
                        fail: (err) => {
                            console.log(err);
                        }
                    });
                },
                fail: (err) => {
                    console.log(err);
                },
                complete: () => {
                    wx.hideLoading()
                }
            });
        }, 1000)


    },

Answer 1

修正代码

以下是修正后的代码，确保 beforeImg 使用正确的图片来源，确保设备像素比使用正确的 API，并修正检查权限的 if 条件：

WXML

<view class="Jigsaw_modal" wx:if="{{visible}}">
    <view class="modal_content" style="position: relative;">
        <view class="modal_top">一键拼图</view>
        <canvas type="2d" id="MyCanvas" class="modal_middle" style="position: absolute; z-index: -1;"></canvas>
        <view class="modal_middle">
            <view class="desc_text">
                <image src="{{teethIcon}}" mode="" />
                <text>齿刻美 · 打造专属笑容</text>
            </view>
            <view class="desc_content">
                <view>
                    <image src="{{beforeImage}}" mode="" />
                    <text>设计前</text>
                </view>
                <image class="vs_image" src="{{vsImage}}" mode="" />
                <view>
                    <image src="{{afterImage}}" mode="" />
                    <text>设计后</text>
                </view>
            </view>
        </view>
        <view class="modal_footer" bindtap="initCanvas">保存拼图</view>
    </view>
    <view class="close_icon" bindtap="handleCloseJigsawModa">
        <image src="{{closeIcon}}" mode="" />
    </view>
</view>

JavaScript

initCanvas() {
    const canvasQuery = wx.createSelectorQuery();
    canvasQuery.select('#MyCanvas')
        .fields({
            node: true,
            size: true,
            rect: true
        })
        .exec(res => this.CanvasInit(res));
},

CanvasInit(res) {
    console.log(res, '-----------');
    const width = res[0].width;
    this.canvasWidth = width;
    const height = res[0].height;
    this.canvasHeight = height;
    const canvas = res[0].node;
    this.canvas = canvas;
    const ctx = canvas.getContext('2d');

    // 适应各种屏幕
    const dpr = wx.getSystemInfoSync().pixelRatio;
    canvas.width = width * dpr;
    canvas.height = height * dpr;
    ctx.scale(dpr, dpr);

    ctx.save();
    // 绘制背景颜色
    ctx.fillStyle = '#fff';
    ctx.fillRect(0, 0, width, height);
    ctx.restore();

    // 初始化计数器为需要加载的图片数量
    let imageLoadCount = 4;

    // 绘制文字和图标部分
    ctx.save();
    ctx.beginPath();
    ctx.font = '22rpx';
    ctx.fillStyle = 'rgba(57, 77, 163, 1)';
    ctx.fillText('记录美好生活', width - 150, 40);
    ctx.translate(width - 50, 40);
    const teethImg = canvas.createImage();
    teethImg.src = this.data.teethIcon;
    teethImg.onload = () => {
        ctx.drawImage(teethImg, -15, -15, 30, 30);
        imageLoadCount--;
    };
    ctx.restore();

    // 绘制设计前部分
    ctx.save();
    ctx.beginPath();
    ctx.translate(0, 60);
    const beforeImg = canvas.createImage();
    beforeImg.src = this.data.beforeImage; // 修正 beforeImg 的图片来源
    beforeImg.onload = () => {
        ctx.drawImage(beforeImg, 0, 0, width / 3, 390);
        ctx.font = '22rpx';
        ctx.fillStyle = 'rgba(57, 77, 163, 1)';
        ctx.fillText('设计前', width / 6, 390 + 20);
        imageLoadCount--;
    };
    ctx.restore();

    // 绘制对比图标
    ctx.save();
    ctx.beginPath();
    ctx.translate(width / 2, 200);
    const vsImg = canvas.createImage();
    vsImg.src = this.data.vsImage;
    vsImg.onload = () => {
        ctx.drawImage(vsImg, 0, 0, 50, 60);
        imageLoadCount--;
    };
    ctx.restore();

    // 绘制设计后部分
    ctx.save();
    ctx.beginPath();
    ctx.translate(width * 2 / 3, 60);
    const afterImg = canvas.createImage();
    afterImg.src = this.data.afterImage;
    afterImg.onload = () => {
        ctx.drawImage(afterImg, 0, 0, width / 3, 390);
        ctx.font = '22rpx';
        ctx.fillStyle = 'rgba(57, 77, 163, 1)';
        ctx.fillText('设计后', width * 5 / 6, 390 + 20);
        imageLoadCount--;
    };
    ctx.restore();

    // 检查图片加载完成状态
    const checkDrawingComplete = setInterval(() => {
        if (imageLoadCount === 0) {
            clearInterval(checkDrawingComplete);
            // 获取用户保存图片权限
            wx.getSetting({
                success: (res) => {
                    if ('scope.writePhotosAlbum' in res.authSetting) { // 修正 if 条件
                        // 如果授权过且同意了
                        if (res.authSetting['scope.writePhotosAlbum']) {
                            this.canvasToImgSave();
                        } else {
                            wx.showModal({
                                title: "请求授权相册存储",
                                content: "需要获取您的相册存储权限，请确认授权",
                                success: (resModal) => {
                                    if (resModal.confirm) {
                                        wx.openSetting({
                                            success: (resSetting) => {
                                                this.canvasToImgSave();
                                            },
                                            fail: (err) => {
                                                console.log(err);
                                            }
                                        });
                                    } else if (resModal.cancel) {
                                        console.log("你又取消了");
                                    }
                                }
                            });
                        }
                    } else {
                        this.canvasToImgSave();
                    }
                },
                fail: (err) => {
                    console.log(err);
                }
            });
        }
    }, 100);
},

canvasToImgSave() {
    wx.showLoading({
        title: '生成中...',
    });
    setTimeout(() => {
        wx.canvasToTempFilePath({
            canvas: this.canvas,
            x: 0,
            y: 0,
            width: this.canvasWidth * 2,
            height: this.canvasHeight * 2,
            destWidth: this.canvasWidth * 2,
            destHeight: this.canvasHeight * 2,
            success: (res) => {
                wx.saveImageToPhotosAlbum({
                    filePath: res.tempFilePath,
                    success: (resSave) => {
                        wx.showModal({
                            title: "保存成功！",
                            content: "图片已保存到本地相册",
                            showCancel: false,
                            success: (resModal) => {
                                // 图片保存成功后的逻辑
                            }
                        });
                    },
                    fail: (err) => {
                        console.log(err);
                    }
                });
            },
            fail: (err) => {
                console.log(err);
            },
            complete: () => {
                wx.hideLoading();
            }
        });
    }, 1000);
}