前言

最近产品新增一个需求，给拍照的图片加上水印。因为小程序是基于Taro和Vue来做的，所以便借此介绍一下实现思路，其实不管你是用原生也好，还是uniapp或者taro来实现这个功能，思路都是一样的，只不过调用的对应的api可能有点点的小区别。

实现思路

调用手机拍照，在成功的回调里拿到图片生成的临时path，通过url获取图片的信息，根据信息将图片绘制到canvas上，然后将水印也绘制到canvas上，最后通过canvas转url的方法生成带水印的path，最后再上传给后端。

实现步骤

1.调用手机拍照，注意红框标注的打印，这里面是个数组，生成的临时路径存放在该数组中

2.获取图片的信息（宽高），用于设置canvas宽高以及绘制的图片宽高（这里src是第一步骤获取的path）

3.在第二步的成功回调里通过drawImage去进行绘制，这里只贴了示例代码，你要将图片以及水印的绘制在这一步完成（注意绘制只需要一些，也就是draw方法）

4.最后根据绘制好的canvas，在draw方法的回调里，将其转换为图片的url

将最终生成的res.tempFilePath用于回显以及上传给后端，这里有关于上传的部分就不展开了，之前taro相关文章有过对此的说明。
最后说一点需要注意的地方，就是在第二步绘制canvas的时候，你需要将canvas通过定位设置到屏幕之外，注意回显的时候你可以通过image组件结合生成的url进行回显。

总结

可以看到，实现的代码还是比较简单的，重要的实现的思路，当你确定好实现方案，再去找对应的方法去解决就会变得思路清晰，我没有贴出完整的代码，如果你有兴趣可以按照这个思路去实现一遍，在实际的项目中，我们一般都会对此功能进行单独组件的抽离，同时会做的更加通用，像水印的自定义等等，这些只不过是在此基础上的功能的完善，为什么组件化开发很重要，因为这会大大降低你的维护成本，虽然你在开发这个组件的时候可能要多用一些时间，但是你在使用的时候便会受益，当你逐步理解了webpack，理解了组件化，你遇到重复的类似的功能的时候自然而然的会为自己封装一个公共的组件。

尾声

最后的最后，随着这次更文活动的结束我可能要断更一段时间了，因为连续高强度的输出加上最近工作强度较高需要休息一阵，但是各位不要担心，只要当前还是用vue react来进行前端开发，那么工程化的这些知识点也是最最重要的，一时半会儿也不会过时，希望你们都可以学以致用，如果这些文章对你有一定的启发，还请点赞收藏，后续会继续更新既实用，也能听得懂的分享。