简单的聊一聊头像上传之图片裁剪

这个功能在大部分的App里面都有，但是我调研了一些App的这个功能，很多的App关于这一点的用户体验都不是太友好。然后调研微信、 QQ、微博、支付宝 这四个App关于这一块的功能，发现他们实现的方式也是略有差别(这点仅从使用的表现方式来看)。裁剪区域一般都是圆形，也有类似微信的那种方形，方形的实现在系统Api中已经有了实现，所以如果没有特殊要求，可直接使用系统自带的方法将UIImagePickerController的allowsEditing属性置为ture。关于这个功能的实现方式，我采用的是使用UIScrollView，然后使用自带的缩放功能，这样可以省去写手势缩放的功能。下面写了一些具体实现，如果不想看可直接看实现的代码：ClipImage。

实现点注意

在实现这个功能的时候，有些点是需要注意的，不然做出来的用户体验就不那么友好

进入页面的时候，图片显示的大小和默认位置，及图片的缩放比例
缩放的时候，手指捏合的可操作区域(这点希望是整个屏幕都可以，而不是暴露出来的圆形区域)
缩放之后，图片的可移动的区域(这点希望图片的边可以正好和圆形相切)
最后就是正确的裁剪范围

进入页面的位置及缩放

图片放置位置一般是按屏幕宽度填充，上下居中。图片缩放比例对宽大于高和宽小于高，有两种不同的处理，具体看下代码：

/// 图片放置位置
let imageViewH = image.size.height / image.size.width * ScreenWidth
imageView = UIImageView.init(frame: CGRect.init(x: 0, y: 0, width: ScreenWidth, height: imageViewH))
imageView.image = image
scrollView.addSubview(imageView)
// 使用 ContentOffset 调整是图片上下居中
let offsetY = (scrollView.bounds.height - imageViewH) / 2.0
scrollView.setContentOffset(CGPoint.init(x: 0, y: -offsetY), animated: false)

/// 图片缩放比例
let imageWidth = image.size.width
let imageHeight = image.size.height

if imageWidth > imageHeight {
    scrollView.minimumZoomScale = clipRectWidth / (imageHeight / imageWidth * ScreenWidth);
} else {
    scrollView.minimumZoomScale = clipRectWidth / ScreenWidth;
}
scrollView.maximumZoomScale = (scrollView.minimumZoomScale) * 5
scrollView.zoomScale = scrollView.minimumZoomScale > 1 ? scrollView.minimumZoomScale : 1

缩放的时候，手指捏合的可操作区域

设置UIScrollView的大小为整个屏幕，这样就能保证手指捏合的可操作区域为整个屏幕，缩放的View为上面添加的UIImageView，具体参看代码：

extension ClipImageVC: UIScrollViewDelegate {
    func viewForZooming(in scrollView: UIScrollView) -> UIView? {
        return imageView
    }
}

缩放之后，移动图片的区域

这个只需利用UIScrollView的contentInset属性，把UIScrollView的contentSize限制在圆形区域即可实现，但是需要保证UIImageView的origin为{0, 0}。开始我处理这块的时候，由于UIImageView的y没有设置为0，就始终调不准位置，然后误以为此方法行不通，然后去使用设置contentSize来调整滚动区域，发现这个计算太复杂了。UIImageView的origin设置为{0, 0}，这也是上面为啥使用了setContentOffset来保证图片上下居中。这块较简单就不贴代码了。

最后就是正确的裁剪范围

这个裁剪使用了CGImage的cropping方法，这个地方要注意的就是获取正确的裁剪区域，另外对图片方向也需要调整，图片的方向调整参考了优雅处理UIImage图片旋转这篇文章。裁剪范围具体参看一下代码：

let offset = scrollView.contentOffset
let imageSize = imageView.image?.size
let scale = (imageView.frame.size.width) / (imageSize?.width)!
// 裁剪圆形 x y 的坐标值
let clipRectX = (ScreenWidth - clipRectWidth) / 2.0
let clipRectY = (ScreenHeight - clipRectWidth) / 2.0

let rectX = (offset.x + clipRectX) / scale
let rectY = (offset.y + clipRectY) / scale
let rectWidth = clipRectWidth / scale
let rectHeight = rectWidth

let rect = CGRect.init(x: rectX, y: rectY, width: rectWidth, height: rectHeight)

总结

这个功能总体来说，实现出来一个用户体验很棒的并不是太难，里面牵扯到一些计算可能会稍微复杂点。QQ的捏合手势是在图片上，图片之外是无法操作的，微信的捏合手势在整个裁剪方框内，微博和支付宝的则为整个屏幕，但是体验的时候发现微博的在放大过程中图片会有轻微的颤抖，不知道为啥会出现这个情况。关于此功能的实现代码：ClipImage。

参考

优雅处理UIImage图片旋转

最后编辑于：2017.12.07 02:16:13