uni-app PC端H5 drawImage绘制的本地图片 canvasGetImageData得到的像素点全是0 无像素数据

uni-app PC端H5 drawImage绘制的本地图片 canvasGetImageData得到的像素点全是0 无像素数据

项目
产品分类 uniapp/H5
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 19042.1466
HBuilderX类型 正式
HBuilderX版本号 3.1.22
浏览器平台 Chrome
浏览器版本 79.0.3945.130(正式版本)(64 位)
项目创建方式 HBuilderX

bug描述:

画布绘制本地图片,在PC端H5,canvasGetImageData得到的所有像素点全是0,没有像素数据。原生canvas正常需等到图片异步加载完可以获得所有像素数据。但是官方没有对应的PC端的ctx.drawImage异步加载方法。

示例代码:

<template>
<view class="content">
<canvas id="ec-heatmp-mask" canvas-id="ec-heatmp-mask" style="width: 325px; height: 325px"></canvas>
</view>
</template>  

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

    },  
    mounted() {  
        this.handleClip('./681755.png')  
    },  
    methods: {  
        handleClip(imgSrc) {  
            const ctx = uni.createCanvasContext('ec-heatmp-mask', this)  
            if (ctx) {  
                ctx.drawImage('./681755.png', 0, 0, 325, 325)  
                uni.canvasGetImageData({  
                    canvasId: 'ec-heatmp-mask',  
                    x: 0,  
                    y: 0,  
                    width: 325,  
                    height: 325,  
                    success(res) {  
                        let imageData = res  
                        const pixels = res.data  
                        console.log(pixels);  
                        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  
                            }  
                        }  
                        uni.canvasPutImageData({  
                            canvasId: 'ec-heatmp-mask',  
                            x: 0,  
                            y: 0,  
                            width: 1,  
                            data: pixels,  
                            success(res) {  
                                console.log(res);  
                            }  
                        })  
                    }  
                })  
            }  
        }  
    }  
}  
</script>  

<style>  
#ec-heatmp-mask {  
    /* background-color: red; */  
}  

.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;  
}  
</style>  

更多关于uni-app PC端H5 drawImage绘制的本地图片 canvasGetImageData得到的像素点全是0 无像素数据的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

./681755.png 这个图片,路径不对吧

更多关于uni-app PC端H5 drawImage绘制的本地图片 canvasGetImageData得到的像素点全是0 无像素数据的实战教程也可以访问 https://www.itying.com/category-93-b0.html


先调用getImageInfo接口返回完整图片路径试试,话说现在pc端的canvas已经能用了吗

回到顶部