/ wechat

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

这篇文讲什么

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

对谁有用?有什么用?

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

结论

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

推荐理由: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 型框,如下图:
WechatIMG3

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

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

缺点3. 因为用的是 canvas 直接给用户看的实现方式。而 canvas 在微信小程序中是原生组件。
原生组件的层级是最高的,其他组件不论 z-index 怎么设置都是没用。
所以,造成的问题是裁剪区域有时候会溢出,如下图。
WechatIMG12
而正常情况下应该是这样的:(下方的“取消”/“下一步”不应该被遮挡)
normal

这个问题难以解决,在我们公司内的魅族,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 的分辨率,
oneplus

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

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

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

结论

其实图片裁剪功能说白了就是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
这个库我看了试了也觉得不错,觉得有一定参考价值,有兴趣的可以去看看
hiphoto

2019-1-11 更新

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

全文完。感谢阅读。

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

Subscribe to 糖醋陈皮的博客 | 博客主要写: 编程, Startup, Business