图片裁剪：

/**
 图片裁切
 裁切方法：首先先规范一块地方，比如一个圆形，然后加上图片，这样图片只在这块里面显示
 */

#import "ClipView.h"

@implementation ClipView

- (void)drawRect:(CGRect)rect
{
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    
    //1、画圆
    CGContextAddEllipseInRect(ctx, CGRectMake(100, 100, 50, 50));
    
    //2、裁剪
    CGContextClip(ctx);
    
    //3、显示
    CGContextFillPath(ctx);//渲染
    
    //4、添加图片
    UIImage *image = [UIImage imageNamed:@"me"];
    [image drawAtPoint:CGPointMake(100, 100)];
    
}

@end
  

今天就来说个常用的功能，图片裁剪，可用于头像裁剪啊之类的。用的还是我们之前用的哪个模块pillow
不过最好还是客户端裁剪，这里只是为了讲一下图片处理的这个功能

1. 安装pillow####

用pip安装

pip install pillow


2. 图片裁剪####

2.1 准备一张图片



renren.jpeg


2.2 我们使用的是Image中的crop(box)功能，它需要一个参数box,元组 类型，元组包括4个元素，如：

（距离图片左边界距离x， 距离图片上边界距离y，距离图片左边界距离+裁剪框宽度x+w，距离图片上边界距离+裁剪框高度y+h）

 

如图：(x, y, x+w, y+h), x,y是裁剪框左上角的坐标， x+w,y+h是右下角的坐标



renren.png

 

2.3 上代码1-裁剪：

# -*-coding:utf-8-*-
from PIL import Image
im = Image.open("renren.jpeg")
# 图片的宽度和高度
img_size = im.size
print("图片宽度和高度分别是{}".format(img_size))
'''
裁剪：传入一个元组作为参数
元组里的元素分别是：（距离图片左边界距离x， 距离图片上边界距离y，距离图片左边界距离+裁剪框宽度x+w，距离图片上边界距离+裁剪框高度y+h）
'''
# 截取图片中一块宽和高都是250的
x = 100
y = 100
w = 250
h = 250
region = im.crop((x, y, x+w, y+h))
region.save("./crop_test1.jpeg")

# 截取图片中一块宽是250和高都是300的
x = 100
y = 100
w = 250
h = 300
region = im.crop((x, y, x+w, y+h))
region.save("./crop_test2.jpeg")


运行结果：

(venv) allenwoo@~/renren/code$ python test.py 
图片宽度和高度分别是(500, 500)




crop_test1.jpeg



crop_test2.jpeg

2.4 上代码2-平均切割成4块：

# 把图片平均分成4块
# 第1块
w = img_size[0]/2.0
h = img_size[1]/2.0
x = 0
y = 0
region = im.crop((x, y, x+w, y+h))
region.save("./crop_average-1.jpeg")

# 第2块
x = w
y = h
region = im.crop((x, y, x+w, y+h))
region.save("./crop_average-2.jpeg")

# 第3块
x = 0
y = h
region = im.crop((x, y, x+w, y+h))
region.save("./crop_average-3.jpeg")

# 第4块
x = w
y = 0
region = im.crop((x, y, x+w, y+h))
region.save("./crop_average-4.jpeg")


****运行结果：****

 



crop_average-1.jpeg

 



crop_average-2.jpeg

 



crop_average-3.jpeg

 



crop_average-4.jpeg

2.5 上代码3-旋转图片：

# 旋转图片
# 左旋转45度
im = im.rotate(45)
im.save("./rotate-l45.jpeg")

# 右旋转30度
im = im.rotate(-30)
im.save("./rotate-r30.jpeg")

# 右旋转45度, 并裁剪一块
im = im.rotate(-30)
x = 50
y = 50
w = 150
h = 150
region = im.crop((x, y, x+w, y+h))
region.save("./rotate-r30-crop.jpeg")


****运行结果：****



rotate-l45.jpeg



rotate-r30.jpeg



rotate-r30-crop.jpeg

好了，到这里你完全可以做个头像裁剪了的后端操作了。




作者：HiWoo

链接：https://www.jianshu.com/p/856d1d420854

来源：简书

简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。


 

在Android应用中，图片裁剪也是一个经常用到的功能。Android系统中可以用隐式意图调用系统应用进行裁剪，但是这样做在不同的手机可能表现出不同的效果，甚至在某些奇葩手机上还会出其他更奇怪的问题，所以调用系统功能进行图片裁剪在很多时候对我们来说并不是一个好的选择。这时候就需要我们自己去实现这种裁剪功能了。



功能分析

要完成图片裁剪的功能，我们需要先知道图片裁剪的功能有哪些。图片裁剪之前，我们需要有一个框指示我们需要裁剪的样式合大小。图片显示出来后大小和位置可能并不是我们所期望的，所以我们还需要对图片进行移动、缩放等操作。确定好位置和大小后，我们需要真正的对图片进行裁剪，并将裁剪的图片存起来以供使用。也就是说需要实现图片裁剪的功能细分后如下：

显示指示框
图片移动和缩放
图片裁剪并保存
最终效果展示如下： 




功能实现



显示指示框

要实现显示一个如上图一样的指示框有很多方法，这里实现的方式是用自定义的Drawable作为View的背景，然后将这个View覆盖在原图片上作为指示框。为了在一定程度上满足更多的要求，我们让指示框可设置为矩形也可设置为圆形，阴影区域的颜色也可设置。 

要绘制出作为指示的图层，我们可以将它拆分成两半，变成两个封闭的Path进行绘制，也可以先绘制出半透明的覆盖层，然后在中间裁剪一个洞。显然，要考虑到这个洞的形状大小并不是固定的，裁剪的方式比拆分成两个封闭的Path要简单多了。 

Canvas的canvas.clipPath(Path, Region.Op);方法，可以对Canvas进行裁剪，可以很容易得到这样的指示框。然而Canvas的clipPath裁剪出来的曲线图形会有锯齿，我多番尝试都没能去掉锯齿，所以不得不放弃这个方法。继而利用paint的paint.setXfermode(new PorterDuffXfermode(mode))方法来实现这个效果。 

Android 4.4的Path增加了裁剪功能，我们可以直接用Path的path.op(Path, Path.Op)方法将Path裁剪成我们需要的形状再进行绘制，这种方式效率更高。

指示框Drawable的核心代码如下：



@Override
public void draw(@NonNull Canvas canvas) {
    int cWidth=canvas.getWidth();
    int cHeight=canvas.getHeight();
    if(rect==null){
        rect=new Rect(cWidth/2-width/2,cHeight/2-height/2,cWidth/2+width/2,cHeight/2+height/2);
    }
    canvas.drawColor(Color.TRANSPARENT);
    Path path=new Path();
    path.addRect(0,0,cWidth,cHeight, Path.Direction.CW);
    cropPath=new Path();
    if(shape==SHAPE_RECT){
        cropPath.addRect(rect.left,rect.top,rect.right,rect.bottom, Path.Direction.CW);
    }else if(shape==SHAPE_CIRCLE){
        cropPath.addCircle(rect.centerX(),rect.centerY(),rect.width()/2, Path.Direction.CW);
    }
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
        //可以抗锯齿
        path.op(cropPath, Path.Op.DIFFERENCE);        
        canvas.drawPath(path,paint);
    }else{
        //此方法可以去掉锯齿
        //在这里saveLayer然后restoreToCount的操作不能少，否则不会得到想要的效果
        int layerId = canvas.saveLayer(0, 0, cWidth, cHeight, null, Canvas.ALL_SAVE_FLAG);
        canvas.drawPath(path,paint);
        //已经绘制的可以看做为目标图
        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
        canvas.drawPath(cropPath,paint);
        paint.setXfermode(null);
        canvas.restoreToCount(layerId);
        //裁剪的方式会有锯齿，没找到方法去掉锯齿
        //canvas.clipPath(opPath, Region.Op.DIFFERENCE);
        //canvas.drawRect(0,0,cWidth,cHeight,paint);
    }
}



图片移动和缩放

图片的移动和缩放功能，在预览看大图的时候也会用到，在进行图片裁剪时，我们需要对图片的移动和缩放范围进行限定，禁止图片操作完成后出现超出指示框（根据需求也有在操作过程中就不允许超出指示框的情况）。ImageView有一个ImageView.setImageMatrix(Matrix)方法，可以直接设置图片的变换矩阵。所以我们也可以利用这个方法，结合ImageView的OnTouchListener监听，来做图片的移动和缩放处理。 

移动缩放核心代码如下：



@Override
public boolean onTouch(View v, MotionEvent event) {

    if(v!=null&&((ImageView) v).getDrawable()!=null){
        ImageView view = (ImageView) v;
        Rect rect=view.getDrawable().getBounds();
        //事件处理
        switch (event.getAction() & MotionEvent.ACTION_MASK) {
            //一个手指按下时，标记为移动模式
            case MotionEvent.ACTION_DOWN:
                matrix.set(view.getImageMatrix());
                savedMatrix.set(matrix);
                start.set(event.getX(), event.getY());
                mode = DRAG;
                break;
            //第二个手指按下时，标记为缩放模式
            case MotionEvent.ACTION_POINTER_DOWN:
                oldDist = distance(event);
                if (oldDist > 10f) {
                    savedMatrix.set(matrix);
                    midPoint(mid, event);
                    mode = ZOOM;
                }
                break;
            case MotionEvent.ACTION_UP:
            case MotionEvent.ACTION_POINTER_UP:
                checkMatrix(rect);
                mode = NONE;
                break;
            //手指移动时，根据当前是移动模式还是缩放模式做相应处理
            case MotionEvent.ACTION_MOVE:
                if (mode == DRAG) {
                    matrix.set(savedMatrix);
                    matrix.postTranslate(event.getX() - start.x, event.getY()
                            - start.y);
                } else if (mode == ZOOM) {
                    float newDist = distance(event);
                    if (newDist > 10f) {
                        matrix.set(savedMatrix);
                        float scale = newDist / oldDist;
                        matrix.postScale(scale, scale, mid.x, mid.y);
                    }
                }
                break;
        }
        view.setImageMatrix(matrix);
    }
    return true;
}

当手指抬起时，我们需要对图片当前状态进行判断，避免在限定范围中存在无图片区域：



private void checkMatrix(Rect rect){
    if(limit==null&&cropPath!=null){
        limit=cropPath.limit();
    }
    if(limit!=null){
        if(mode==ZOOM){
            matrix.getValues(values);
            if(rect.width()*values[0]<limit.width()){   //当前宽度小于最小宽度
                float scale = limit.width()/(float)rect.width()/values[0];
                matrix.postScale(scale, scale, mid.x, mid.y);
            }
            matrix.getValues(values);
            if(rect.height()*values[4]<limit.height()){   //当前高度小于最小高度
                float scale = limit.height()/(float)rect.height()/values[4];
                matrix.postScale(scale, scale, mid.x, mid.y);
            }
        }
        matrix.getValues(values);
        if(values[2]>=limit.left){
            matrix.postTranslate(limit.left-values[2],0);
        }
        matrix.getValues(values);
        if(values[2]+rect.width()*values[0]<limit.right){
            matrix.postTranslate(limit.right-rect.width()*values[0]-values[2],0);
        }
        matrix.getValues(values);
        if(values[5]>limit.top){
            matrix.postTranslate(0,limit.top-values[5]);
        }
        matrix.getValues(values);
        if(values[5]+rect.height()*values[4]<limit.bottom){
            matrix.postTranslate(0,limit.bottom-rect.height()*values[4]-values[5]);
        }
    }
}



裁剪和保存

将图片缩放移动操作到我们预期的大小和位置后，我们就可以将出现在指示框内的区域裁剪出来了。我们有两种方式，将这个区域裁剪出来，一种是对原图进行裁剪，另外一种是对ImageView展示出来的图片进行裁剪。当原图过大或者图片是网络图片等情况时，对原图裁剪并不是我们所期望的，而且相对直接对ImageView展示的内容进行裁剪，对原图进行裁剪还需要我们去计算我们所期望的区域在原图上的位置。所以我们还是直接对ImageView展示出来的图片进行裁剪，然后得到裁剪结果比较方便。当然，如果这个裁剪本来就是希望对原图进行处理的话，那就只能裁剪原图了。 

View有View.getDrawingCache()的方法，可以得到当前View展示的内容，它返回一个Bitmap。需要注意的是，在使用View.getDrawingCache()前，我们需要调用View.setDrawingCacheEnabled(true)来开启绘制缓存，否则无法得到当前的View所展示的内容。使用完毕后，再调用View.setDrawingCacheEnabled(false)关闭绘制缓存，否则下次调用View.getDrawingCache()时，得到的是之前的内容。。 

裁剪的核心代码：



public Bitmap crop(){
    if(imageView!=null&&cropPath!=null){
        if(limit==null){
            limit=cropPath.limit();
        }
        Paint paint=new Paint();
        paint.setAntiAlias(true);
        imageView.setDrawingCacheEnabled(true);
        Bitmap bmp=Bitmap.createBitmap(limit.width(),limit.height(), Bitmap.Config.ARGB_8888);
        Canvas canvas=new Canvas(bmp);
        canvas.drawColor(Color.TRANSPARENT);
        int lId=canvas.saveLayer(0,0,limit.width(),limit.height(),null,Canvas.ALL_SAVE_FLAG);
        Path path=new Path();
        path.addPath(cropPath.path(),-limit.left,-limit.top);
        canvas.drawPath(path,paint);
        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
        canvas.drawBitmap(imageView.getDrawingCache(),-limit.left,-limit.top,paint);
        paint.setXfermode(null);
        canvas.restoreToCount(lId);
        imageView.setDrawingCacheEnabled(false);
        return bmp;
    }
    return null;
}

裁剪后，将结果保存到指定目录：



public String cropAndSave(String path) throws IOException {
    Bitmap bmp=crop();
    if(bmp==null)return null;
    File file=new File(path);
    if(!file.getParentFile().exists()){
        boolean b=file.mkdirs();
        if(!b)return null;
    }
    if(file.exists()){
        boolean c=file.delete();
        if(!c)return null;
    }
    FileOutputStream fos=new FileOutputStream(file);
    bmp.compress(Bitmap.CompressFormat.PNG,100,fos);
    fos.flush();
    fos.close();
    bmp.recycle();
    return file.getAbsolutePath();
}



源码

博客中代码片段的完整类，以代码段的形式放在了CSDN代码笔记中，有需要的朋友自行建立工程使用相关类。

欢迎转载，转载请保留文章出处。湖广午王的博客[http://blog.csdn.net/junzia/article/details/52950210]

文章目录
一、安装
二、图片裁剪
三、将截图框回显到原图上
四、其它


由于项目需要，需要做图片裁剪。之前的项目已经由cropper.js实现过，因为这次使用的是vue，所以采用了vue-cropper这个组件，使用起来很简单，但是坑也很多。

一、安装
npm install vue-cropper

main.js
import VueCropper from 'vue-cropper'
Vue.use(VueCropper)

二、图片裁剪


引入VueCropper组件，并设置相关的属性。

<div  style="display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;">
            <vueCropper
              @mouseenter.native="enter"
              @mouseleave.native="leave"
              ref="cropper"
              :img="uploadImg"
              :outputSize="option.size"
              :outputType="option.outputType"
              :info="true"
              :full="option.full"
              :canMove="option.canMove"
              :canMoveBox="option.canMoveBox"
              :original="option.original"
              :autoCrop="option.autoCrop"
              :fixed="option.fixed"
              :fixedNumber="option.fixedNumber"
              :centerBox="option.centerBox"
              :infoTrue="option.infoTrue"
              :fixedBox="option.fixedBox"
              style="background-image:none"
            ></vueCropper>
</div>  

option: {
       info: true, // 裁剪框的大小信息
       outputSize: 0.8, // 裁剪生成图片的质量
       outputType: "jpeg", // 裁剪生成图片的格式
       canScale: false, // 图片是否允许滚轮缩放
       autoCrop: false, // 是否默认生成截图框
       fixedBox: false, // 固定截图框大小 不允许改变
       fixed: false, // 是否开启截图框宽高固定比例
       fixedNumber: [7, 5], // 截图框的宽高比例
       full: true, // 是否输出原图比例的截图
       canMove: false, //时候可以移动原图
       canMoveBox: true, // 截图框能否拖动
       original: false, // 上传图片按照原始比例渲染
       centerBox: false, // 截图框是否被限制在图片里面
       infoTrue: true // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
     }

❗️默认的裁剪图片的背景带有贼丑的马赛克，其实是它用了一张马赛克的图片做背景，去掉只需在VueCropper上设置去除背景图片的样式style="background-image:none".

上传完成后鼠标进入VueCropper即可以开始裁剪

在VueCroper上设置@mouseenter.native="enter"事件(⭐️组件上使用原生事件需要加上native关键字)
enter() {
 if (this.uploadImg == "") {
   return;
 }
 this.$refs.cropper.startCrop(); //开始裁剪
},


离开VueCropper即停止裁剪，得到裁剪图片。

在VueCroper上设置@mouseleave.native="leave"事件
leave() {
   this.$refs.cropper.stopCrop();//停止裁剪
   this.$refs.cropper.getCropData(data => { //获取截图的base64格式数据
     this.cutImg = data;
   });
   // this.$refs.cropper.getCropBlob(data => { //获取截图的Blob格式数据
   //   this.cutImg = data;
   // });
 },



我这里是离开div就会裁剪，点击裁剪按钮后传递裁剪图片，而不是点击裁剪按钮才裁剪，因为我点击裁剪按钮裁剪的话，拿到的图片并没有裁剪过，我也不知道为什么，就想出了这个办法。

vue-cropper图片裁剪问题 
三、将截图框回显到原图上


基本原理:
this.$refs.cropper.getCropAxis() //获取截图框基于容器的坐标点 {x1: 174, x2: 131, y1: 86, y2: 58}
this.$refs.cropper.cropW  //截图框宽
this.$refs.cropper.cropH //截图框高

通过上面的方式获取截图框的宽、高和基于容器的坐标点,然后让VueCropper的自动截取框显示出来并设置自动截取框的大小和位置。
以姓名字段为例:
{
          id: 1,
          name: "姓名",
          cropInfo: {
            width: 108, //this.$refs.cropper.cropW
            height: 56, //this.$refs.cropper.cropH 
            offsetX: 174, //this.$refs.cropper.getCropAxis().x1
            offsetY: 86  //this.$refs.cropper.getCropAxis().y1
}


在"姓名"el-card上设置enter事件<el-card @mouseenter.native="enterCard(refWord)" />

enterCard(refWord) {
      this.$refs.cropper.goAutoCrop();//重新生成自动裁剪框
      this.$nextTick(() => {
        // if cropped and has position message, update crop box
        //设置自动裁剪框的宽高和位置
        this.$refs.cropper.cropOffsertX = refWord.cropInfo.offsetX;
        this.$refs.cropper.cropOffsertY = refWord.cropInfo.offsetY;
        this.$refs.cropper.cropW = refWord.cropInfo.width;
        this.$refs.cropper.cropH = refWord.cropInfo.height;
      });
    }


在所有el-card外层的el-tabs上设置leave事件<el-tabs @mouseleave.native="leaveCard()" />

leaveCard() {
      this.$refs.cropper.clearCrop(); //取消裁剪框
    }

❗️注意不要在el-card上设置leave事件，不然进行鼠标移动到下一个el-card的时候会取消裁剪框又重新生成，导致页面出现闪烁的现象。
四、其它

将截图框限制在图片内:https://github.com/xyxiao001/vue-cropper/issues/429

解决方案:centerBox设置为true，并且只有autoCrop=true时才会生效
项目需要将裁剪框框出的位置信息和裁剪框大小给后台，让后台裁剪或者进行OCR，但是传给后台后裁剪出来的图片总是向右下角偏移:https://github.com/xyxiao001/vue-cropper/issues/386

解决方案:图片是缩放过的，传递position时，需要将position*scale.
裁剪大部分图片没有问题，但是裁剪某些图片时总是有偏差:https://github.com/xyxiao001/vue-cropper/issues/439

解决方法: 原来默认的裁剪图片大小有限制，宽高最高为2000px，将这个值设置为了10000，问题解决.



参考资料:

vue-cropper的github地址:https://github.com/xyxiao001/vue-cropper

(github里有vue-cropper常见的用法，如果有不懂的地方可以提issue，作者回复速度很快，亲测)