试图将我的 UIImage 裁剪为 1:1 的纵横比（正方形），但它不断放大图像，导致图像模糊。为啥？

Posted 2023-02-25

【中文标题】试图将我的 UIImage 裁剪为 1:1 的纵横比（正方形），但它不断放大图像，导致图像模糊。为啥？

【英文标题】：Trying to crop my UIImage to a 1:1 aspect ratio (square) but it keeps enlarging the image causing it to be blurry. Why?试图将我的 UIImage 裁剪为 1:1 的纵横比（正方形），但它不断放大图像，导致图像模糊。为什么？

【发布时间】：2013-12-06 16:57:38

【问题描述】：

给定一个 UIImage，我想把它变成一个正方形。只需切掉一些最大的尺寸，使其纵横比为 1:1。

UIImage *pic = [UIImage imageNamed:@"pic"];
CGFloat originalWidth = pic.size.width;
CGFloat originalHeight = pic.size.height;

float smallestDimension = fminf(originalWidth, originalHeight);

CGRect square = CGRectMake(0, 0, smallestDimension, smallestDimension);
CGImageRef imageRef = CGImageCreateWithImageInRect([pic CGImage], square);

UIImage *squareImage = [UIImage imageWithCGImage:imageRef];
CGImageRelease(imageRef);

UIImageView *imageView = [[UIImageView alloc] initWithImage:squareImage];
imageView.frame = CGRectMake(100, 100, imageView.bounds.size.width, imageView.bounds.size.height);

[self.view addSubview:imageView];

但这就是它的结果：

什么时候应该看起来像这样，但稍微窄一点。

这是为什么？图片是pic(150x114) / pic@2x(300x228)。

【问题讨论】：

这似乎有问题imageView.frame = CGRectMake(100, 100, imageView.bounds.size.width, imageView.bounds.size.height); 将其更改为可能imageView.frame = CGRectMake(100, 100, 100, 100);（不确定）

【参考方案1】：

问题是您混淆了逻辑大小和像素大小。在非视网膜设备上，这两个是相同的，但在视网膜设备上（如您的情况），像素大小实际上是逻辑大小的两倍。

通常，在设计 GUI 时，您总是可以只考虑逻辑大小和坐标，ios（或 OS X）会确保所有内容在视网膜屏幕上都翻倍。但是，在某些情况下，尤其是在自己创建图像时，您必须明确指定您的意思。

UIImage 的size 方法返回逻辑大小。例如，这是非视网膜屏幕上的分辨率。这就是为什么CGImageCreateWithImageInRect 只会从图像的左上半部分创建一个新图像。

将您的逻辑尺寸乘以图像的比例（在非视网膜设备上为 1，在视网膜设备上为 2）：

CGFloat originalWidth = pic.size.width * pic.scale;
CGFloat originalHeight = pic.size.height * pic.scale;

这将确保新图像是根据原始图像的整个高度（或宽度）创建的。现在，剩下的一个问题是，当您使用

创建一个新的UIImage

UIImage *squareImage = [UIImage imageWithCGImage:imageRef];

iOS 会认为，这是一张普通的非视网膜图像，它会显示两倍于您预期的大小。要解决此问题，您必须在创建 UIImage 时指定比例：

UIImage *squareImage = [UIImage imageWithCGImage:imageRef 
                                           scale:pic.scale 
                                     orientation:pic.imageOrientation];

【讨论】：

我不确定这是否正确，我已经采取了这个答案来解决问题see my question here