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


问题分析:

  1. 主要问题是uni.canvasPutImageData调用失败
  2. 常见原因包括:尺寸不匹配、数据类型问题、Canvas未正确初始化

解决方案:

  1. 确保两个Canvas的尺寸完全一致(750x500)
  2. 检查canvasGetImageData获取的数据是否完整
  3. 添加错误回调查看具体失败原因

修改建议:

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)
}
回到顶部