h***@qq.com
h***@qq.com
  • 发布:2022-09-25 12:29
  • 更新:2022-09-28 15:29
  • 阅读:1022

【报Bug】自定义组件中使用canvasGetImageData方法,无法返回结果,"canvasGetImageData:fail fail canvas is empty"

分类:uni-app

产品分类: uniapp/小程序/微信

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: window 10

HBuilderX类型: 正式

HBuilderX版本号: 3.6.4

第三方开发者工具版本号: 1.06.2209190win32-x64

基础库版本号: 2.26.0

项目创建方式: HBuilderX

示例代码:
<canvas :canvas-id="cid" :id="cid"       disable-scroll="true" type="2d"></canvas>  
wx.canvasGetImageData({  
                    canvasId: this.cid,  
                    canvas: this.canvas,  
                    x: 0,  
                    y: 0,  
                    width: 1,  
                    height: 1,  
                    success(res) {  
                        console.log("wx.canvasGetImageData",res)  
                    },  
                    fail(e) {  
                        console.log("wx.canvasGetImageData",e)  
                    }  
                }, this.$mp.component)  
                //读取画板对应位置的点信息  
                uni.canvasGetImageData({  
                  canvasId: this.cid,  
                  x: point.x,  
                  y: point.y,  
                  width: 1,  
                  height: 1,  

                },this).then(res => console.log('res: this.$mp.component', res))

操作步骤:

canvas的 type="2d",初始化好canvas后,获取第一个像素点
找到相关帖子微信原生小程序是可以的
https://developers.weixin.qq.com/community/develop/doc/0004e67e5d4bc001e538809d556400?highLine=fail%2520canvas%2520is%2520empty
https://developers.weixin.qq.com/s/I5vZ4OmX7v68

预期结果:

wx.canvasGetImageData{height: 272, width: 375, data: Uint8ClampedArray(408000), errMsg: "canvasGetImageData:ok"}

实际结果:

wx.canvasGetImageData {errMsg: "canvasGetImageData:fail fail canvas is empty"}

bug描述:

在组件中是用uni.canvasGetImageData和 wx.canvasGetImageData方法均显示"canvasGetImageData:fail fail canvas is empty",
找到相关帖子微信原生小程序是可以的
https://developers.weixin.qq.com/community/develop/doc/0004e67e5d4bc001e538809d556400?highLine=fail%2520canvas%2520is%2520empty
https://developers.weixin.qq.com/s/I5vZ4OmX7v68
下面是尝试的几种写法

<canvas :canvas-id="cid" :id="cid"       disable-scroll="true" type="2d"></canvas>
wx.canvasGetImageData({  
                    canvasId: this.cid,  
                    canvas: this.canvas,  
                    x: 0,  
                    y: 0,  
                    width: 1,  
                    height: 1,  
                    success(res) {  
                        console.log("wx.canvasGetImageData",res)  
                    },  
                    fail(e) {  
                        console.log("wx.canvasGetImageData",e)  
                    }  
                }, this.$mp.component)
uni.canvasGetImageData({  
                  canvasId: this.cid,  
                  x: point.x,  
                  y: point.y,  
                  width: 1,  
                  height: 1,  

                },this).then(res => console.log('res: this.$mp.component', res))
uni.canvasGetImageData({  
                  canvasId: this.cid,  
                  x: point.x,  
                  y: point.y,  
                  width: 1,  
                  height: 1,  

                },this.$mp.component).then(res => console.log('res: this.$mp.component', res))
2022-09-25 12:29 负责人:无 分享
已邀请:
DCloud_UNI_WZF

DCloud_UNI_WZF

删除 type="2d"

该问题目前已经被锁定, 无法添加新回复