美文网首页
裁剪图片踩的坑

裁剪图片踩的坑

作者: 内心戏十足的伪胖子 | 来源:发表于2018-09-14 10:30 被阅读67次

之前的项目中有个需求:将一个比较长的列表页(用的UITableView)截图然后分享到微信。贴出实现方法:

- (UIImage *)captureScrollView:(UIScrollView *)scrollView {
    UIImage* image = nil;
    UIGraphicsBeginImageContext(scrollView.contentSize);
    {
        CGSize s = scrollView.contentSize;
        //第一个参数表示区域大小。第二个参数表示是否是非透明的。如果需要显示半透明效果,需要传NO,否则传YES。第三个参数就是屏幕密度了,关键就是第三个参数。
        UIGraphicsBeginImageContextWithOptions(s, NO, [UIScreen mainScreen].scale);
        CGPoint savedContentOffset = scrollView.contentOffset;
        CGRect savedFrame = scrollView.frame;
        scrollView.contentOffset = CGPointZero;
        scrollView.frame = CGRectMake(0, 0, SCREEN_WIDTH, scrollView.contentSize.height);
        
        [scrollView.layer renderInContext: UIGraphicsGetCurrentContext()];
        image = UIGraphicsGetImageFromCurrentImageContext();
        
        scrollView.contentOffset = savedContentOffset;
        scrollView.frame = savedFrame;
    }
    UIGraphicsEndImageContext();
    
    if (image != nil) {
        return image;
    }
    return nil;
}

所截的图如下:



这个方法能顺利将tableView截成长图,但是突然有天需求变了:

手续费那一栏不能分享出去,What?

然后我的思路是截两次,第一次把手续费以上的部分截下来,第二次把手续费以下的部分截出来,然后两张图片合成一张图片。思路有了,操起键盘就是一梭子代码:

/**
 Description 从图片中按指定的位置大小截取图片的一部分
 @param image 原始的图片
 @param rect 要截取的区域
 @return 截取出的图片
 */
- (UIImage *)imageFromImage:(UIImage *)image inRect:(CGRect)rect{
    CGImageRef sourceImageRef = [image CGImage];//将UIImage转换成CGImageRef
    /**以下为错误写法*/
    CGImageRef newImageRef = CGImageCreateWithImageInRect(sourceImageRef, CGRectMake(rect.origin.x, rect.origin.y, rect.size.width, rect.size.height));//按照给定的矩形区域进行剪裁
    UIImage *newImage = [UIImage imageWithCGImage:newImageRef];//将CGImageRef转换成UIImage
    return newImage;//返回剪裁后的图片
}

/**
 Description 图片上下拼接
 @param topImage 上图片
 @param bottomImage 下图片
 @return 拼接后的图片
 */
- (UIImage *)composeImgWithTopImage:(UIImage *)topImage bottomImage:(UIImage *)bottomImage {
    if (bottomImage == nil) {
        return topImage;
    }
    CGFloat topImageH = topImage.size.height;
    CGFloat topImageW = topImage.size.width;
    CGFloat bottomImageH = bottomImage.size.height;
    CGFloat bottomImageW = bottomImage.size.width;
    
    CGFloat totalHeight = SCREEN_WIDTH*topImageH/topImageW + SCREEN_WIDTH*bottomImageH/bottomImageW;
    CGSize offScreenSize = CGSizeMake(SCREEN_WIDTH, totalHeight);
    UIGraphicsBeginImageContextWithOptions(offScreenSize, NO, [UIScreen mainScreen].scale);
    CGRect rectTop = CGRectMake(0, 0, SCREEN_WIDTH, SCREEN_WIDTH*topImageH/topImageW);
    [topImage drawInRect:rectTop];
    CGRect rectBottom = CGRectMake(0, SCREEN_WIDTH*topImageH/topImageW, SCREEN_WIDTH, SCREEN_WIDTH*bottomImageH/bottomImageW);
    [bottomImage drawInRect:rectBottom];
    UIImage* imagez = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return imagez;
}

然后我两次调用截图传的rect是

CGRect headerClipRect = CGRectMake(0, 0, image.size.width, [self.tableView rectForSection:2].origin.y);
CGRect footerClipRect = CGRectMake(0, [self.tableView rectForSection:3].origin.y, image.size.width, self.tableView.contentSize.height - [self.tableView rectForSection:3].origin.y);

准备就绪,来看看截出来的图是什么样子的:


image.png

what,我到底哪里错了?一脸惊恐

然后反复查找发现- (UIImage *)captureScrollView:(UIScrollView *)scrollView这个方法截出的长图的大小并不是传入的scrollView的contentSize,而是长宽各自乘以手机分辨率[UIScreen mainScreen].scale,所以对长图进行切割的时候,按照给定的矩形区域进行剪裁应该这样传值

CGImageRef newImageRef = CGImageCreateWithImageInRect(sourceImageRef, CGRectMake(rect.origin.x*[UIScreen mainScreen].scale, rect.origin.y*[UIScreen mainScreen].scale, rect.size.width*[UIScreen mainScreen].scale, rect.size.height*[UIScreen mainScreen].scale));//按照给定的矩形区域进行剪裁

最后的截图合成之后应该是这样的:


image.png

相关文章

  • 裁剪图片踩的坑

    之前的项目中有个需求:将一个比较长的列表页(用的UITableView)截图然后分享到微信。贴出实现方法: 所截的...

  • 用electron实现一个批量裁剪图片的工具

    图片批量裁剪的工具 功能: 批量选择图片 放大缩小图片 移动图片 裁剪图片 导出裁剪后的图片 请在Release[...

  • 基于 vue-cropper-elementUI 截图上传插件

    图片裁切 图片裁剪 ...

  • 图片压缩踩坑

    业务需求:上传图片分析:Android机本地的文件进行上传时需要进行压缩,包括图片尺寸和大小的压缩,第三方库(Lu...

  • 图片360°旋转

    需求: 图片上的音乐图片,360°循环旋转 踩坑问题: 对图片定义了padding-right,导致transfo...

  • megapix-image.js + exif.js + 羽化

    megapix-image.js使用的一个坑-ios图片裁剪之画布绘制大图片 H5图片压缩代码 之后有时间再更新一...

  • 系统图片裁剪

    项目中用到图片裁剪,碰到两个问题,在此做下记录 裁剪大图片 需要裁剪的图片比较大,如果在裁剪后直接将图片数据返回,...

  • 移动端添加图片裁剪的坑

    本文关键:阻止冒泡、canvas压缩、canvas裁剪、生成黑色图片。 最近项目需要在添加图片时实现裁剪功能,虽然...

  • iOS之图片裁剪、添加水印

    图片裁剪 第一种:获取图片原大小,按图片原大小裁剪图片(UIImage转化为CGImageRef进行裁剪) 第二种...

  • 等比缩放图片裁剪指定区域图片

    /** * 等比缩放图片裁剪指定区域图片 * * @param image 原图 * @param size 裁剪...

网友评论

      本文标题:裁剪图片踩的坑

      本文链接:https://www.haomeiwen.com/subject/nxingftx.html