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已经能用了吗

