2018-12-26 微信小程序图片裁剪

这篇文讲什么

如何制作微信小程序中的图片裁剪功能

对谁有用？有什么用？

对谁有用？：微信小程序开发者，第一次做裁剪功能，希望看点相关文章参考别人怎么做的
有什么用？：看我是怎么做的，缩短你的开发时间

结论

先讲结论，节省时间。
推荐使用 wx-croppper v2 分支: https://github.com/IFmiss/wx-cropper

推荐理由：1. 裁剪出来的图清晰 2. 易于定制（代码较短，相对易懂）

目前我的进度：
2018年12月：
之前用 we-cropper（名字相近的另一个库）发现清晰度不够。
现在正在基于 wx-croppper 开发。有结果了会回来说。
想看我是怎么得到这个结论的请往下继续读正文
2019年1月：
wx-cropper 已经用了差不多20多天了。没有啥问题。继续使用。

正文

网上的开源微信小程序裁剪库，截止至2018-12-26，只有2个算可以的：
一个是 we-plugin/we-cropper, 一个是 IFmiss/wx-cropper
（对，这俩名字很相近，we 和 wx，所以我把 github 前缀也拉过来做区分）

其他的工具，要么就是文档很差（寥寥几句，完全没说使用方式）甚至完全没有文档,
或者 commit 很少（2-3个），而且最近的 commit 是半年甚至一年前，完全没人管。
那些就不列出来了没啥意思，读者可以自己谷歌搜。

以下详细讲

介绍 we-cropper

https://github.com/we-plugin/we-cropper
截止至写文时间, Github star 998, 是 star 最多的小程序图片裁剪库（起码据我所知是这样）

具体使用方法： 把 Github 中的 /dist 目录以组件形式使用

缺点：
缺点1. 截图出来的清晰度不够
对于这个问题，官方 FAQ 中指出了解决办法以及给出了示例代码。需要自己写一些代码才能搞定。

缺点2. 难以定制，源代码1016行，扫了一眼觉得比较难懂，比较难懂不是弄不懂，只是对我来说我实在没兴趣花几天时间弄懂，仅仅为了定制某个很小的方面，我真的不想花时间看代码。

这个库的实现方式是，纯粹只用1个 canvas，
默认的截图样式是左上角，右上角，左下角，右下角，有个绿色的 L 型框，如下图：

所以假设你想定制截图框，比如说做成中间有两道分割线，把裁剪区域平分分成9份，
然后外边线全部白色。
那你改起来就有点麻烦了。
而 wx-cropper 的 v2 分支默认样式就是这样的:

再假设你想定制说这个截图界面的背景不要黑色了，就白色就行。也不太好改，还是得去源代码里翻一翻。

缺点3. 因为用的是 canvas 直接给用户看的实现方式。而 canvas 在微信小程序中是原生组件。
原生组件的层级是最高的，其他组件不论 z-index 怎么设置都是没用。
所以，造成的问题是裁剪区域有时候会溢出，如下图。

而正常情况下应该是这样的：（下方的“取消”/“下一步”不应该被遮挡)

这个问题难以解决，在我们公司内的魅族，OnePlus，iPhone X, 锤子手机，均无法重现这样的问题。
而用户反馈此问题的机型有: iPhone X, iPhone 8 plus, iPhone 6s。
而我使用 testin 云测服务使用相同机型进行测试，又是测不出来的。
所以这是个很难解决的问题。

介绍 wx-croppper

https://github.com/IFmiss/wx-cropper
截止至写文时间, Github star 199
Master 分支，如果是用于小图片，比如 1920x1080 的图，一切 OK 没有问题。
但我的 OnePlus 6T 随便拍张图就是 2112x4608 的分辨率，

如果直接用这样的图，会卡得不行，把安卓微信 6.7.2 弄崩溃。
这显然是个不能接受的体验。
另一个 we-cropper 虽然清晰度不行，但整体的操作都是相对流畅的，不会卡到不行或者崩溃。

按 REAMDE 里使用了 v2 分支之后好了很多。

而且重要的是，如果要改样式，直接改 wxss 和 wxml 就行了。

结论

其实图片裁剪功能说白了就是2个部分，

1.是用户的预览和操作，2.图片的裁剪。
"图片的裁剪"部分，为了清晰度，
无非是在屏幕外面画一个和图片相同大小的 canvas，然后进行裁剪。
这一步就没啥可说的了。
而"用户的预览和操作" we-cropper 和 wx-cropper 各自采用了不同的方法

we-cropper(github star 900)使用的是 canvas 直接展示给用户看。
wx-cropper(github star 199)使用的是 view+image 实现。而 view+image 这种实现目前看来定制起来会方便的多，改 wxml 和 wxss 就可以了。

另外

做这个功能我当然也去试了几个其他的小程序，看看其他人做的效果，
它们的裁剪功能还是挺顺畅的，不过应该都是自己写的，网上找不到它们的开源代码。

最后

这篇文讲了蛮多 we-cropper 的缺点，但这些都是客观事实，我还是非常感谢作者愿意开源的。
并不是人身攻击或怎样。没有恶意。仅仅是为了制作截图功能进行工具对比而已。

结论

最开头已经说了，就是用 wx-cropper(github star 199) 的 v2 版本就行。基于那个之上修改。
理由：1. 好定制， 2. 截图出来清晰

还有

https://github.com/nimoat/photo-edit
这个库我看了试了也觉得不错，觉得有一定参考价值，有兴趣的可以去看看

2019-1-11 更新

https://github.com/we-plugin/we-cropper/issues/87#event-2067479593
we-cropper 作者进行了更新。问题应该都解决了。
如果你还是对 we-cropper 感兴趣可以试试。

全文完。感谢阅读。