5***@qq.com
5***@qq.com
  • 发布:2022-02-16 17:06
  • 更新:2022-02-16 17:06
  • 阅读:371

【报Bug】H5端PC, canvasGetImageData获取到的像素点data,然后canvasPutImageData绘制到画布无效

分类:uni-app

产品分类: uniapp/H5

PC开发环境操作系统: Windows

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

HBuilderX类型: 正式

HBuilderX版本号: 3.3.11

浏览器平台: Chrome

浏览器版本: 79.0.3945.130(正式版本) (64 位)

项目创建方式: HBuilderX

示例代码:

handleClip(imgSrc) {
const ctx = uni.createCanvasContext('ec-heatmp-mask', this)
if (ctx) {
uni.downloadFile({
url: require('./681755.png'),
success: (res) => {
console.log(res)
console.log(res.tempFilePath)
ctx.drawImage(res.tempFilePath, 0, 0, 325, 325)
ctx.draw()
setTimeout(() => {
uni.canvasGetImageData({
canvasId: 'ec-heatmp-mask',
x: 0,
y: 0,
width: 325,
height: 325,
success(res) {
let imageData = res
const pixels = res.data
let result = pixels.filter(item => item !== 0)
console.log(result)
for (let index = 0; index < pixels.length; index +=

                                        4) {  
                                                    var r = pixels[index]  
                                                    var g = pixels[index + 1]  
                                                    var b = pixels[index + 2]  
                                                    var a = pixels[index + 3]  
                                                    if (a == 0) {  
                                                        pixels[index] = 255  
                                                        pixels[index + 1] = 255  
                                                        pixels[index + 2] = 255  
                                                        pixels[index + 3] = 255  
                                                    } else {  
                                                        pixels[index] = 0  
                                                        pixels[index + 1] = 255  
                                                        pixels[index + 2] = 255  
                                                        pixels[index + 3] = 0  
                                                    }  
                                                }  
                                                setTimeout(() => {  
                                                    uni.canvasPutImageData({  
                                                        canvasId: 'ec-heatmp-mask',  
                                                        x: 0,  
                                                        y: 0,  
                                                        width: 1,  
                                                        data: pixels,  
                                                        success(res) {  
                                                            console.log(res);  
                                                        },  
                                                        completeres(res) {  
                                                            console.log(res);  
                                                        },  
                                                    })  
                                                },0)  
                                            }  
                                        })  
                                    }, 0)  
                                }  
                            })

操作步骤:

像素点已经获得。图片能渲染,通过修改像素数据,在canvasPutImageData但是无法重新绘制渲染。

预期结果:

编辑像素点数据,无法覆盖渲染

实际结果:

编辑像素点数据,无法覆盖渲染

bug描述:

像素点已经获得。通过canvasPutImageData但是无法渲染上。

2022-02-16 17:06 负责人:无 分享
已邀请:

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