详细问题描述
uni.canvasGetImageData()方法无论坐标点选择什么值,data值在h5端都是0,但是在微信小程序测试可以正常获取颜色值
IDE运行环境说明
[HBuilder 或 HBuilderX。如果你用其他工具开发uni-app,也需要在此说明]
[IDE版本号] 2.4.6.20191210
[windows版本号] win10
[mac版本号]
uni-app运行环境说明
[运行端是h5或app或某个小程序?] h5
[运行端版本号] chrome 78.0.3904.108(x64)
[可重现代码片段]
示例代码:
<template>
<view class="">
<view style="margin:0 auto;width: 900px;padding-left: 10px;">
<canvas @tap="test" style="width: 800px; height: 800px;border: #007AFF solid 1rpx; z-index: 999;" canvas-id="myCanvas" id="myCanvas"></canvas>
</view>
</view>
</template>
<script>
export default {
onReady() {
this.initCanvas()
},
data() {
return {
}
},
methods: {
test(e){
console.log(e)
let color = uni.canvasGetImageData({
canvasId:'myCanvas',
x:e.touches[0].clientX,
y:e.touches[0].clientY,
width:1,
height:1,
success(res){
console.log(res)
}
})
},
/*初始化画布*/
initCanvas() {
const context = uni.createCanvasContext('myCanvas', this)
context.save()
context.beginPath()
context.setFillStyle('red')
context.fillRect(10, 10, 150, 100)
context.fillRect(50, 50, 150, 100)
setTimeout(function() { //必须延迟执行 不然H5不显示
context.restore()
context.draw() //必须加上 uniapp 没这儿玩意儿 显示不出来不比原生 不加可以显示
}, 400)
},
},
}
</script>
<style>
</style>
联系方式
[QQ]793703625
1***@qq.com
解决了么 加个延迟好像可以取到数据
2020-11-04 09:28
1***@qq.com
回复 1***@qq.com: context.draw(reserve,uni.canvasGetImageData) 放这里面回调就可以获得数据
2023-06-06 22:00