代码：
<template>
<view class="">
<view class="padding-top-lg">
<view class="flex justify-center">
<button @tap="toBit" class="cu-btn bg-cyan round" style="width: 500upx;">转化</button>
</view>
</view>
<view class="padding-top-lg">
<view class="justify-center flex">
<canvas id="bitmap" style="width: 400px;height: 300px;" canvas-id="bitmap"></canvas>
</view>
</view>
<view class="padding-top-lg">
<view class="justify-center flex">
<canvas id="bitmap2" style="width: 400px;height: 300px;" canvas-id="bitmap2"></canvas>
</view>
</view>
</view>
</template>
<script>
let t
export default {
data() {
return {
}
},
onLoad() {
t = this
},
onReady() {
},
methods: {
async toBit() {
let context = uni.createCanvasContext('bitmap', t)
let dataSrc, dataTrg, luma, len, c
c = new Image()
c.src = '../../static/debug.jpg'
c.onload = () => {
context.drawImage('../../static/debug.jpg', 0, 0, c.width, c.height)
context.draw()
setTimeout(() => {
uni.canvasGetImageData({
canvasId: 'bitmap',
x: 0,
y: 0,
width: c.width,
height: c.height,
success(res) {
dataTrg = res.data
console.log(dataTrg);
uni.canvasPutImageData({
canvasId: 'bitmap2',
x: 0,
y: 0,
width: c.width,
data: dataTrg
})
}, 1000)
}
}
}
以下省略
.......说明：按钮绑定事件触发时，画布bitmap载入图片debug.jpg，然后1秒后延迟取画布id为bitmap的像素数据，然后把像素数据赋值ID为bitmap2的画布，实际结果是bitmap2画布并没有绘制任何内容，且控制台报错{errMsg: 'canvasPutImageData:fail'}，打印dataTrg 有像素数组信息，见截图：
请教如何处理？？
这个图片是400x300像素大小，用72x72像素的图片就正常，是canvasPutImageData有图片大小限制还是我哪里做的有问题，请教一下。
感谢
梅宝 (作者)
logo.png是正常的，我上面也说了72x72像素图片正常，上面说的72x72就是用Logo.png测试正常，换400x300图片就报错，除了替换图片外没有任何改动
2023-04-17 16:31
梅宝 (作者)
同样代码编译在小程序正常，在H5就会出现上述问题，注意图片大小是400x300，换默认工程的72x72图片则都正常
2023-04-17 16:33
梅宝 (作者)
找到问题了，原始图片是400x300大小，画布1载入这个图绘制后再用canvasGetImageData获取像素信息，在回调中width变成了390，实际应该是400，这时候把400传递到canvasPutImageData去绘制另外一个画布就会报错，所以还是有问题，问题在于画布载入图像后获取像素信息后尺寸变化了
2023-04-17 16:38