2021-07-29

关于使用uniapp的小程序canvas实现背景模糊

1、高斯算法实现模糊：大神写的：https://blog.csdn.net/qq_30100043/article/details/83784608
2、因为html的方法和小程序的方法不太一样，所以我这里使用uniapp封装好的方法，因为这两个方法是异步的，所以需要将他改为同步执行，如果不改为同步的背景之上的信息会被这个背景覆盖，此时注意：在使用这个方法时，背景图片是已经画在画布上了
调用这个方法：

// 绘制背景图片，调用封装好的方法
	await this.canvas.scaleImage({
			x: 0,
			y: 0,
			img: this.detail.image[0],
			canvasWidth: 375,
			canvasHeight: 603,
			flag:true
		})
// 你们可以使用，将背景图片画到画布上，需要注意，图片必须是本地图片，如果不是使用uni.getImageInfo获取将网络地址存储到本地

    context.drawImage(url, 0, 0, 375, 603)					
	context.save()
	await this.drawBlurBg(context,this.canvas)	

drawBlurBg(context,canvas){
			return new Promise((resolve,reject)=>{
				context.draw(false,()=>{
				// 获取像素点
					uni.canvasGetImageData({
						    canvasId:'shareCanvas',
						    x:0,
							y:0,
							width:375,
							height:603,
							success:(res)=>{
							// 调用大神写的高斯算法，改造像素点
								var emptyData = canvas.gaussBlur(res)
								// 重新画到画布上
								uni.canvasPutImageData({
									canvasId:'shareCanvas',
									data:emptyData.data,
									x:0,
									y:0,
									width:375,
									height:603,
									success:(res)=> {
									
										resolve()
									}
								},this)		
							 }
						},this)
					})
			})	
			}