uniapp——微信小程序中拍照上传图片加水印功能

wxml文件

拍照
预览

js文件数据区：

data() {
	return {
		socketOpen: false,
		src:'',
		canvasStyle:{}
	}
}

js文件方法区：

 takePhoto() {
	const ctx = uni.createCameraContext()
	ctx.takePhoto({
	  quality: 'high',
	  success: (res) => {
		this.src=res.tempImagePath;
		let that = this;
		uni.getImageInfo({
		  src: res.tempImagePath,
		  success: (ress) => {
			let date = "水印内容";    /** 作为水印 */
			let ctx = uni.createCanvasContext('firstCanvas');    /** 创建画布 */
			let textToWidth = ress.width / 3 * 0.5;  /**这里设置的是水印位置*/
			let textToHeight = ress.height / 3 * 0.9;
			that.canvasStyle=`{width:${ress}.width/3px;height:${ress}.height/3px}`;						
			//将图片src放到cancas内，宽高为图片大小
			ctx.drawImage(res.tempImagePath, 0, 0, ress.width / 3, ress.height / 3)
			//将声明的时间放入canvas
			ctx.setFontSize(14) //注意：设置文字大小必须放在填充文字之前，否则不生效
			ctx.setFillStyle('blue')
			ctx.fillText(date, textToWidth, textToHeight)    //水印内容，位置
			// ctx.strokeText(date, ress.width, ress.height)
			uni.showLoading({
			  title: '制作水印中...',
			})
			ctx.draw(false, () => {//开始制作
			  setTimeout(() => {//使用定时是因为制作水印需要时间，设置定时才不会出bug
				uni.canvasToTempFilePath({//将画布中内容转成图片，即水印与图片合成
				  canvasId: 'firstCanvas',
				  success: (res) => {
					uni.hideLoading()
					uni.saveImageToPhotosAlbum({//保存到手机
					  filePath: res.tempFilePath,
					  success(res) {
						console.log('1')
					  }
					})
				  }
				})
			  }, 500)
			})
		  }
		})
	  }
	})
  }