uniapp实现拍照涂鸦

为什么要实现这个功能？

uniapp做的项目，某些页面有拍照功能，就单纯的调用摄像头拍照，却无法对照片进行编辑标注。属于优化项，但是可以有的那种。

实现思路和逻辑 

只是简单的涂鸦，像在图片上签名一样，没有那种美颜啥的功能，所以难度不是很大。思路也比较简单：

1.接收到相机拍摄到的图片

2.将图片导入进canvas中

3.对canvas监听开始触摸事件和触摸移动事件

4.将canvas导出图片，返回给上一个页面。

 参考文章

实现过程中参考了其他博主的文章，文章链接如下：

 https://www.cnblogs.com/buaa17373407hjh/p/12970816.html

 https://www.cnblogs.com/CaraganaMicrophylla/p/16381145.html

实现代码 

 两个方面，一个是拍照之后直接将图片传到编辑页面。第二个是，从图片预览去将图片传入编辑页面。

拍照逻辑

				uni.chooseImage({
					count: 1,
					sourceType: 拍照的话使用['camera'],
					sizeType: ['compressed'],
					success : function(res){
						uni.navigateTo({
							url:照片编辑页面的url,
							events: {
								acceptDataFromOpenedPage: function(data) {
								    console.log(data)
								},
								getEditCompleteImg: function(imgData) {
                                    // 代码处理逻辑，用数组存id和资源
									picturesArray.push({
										id: 自定义值,
										src: imgData中的图片url
									})
								}
							},
							success:function(openRes){
								openRes.eventChannel.emit('acceptDataFromOpenerPage', { data: res.tempFilePaths[0] })
							}
						})
					},
					fail: function(error){
						console.log(error);
					},
					complete: function(res){
						console.log(res);
					}
				})

 chooseImage方法和navigateTo方法在uniapp的官网都有具体文档。

https://uniapp.dcloud.net.cn/api/media/image.html#chooseimage 

 uni.navigateTo(OBJECT) | uni-app官网

 success是打开另一个页面成功后，将数据传过去，代码里面传递的是图片的url。

events是注册的事件监听，可以在图片编辑页面，重新将数据传递回来。

选择照片逻辑

主要是调用uniapp的图片预览功能，支持长按弹出菜单项。代码如下

				uni.previewImage({
					urls,    // 图片资源url组成的数组
					current,        // 默认打开的下标
					longPressActions: {
						itemList:['编辑图片'],
						success:function(data){
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片')
							// 拿到图片的url     urls[data.index]
							// 关闭图片预览，跳转到图片编辑页面
							plus.nativeUI.closePreviewImage();
							uni.navigateTo({
								url:图片编辑页面的url,
								events: {
									acceptDataFromOpenedPage: function(data) {
									    console.log(data)
									},
									getEditCompleteImg: function(imgData) {
										console.log(imgData)
                                        // 和之前一样的处理逻辑
									}
								},
								success:function(res){
									res.eventChannel.emit('acceptDataFromOpenerPage', { data: urls[data.index] })
								}
							})
						},
						error:function(err){
							console.log(err)
						}
					}
				})

 uni.chooseImage(OBJECT) | uni-app官网

图片编辑逻辑 

需要一个canvas来将图片绘制。一个编辑保存按钮，一个清除重置按钮。

编辑保存按钮逻辑 

				uni.canvasToTempFilePath({
					canvasId: 'shareCanvas',    // canvas元素的id值
					destHeight: this.initImgHeight,    // initImgHeight是传入图片时获取到的图片高度
					destWidth: this.initImgWidth,        // 传入图片原先的宽度
					success: function (res) {
						// eventChannel.emit('someEvent', {data: 'data from test page for someEvent'});
						vm.eventChannel.emit('getEditCompleteImg', {data: res.tempFilePath});
						// 返回页面
						uni.navigateBack()
					}
				})

 清除重置按钮逻辑

                // 清除重新绘制
				let vm = this;
				console.log('重新绘制')
				// 重新绘制图片   targetImgUrl为原先图片的url    editWidth是canvas的宽度
				vm.drawContext.drawImage(vm.targetImgUrl,0,0,vm.editWidth,vm.editHeight)
				vm.drawContext.draw()
				// 重新设置颜色    这是封装的一个方法，画笔颜色宽度什么的
				vm.updateDrawContext()

在mounted中拿到canvas的宽度，高度在拿到图片的高度宽度信息获取宽高比后，动态设置高度。

			uni.createSelectorQuery().in(this).select(canvas元素设置的类名).boundingClientRect(data => {
				// console.log(JSON.stringify(data))
				// {"id":"","dataset":{},"left":12,"right":308,"top":12,"bottom":315,"width":296,"height":303}
				// this.editHeight = data.height
				
				this.editWidth = data.width
				console.log('读取到的',this.editWidth)
			}).exec()

在onLoad里面获取图片的url，然后获取图片的高度和宽度存到data中。

			const ctx = uni.createCanvasContext(canvas元素设置的id值)
			// 设置线条
			this.drawContext = ctx
            let vm = this
            vm.eventChannel.on('acceptDataFromOpenerPage', function(data) {
				console.log(data)
				vm.targetImgUrl = data.data
				// 获取图片的宽高
				uni.getImageInfo({
				    src: data.data,
				    success: function (image) {
						vm.initImgWidth = image.width;
						vm.initImgHeight = image.height;
						console.log('图片高度：',vm.initImgHeight)
						console.log('图片宽度：',vm.initImgWidth)
						console.log('图片纵横比',image.width/image.height)
						// 避免图片拉伸，保持纵横比
						const widthHeight = image.height/image.width
						vm.editHeight = widthHeight*vm.editWidth
						console.log('画布的高度',vm.editHeight)
						console.log('画布的宽度',vm.editWidth)
						vm.drawContext.drawImage(data.data,0,0,vm.editWidth,vm.editHeight)
						vm.drawContext.draw()
						// 设置画笔颜色
						vm.updateDrawContext()
				    },
					error: function (err) {
						console.log(err)
					},
					complete:function(end){
						console.log(end)
					}
				});
			})

导航栏返回和底部手机返回键

在onBackPress中设置

图片涂鸦绘制逻辑 

在getImageInfo中，已经将图片绘制到canvas中。剩下的就是设置canvas的开始触摸事件，触摸滑动事件，触摸结束事件等。

具体逻辑可以看这篇文章，canvas签名的逻辑，也是参考文章中的链接： 

uniapp中使用canvas - 小兔儿_乖乖 - 博客园

			touchstart: function (e) {
				// 取出x、y的值
				let {
					x,
					y
				} = e.changedTouches[0]
				// 绘制线条起点
				this.drawContext.beginPath()
				this.drawContext.moveTo(x, y)
				// 起点与移动的连接断开
				this.moveX = ''
				this.moveY = ''
			},
			touchmove: function (e) {
                // 取出x, y的值
                let {
                    x,
                    y
                } = e.changedTouches[0]
                // 防止线条出现断点
                if (this.moveX && this.moveY) {
                    this.drawContext.moveTo(this.moveX, this.moveY)
                    this.drawContext.lineTo(this.moveX, this.moveY)
                }
                this.drawContext.lineTo(x, y)
                this.moveX = x
                this.moveY = y
                this.drawContext.stroke()
                // ture，保留之前的内容
                this.drawContext.draw(true)
			},