wkiwi的博客

canvasPutImageData

发布时间:6个月前热度: 197 ℃评论数:

在小程序【打卡圈】的开发过程中,需要实现作业批改的需求,这就需要实现图片的编辑涂鸦添加对号叉号等贴纸,在其中有一个需求那就是涂鸦的撤回,在canvas中绘制的了很多步,点击撤回总能回退到上一步操作,当时在想这个需求该如何去实现,每一步绘制结束去 生成一张图片?回退显示之前的图片吗,这样处理生成图片太频繁,再有就是调用canvas本来属性就不稳定,还去频繁的生成图片,这不更容易翻车吗,继续查看文档,发现了两个属性canvasPutImageData,canvasGetImageData,这不正是我需要的API吗,准备开干


wx.canvasGetImageData({
  canvasId: 'myCanvas',
  x: 0,
  y: 0,
  width: 100,
  height: 100,
  success(res) {
    console.log(res.width) // 100
    console.log(res.height) // 100
    console.log(res.data instanceof Uint8ClampedArray) // true
    console.log(res.data.length) // 100 * 100 * 4
  }
})
const data = new Uint8ClampedArray([255, 0, 0, 1])
wx.canvasPutImageData({
  canvasId: 'myCanvas',
  x: 0,
  y: 0,
  width: 1,
  height: 1,
  data: data,
  success (res) {}
})


思路,在每次触摸结束的时候触发canvasGetImageData保存当前画布上的所有像素点,并且压入一个数组变量中,当点击回退的时候从数组中拿出上一步的数据,再调用canvasPutImageData将数据绘制在canvas中,且从数组中弹出最后一个数据。



在开发过程中发现经常会报错canvasPutImageData: invalid data format

但是打印数据显示正确,最终发现canvas 的宽高是引起报错的罪魁祸首

当height或者width存在小数时会导致回退失败


解决方案:


在获取图片信息回调中getImageInfo

计算图片适应屏幕时取整

downLoadBgImg:function(){//获取需要编辑的图片信息
	let _this =this
	wx.getImageInfo({
		src: _this.bgImgUrl,
		success:(res)=> {
			if(res.errMsg!='getImageInfo:ok'){
				_this.$base.defaults('获取图片资源出错')
				return false;
			}
			_this.bgImgTempFilePath = res.path
			_this.bgImgTempFilePathHeight = res.height
			_this.bgImgTempFilePathWidth = res.width	
			
			if(res.width>=res.height){//横图
				_this.bgImgWidth =  Math.ceil(res.width)
				_this.bgImgHeight =  Math.ceil(res.width/_this.windowWidth * res.height)
				_this.drawCanvasHeight =  Math.ceil(res.width/_this.windowWidth * res.height)
				_this.drawCanvasWidth =  Math.ceil(res.width)
			}else{//竖图
				_this.bgImgHeight =  Math.ceil(_this.bodyHeight)
				_this.bgImgWidth =  Math.ceil(_this.bodyHeight/res.height *res.width)
				_this.drawCanvasHeight =  Math.ceil(_this.bodyHeight)
				_this.drawCanvasWidth =  Math.ceil(_this.bodyHeight/res.height *res.width)
			}
			_this.ctx = wx.createCanvasContext('drawCanvas');
			_this.canvasUndoPush();//缓存一次空画布
		},
		fail: (err) => {
			_this.$base.defaults('获取图片资源出错')
		}
	});
},


canvasPutImageData,canvasGetImageData,涂鸦撤回,canvas涂鸦,canvas回退

手机扫码访问