uni-app uni.canvasPutImageData一直报canvasPutImageData fail
uni-app uni.canvasPutImageData一直报canvasPutImageData fail
开发环境 | 版本号 | 项目创建方式 |
---|---|---|
Mac | m2 | HBuilderX |
产品分类:uniapp/App
PC开发环境操作系统:Mac
手机系统:HarmonyOS NEXT
手机系统版本号:HarmonyOS 5.0.1
手机厂商:模拟器
手机机型:模拟器
页面类型:vue
vue版本:vue3
打包方式:云端
示例代码:
<template>
<view class="container">
<canvas
canvas-id="signatureCanvas"
class="signature-canvas"
/>
<canvas
canvas-id="signatureCanvass"
class="signature-canvass"
/>
<button @click="getImgData" style="position: fixed;top: 80%;">获取图片数据</button>
<button @click="fu" style="position: fixed;top: 80%;right: 0%;">复现</button>
</view>
</template>
<script>
export default {
data() {
return {
ctx: null,
isDrawing: false,
lastX: 0,
lastY: 0,
canvasWidth:0,
canvasHeight:0,
getData:null
}
},
onReady() {
// 获取canvas上下文
this.ctx = uni.createCanvasContext('signatureCanvas', this);
this.ctx.setFillStyle('#ff0000');
this.ctx.fillRect(0, 0, 100, 100); // 绘制一个红色矩形
this.ctx.draw()
this.ctxs = uni.createCanvasContext('signatureCanvass', this);
this.ctxs.draw()
},
methods: {
fu(){
let that=this
let data = new Uint8ClampedArray(this.getData)
console.log(data)
uni.canvasPutImageData({
canvasId: 'signatureCanvass',
x: 0,
y: 0,
width: 750,
height:500,
data: data,
success(res) {
console.log('成功',res)
},
fail(err) {
console.log('失败',err)
}
},this)
},
getImgData(){
let that=this
uni.canvasGetImageData({
canvasId: 'signatureCanvas',
x: 0,
y: 0,
width: 750,
height: 500,
success(res) {
console.log(res.width) // 100
console.log(res.height) // 100
console.log(res.data instanceof Uint8ClampedArray) // true
console.log(res.data) // 100 * 100 * 4
that.getData=res.data
}
},this)
},
}
}
</script>
.container {
width: 750rpx;
/* height: 500rpx; */
display: flex;
flex-direction: column;
background-color: #f8f8f8;
}
.signature-canvas {
width: 750rpx;
height: 500rpx;
background-color: white;
border: 1px solid #eee;
}
.signature-canvass{
width: 750rpx;
height: 500rpx;
background-color: #000;
border: 1px solid #eee;
margin-top: 30rpx;
}
操作步骤:
按照提供代码复现
预期结果:
成功把数据渲染到canvas上
实际结果:
报错
bug描述:
首先使用uni.canvasGetImageData获取canvas图片信息,文档上写着data是Uint8ClampedArray类型的,然后在把数据传给uni.canvasPutImageData,实现数据会知道canvas上,但是一直报canvasPutImageData:fail,不知道原因是什么,昨天发过一个咨询的帖子,官方人员就要了一下demo,就消失了,现在也没回
更多关于uni-app uni.canvasPutImageData一直报canvasPutImageData fail的实战教程也可以访问 https://www.itying.com/category-93-b0.html
2 回复
已知问题,感谢反馈
更多关于uni-app uni.canvasPutImageData一直报canvasPutImageData fail的实战教程也可以访问 https://www.itying.com/category-93-b0.html
问题分析:
- 主要问题是
uni.canvasPutImageData
调用失败 - 常见原因包括:尺寸不匹配、数据类型问题、Canvas未正确初始化
解决方案:
- 确保两个Canvas的尺寸完全一致(750x500)
- 检查
canvasGetImageData
获取的数据是否完整 - 添加错误回调查看具体失败原因
修改建议:
fu(){
if(!this.getData) return
uni.canvasPutImageData({
canvasId: 'signatureCanvass',
x: 0,
y: 0,
width: 750,
height: 500,
data: this.getData,
success(res) {
console.log('成功',res)
},
fail(err) {
console.error('失败详情:', err) // 打印详细错误
}
}, this)
}