如何在不改变原始纵横比的情况下组合两个不同大小的 UIImage？

Question

我目前组合 UIImages 的方法来自这个answer on SO，以及this 关于调整 UIImage 大小与纵横比的流行问题。我目前的问题如下：

我有一个名为 pictureImage 的 UIImage 是用相机拍摄的，它的标准尺寸为 2448*3264。我还有一个名为self.annotateView 的UIImageView，它有一个320*568 的框架，用户可以在其中绘制和注释图片。当我在UIImageView 中展示pictureImage 时，我将图像展示设置为Aspect Fill，以便它占据整个iPhone 屏幕。当然这意味着pictureImage 的一部分在左右两边都被切断了（实际上两边都是304 像素），但这是故意的。

我的问题是，当我将 UIImages pictureImage 和 annotateView.image 组合到 320*568 的新维度时，我的组合图像通过水平拉伸它改变了 annotateView.image 的原始方面。这很奇怪，因为新维度与 annotateView.image 的原始维度完全相同。

这是结果的样子 -

在组合 UIImages 之前

合并图片后

请注意，底层图片未拉伸。但是，annotateView.image 仅水平拉伸，而不是垂直拉伸。

这是我合并 UIImages 的代码。

//Note: self.firstTakenImage is set to 320*568

CGSize newSize = CGSizeMake(self.firstTakenImage.frame.size.width, self.firstTakenImage.frame.size.height);
UIGraphicsBeginImageContext(newSize);
[self.firstTakenImage.image drawInRect:CGRectMake(0, 0, newSize.width, newSize.height)];
[self.drawView.image drawInRect:CGRectMake(0, 0, newSize.width, newSize.height)];
UIImage *combinedImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

Answer 1

在进行 drawInRect 时，您必须重做系统使用 AspectFill 为您所做的缩放和居中，以使其与原始过程相匹配。像这样的：

CGSize fullSize = self.pictureView.image.size;
CGSize newSize = self.outputView.frame.size;
CGFloat scale = newSize.height/fullSize.height;
CGFloat offset = (newSize.width - fullSize.width*scale)/2;
CGRect offsetRect = CGRectMake(offset, 0, newSize.width-offset*2, newSize.height);
NSLog(@"offset = %@",NSStringFromCGRect(offsetRect));

UIGraphicsBeginImageContext(newSize);
[self.pictureView.image drawInRect:offsetRect];
[self.annotateView.image drawInRect:CGRectMake(0,0,newSize.width,newSize.height)];
UIImage *combImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

self.outputView.image = combImage;

Answer 2

• 支持纵向和横向两种类型的图像
• 在我的情况下可以合并绘图和其他子视图我正在添加标签来绘图

  {

    CGSize fullSize = getImageForEdit.size;
    CGSize sizeInView = AVMakeRectWithAspectRatioInsideRect(imgViewFake.image.size, imgViewFake.bounds).size;
    CGFloat orgScale = orgScale = fullSize.width/sizeInView.width;
    CGSize newSize = CGSizeMake(orgScale * img.image.size.width, orgScale * img.image.size.height);
    if(newSize.width <= fullSize.width && newSize.height <= fullSize.height){
        newSize = fullSize;
    }
    CGRect offsetRect;
    if (getImageForEdit.size.height > getImageForEdit.size.width){
        CGFloat scale = newSize.height/fullSize.height;
        CGFloat offset = (newSize.width - fullSize.width*scale)/2;
        offsetRect = CGRectMake(offset, 0, newSize.width-offset*2, newSize.height);
    }
    else{
        CGFloat scale = newSize.width/fullSize.width;
        CGFloat offset = (newSize.height - fullSize.height*scale)/2;
        offsetRect = CGRectMake(0, offset, newSize.width, newSize.height-offset*2);
    }
    UIGraphicsBeginImageContextWithOptions(newSize, NO, getImageForEdit.scale);
    [getImageForEdit drawAtPoint:offsetRect.origin];
    //        [img.image drawInRect:CGRectMake(0,0,newSize.width,newSize.height)];
    CGFloat oldScale = img.contentScaleFactor;
    img.contentScaleFactor = getImageForEdit.scale;
    [img drawViewHierarchyInRect:CGRectMake(0, 0, newSize.width, newSize.height) afterScreenUpdates:YES];
    img.contentScaleFactor = oldScale;
    UIImage *combImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    imageData = UIImageJPEGRepresentation(combImage, 1);
}

Answer 3

当您调用[self.drawView.image drawInRect:CGRectMake(0, 0, newSize.width, newSize.height)]; 时，您需要修改框架以解决您所描述的纵横比差异（因为您在两边都切掉了一些图像）。

即修改x位置和width绘制注解图。

修改是基于缩放到相同高度时 2 个矩形之间的差异。你说这是304，所以你可以最初将x设置为304，将width设置为newSize.width - 608进行测试。但真的应该计算差异......

Answer 4

麦克沃思在夫特答案3.x的强>

    let fullSize:CGSize = img.size
    let newSize:CGSize = fullSize
    let scale:CGFloat = newSize.height/fullSize.height
    let offset:CGFloat = (newSize.width - fullSize.width*scale)/2
    let offsetRect:CGRect = CGRect.init(x: offset, y: 0, width: newSize.width - offset*2, height: newSize.height)
    print(NSStringFromCGRect(offsetRect))     

    UIGraphicsBeginImageContext(newSize);
    self.pictureView.image.draw(in: offsetRect)
    self.annotateView.image.draw(in: CGRect.init(x: 0, y: 0, width: waterMarkImage.size.width, height: waterMarkImage.size.height))
    let combImage:UIImage = UIGraphicsGetImageFromCurrentImageContext()!
    UIGraphicsEndImageContext();
    return combImage;