【报Bug】HBuilderX3.7.7 canvas绘制内容点击按钮保存到相册绘制内容丢失运行设备为android

分类：HBuilderX

bug反馈

产品分类： HbuilderX

PC开发环境操作系统： Windows

PC开发环境操作系统版本号： Windows 11 专业版

HBuilderX版本号： 3.7.7

示例代码：

<template>  
    <view class="content">  
        <image class="logo" src="/static/logo.png"></image>  
        <view class="text-area">  
            <text class="title">{{title}}</text>  
        </view>  
        <view>  
            <canvas style="width: 170px;height: 170px;margin: 10px 0 16px;background-color: #2C405A;" canvas-id="qr-code" id="qr-code"></canvas>  
            <text>加入我的人力资源共享平台</text>  
        </view>  
        <!-- #ifdef APP-PLUS -->  
        <view class="save-btn" @click="saveFile">  
            <text>保存到相册</text>  
        </view>  
        <!-- #endif -->  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                title: 'Hello'  
            }  
        },  
        onLoad() {  

        },  
        mounted() {  
            this.generateQrCode('/pages/login/register/register?type=2&f_id=' + this.id);  
        },  
        methods: {  
            generateQrCode(url) {  
                const ctx = uni.createCanvasContext('qr-code')  
                ctx.setFillStyle('#ffffff')  
                ctx.setFontSize(20)  
                ctx.fillText('canvas内容块',20, 50)  
                ctx.fillText('包含背景色',20, 80)  
                ctx.draw()  
            },  
            saveFile() {  
                // #ifdef APP-PLUS  
                let pages = getCurrentPages();  
                let page = pages[pages.length - 1];  
                let bitmap = null;  
                let currentWebview = page.$getAppWebview();  
                bitmap = new plus.nativeObj.Bitmap('amway_img');  
                //  将webview内容绘制到Bitmap对象中  
                currentWebview.draw(bitmap, function() {  
                    let rand = Math.floor(Math.random() * 10000)  
                    let saveUrl = '_doc/' + rand + 'a.jpg'  
                    bitmap.save(saveUrl, {}, function(i) {  
                        uni.saveImageToPhotosAlbum({  
                            filePath: i.target,  
                            success: function() {  
                                // bitmap.clear(); // 销毁Bitmap图片  
                                uni.showToast({  
                                    icon: 'none',  
                                    title: '保存图片成功',  
                                    mask: false,  
                                    duration: 1500  
                                });  
                            }  
                        });  
                    }, function(e) {  
                        uni.showToast({  
                            icon: 'none',  
                            title: '保存图片失败',  
                            mask: false,  
                            duration: 1500  
                        });  
                    });  
                }, function(e) {  
                    uni.showToast({  
                        icon: 'none',  
                        title: '保存图片失败',  
                        mask: false,  
                        duration: 1500  
                    });  
                });  
                // #endif  
            }  
        }  
    }  
</script>  

<style>  
    .content {  
        display: flex;  
        flex-direction: column;  
        align-items: center;  
        justify-content: center;  
    }  

    .logo {  
        height: 200rpx;  
        width: 200rpx;  
        margin-top: 200rpx;  
        margin-left: auto;  
        margin-right: auto;  
        margin-bottom: 50rpx;  
    }  

    .text-area {  
        display: flex;  
        justify-content: center;  
    }  

    .title {  
        font-size: 36rpx;  
        color: #8f8f94;  
    }  
    .save-btn{  
        display: flex;  
        justify-content: center;  
        align-items: center;  
        width: 239px;  
        height: 44px;  
        margin-top: 48px;  
        color: #245EE4;  
        line-height: 44px;  
        border-radius: 22px;  
        border: 1px solid #245EE4;  
    }  
</style>

操作步骤：

点击保存到相册按钮然后到相册查看图片是否保存完整

预期结果：

点击保存到相册按钮然后到相册查看图片需完整

实际结果：

HBuilderX Alpha 3.7.7 以及正式版3.7.3
点击保存到相册按钮然后到相册查看图片不完整
HBuilderX 正式版2.9.8
点击保存到相册按钮然后到相册查看图片完整

bug描述：

HBuilderX3.7.7 canvas绘制内容点击按钮保存到相册绘制内容丢失运行为android设备

HBuilderX Alpha 3.7.7 以及正式版3.7.3 点击保存到相册保存后到相册查看： canvas绘制内容会丢失但是canvas画布还在

HBuilderX 正式版 2.9.8 点击保存到相 canvas绘制内容不会丢失可以正常保存

其它版本未测试，已知当前最新版存在此问题且已测试3.6.X或3.7.X等版本也存在此问题具体版本未记录

包含”canvas内容块包含背景色“ 字样的图片为 HBuilderX 正式版 2.9.8点击按钮保存后的图片
色块区内容为空白的的图片为 HBuilderX Alpha 3.7.7 以及正式版3.7.3 点击按钮保存后的图片

2023-03-21 15:26 负责人:无分享

2 个回复

DCloud_Android_ST

示例demo项目附件提供一下

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

大佬看下我回复的附件也传了

2023-03-23 13:14
DCloud_Android_ST

回复 7***@qq.com: plus.nativeObj.Bitmap一值都无法截取canvas的内容你说老版本2.9.8可以这不太可能

2023-03-23 14:52
7***@qq.com (作者)

我下载2.9.8版本了然后代码一点没变但是却可以截取canvas

并且aph3.7.7也不是完全无法截取我在真实项目里面时第一次进去无法截取画布内容然后点击返回然后再进入就可以截取了具体操作为：

一级页（tabs页）---> 二级页 ---->三级页（此时无法截取） -----> 返回二级页 ----> 再次进入三级页 ----> 可以截取

一级页（tabs页）---> 二级页 ---->三级页（此时无法截取） -----> 返回二级页 ----->返回一级页 ----> 二级页 ---->三级页（此时无法截取）

2023-03-23 15:37
7***@qq.com (作者)

如果我没记错的话之前在某个3.几的版本是可以截取的但是后面我更新就不行了

不过我也不确定因为毕竟时间有点久了我也记不住是哪个版本

而我也去测试了很多个3.几的版本但是都存在这个问题无法截取内容

最后下载了2.9.8的版本之后就可以截取了图中有文字的就是2.9.8截取的

2023-03-23 15:40
7***@qq.com (作者)

回复 DCloud_Android_ST: 如果你这边有空的话可以下载2.9.8然后直接把附件运行一下就知道了

历史版本下载地址：https://hx.dcloud.net.cn/Tutorial/HistoryVersion

2023-03-23 15:42
DCloud_Android_ST

回复 7***@qq.com: ok 我们回查下历史版本

2023-03-23 16:53
7***@qq.com (作者)

回复 DCloud_Android_ST: 好的，敬候佳音！

2023-03-23 17:16
7***@qq.com (作者)

回复 DCloud_Android_ST: 大佬，空闲了之后麻烦看下这个问题，感谢

2023-03-24 13:33
DCloud_Android_ST

回复 7***@qq.com: 已有相关同学跟进有结果会回复

2023-03-24 14:47
7***@qq.com (作者)

回复 DCloud_Android_ST: 好的，感谢

2023-03-24 18:07
7***@qq.com (作者)

回复 DCloud_Android_ST: 大佬这个问题有段时间了好像没什么进展啊可以把跟进的人@给我吗

2023-03-29 10:10
DCloud_Android_ST

回复 7***@qq.com: 人手有限不会实时跟进问题有结果会回复

2023-03-29 11:03
DCloud_Android_ST

回复 DCloud_Android_ST: 反馈说不是所有手机设备在2.9.8基座都可以正常截取到canvas内容与设备内置的浏览器内核相关无法保证可以截取到所以该能力不支持文档有说明

2023-03-29 15:03
7***@qq.com (作者)

回复 DCloud_Android_ST: 好的，了解了

2023-03-29 15:53

7***@qq.com (作者) - 12112

这是测试项目代码附件其实就是 hbuilderX 文件->项目->默认模板然后用我贴的代码替换index.vue就行了

canvasTest.zip

要回复问题请先登录或注册

【报Bug】HBuilderX3.7.7 canvas绘制内容点击按钮保存到相册绘制内容丢失运行设备为android

操作步骤：

点击保存到相册按钮然后到相册查看图片是否保存完整

预期结果：

点击保存到相册按钮然后到相册查看图片需完整

实际结果：

HBuilderX Alpha 3.7.7 以及正式版3.7.3
点击保存到相册按钮然后到相册查看图片不完整
HBuilderX 正式版2.9.8
点击保存到相册按钮然后到相册查看图片完整

bug描述：

2 个回复

公告

相关问题

【报Bug】HBuilderX3.7.7 canvas绘制内容 点击按钮保存到相册 绘制内容丢失 运行设备为android

操作步骤： 点击 保存到相册 按钮 然后到相册查看图片是否保存完整

预期结果： 点击 保存到相册 按钮 然后到相册查看 图片需完整

实际结果： HBuilderX Alpha 3.7.7 以及正式版3.7.3 点击 保存到相册 按钮 然后到相册查看 图片不完整 HBuilderX 正式版2.9.8 点击 保存到相册 按钮 然后到相册查看 图片完整

bug描述：

与内容相关的链接

2 个回复

公告

相关问题

【报Bug】HBuilderX3.7.7 canvas绘制内容点击按钮保存到相册绘制内容丢失运行设备为android

操作步骤：

点击保存到相册按钮然后到相册查看图片是否保存完整

预期结果：

点击保存到相册按钮然后到相册查看图片需完整

实际结果：

HBuilderX Alpha 3.7.7 以及正式版3.7.3
点击保存到相册按钮然后到相册查看图片不完整
HBuilderX 正式版2.9.8
点击保存到相册按钮然后到相册查看图片完整