如何将图像从url添加到MKAnnotationView以供视网膜显示?

时间:2021-08-06 19:57:48

I'm trying to create a custom MKAnnotationView with image from a url.

我正在尝试创建一个自定义的MKAnnotationView,其中包含来自url的图像。

What happens is that when the device has retina display, the image of the MKAnnotationView is blurred, as it double its resolution.

当设备显示视网膜时,MKAnnotationView的图像会变得模糊,因为它的分辨率是原来的两倍。

If the image is from the app, it will load the @2x image (if one exists), but if you set an image from a url like this for example:

如果图像来自应用程序,它将加载@2x图像(如果存在的话),但是如果您从一个url设置一个图像,例如:

- (MKAnnotationView *) mapView:(MKMapView *) mapView viewForAnnotation:(id ) annotation    
{
MKAnnotationView *customAnnotationView=[[MKAnnotationView alloc]
initWithAnnotation:annotation reuseIdentifier:nil];

NSData * imageData = [[NSData alloc] initWithContentsOfURL: [NSURL URLWithString:@"http://www.interaction-design.org/images/icons/play-button-red-300x300.png"]];


UIImage *img = [UIImage imageWithData:imageData];
[customAnnotationView setImage:img ];
return customAnnotationView;
}

you will see the image on an retina display very pixelated.

你会看到视网膜上的图像非常像素化。

Any advice what to do? Thanks

有什么建议吗?谢谢

1 个解决方案

#1


5  

The gist is this...

主要内容是这样的……

  1. Use [[UIScreen mainScreen] scale] to ask your server for a standard or @2x image.
  2. 使用[[UIScreen主屏幕]scale]请求服务器提供一个标准的或@2x图像。
  3. Create a CGImageRef from the NSData
  4. 从NSData创建一个CGImageRef
  5. Use the CGImageRef and [[UIScreen mainScreen] scale] to create a UIImage
  6. 使用CGImageRef和[UIScreen主屏幕]scale来创建一个UIImage

The code to do that looks like this:

这样做的代码如下:

NSString *imagePath = @"http://www.interaction-design.org/images/icons/play-button-red-300x300";
imagePath = [imagePath stringByAppendingString:[[UIScreen mainScreen] scale] > 1 ? @"@2x.png": @".png"];
NSData *imageData = [[NSData alloc] initWithContentsOfURL: [NSURL URLWithString:imagePath]];

CGDataProviderRef dataProvider = CGDataProviderCreateWithCFData((__bridge CFDataRef)imageData);
CGImageRef imageRef = CGImageCreateWithPNGDataProvider(dataProvider, NULL, NO, kCGRenderingIntentDefault);
UIImage *image = [UIImage imageWithCGImage:imageRef scale:[[UIScreen mainScreen] scale] orientation:UIImageOrientationUp];

CGDataProviderRelease(dataProvider);
CGImageRelease(imageRef);

Just note that you will need to have two resolutions of the image on the server given the first two lines of my code. Currently the image will appear smaller on retina, larger on non retina screens.

只要注意,在我的代码的前两行中,服务器上需要有图像的两种分辨率。目前,该图像在视网膜上的尺寸较小,在非视网膜屏幕上更大。

#1


5  

The gist is this...

主要内容是这样的……

  1. Use [[UIScreen mainScreen] scale] to ask your server for a standard or @2x image.
  2. 使用[[UIScreen主屏幕]scale]请求服务器提供一个标准的或@2x图像。
  3. Create a CGImageRef from the NSData
  4. 从NSData创建一个CGImageRef
  5. Use the CGImageRef and [[UIScreen mainScreen] scale] to create a UIImage
  6. 使用CGImageRef和[UIScreen主屏幕]scale来创建一个UIImage

The code to do that looks like this:

这样做的代码如下:

NSString *imagePath = @"http://www.interaction-design.org/images/icons/play-button-red-300x300";
imagePath = [imagePath stringByAppendingString:[[UIScreen mainScreen] scale] > 1 ? @"@2x.png": @".png"];
NSData *imageData = [[NSData alloc] initWithContentsOfURL: [NSURL URLWithString:imagePath]];

CGDataProviderRef dataProvider = CGDataProviderCreateWithCFData((__bridge CFDataRef)imageData);
CGImageRef imageRef = CGImageCreateWithPNGDataProvider(dataProvider, NULL, NO, kCGRenderingIntentDefault);
UIImage *image = [UIImage imageWithCGImage:imageRef scale:[[UIScreen mainScreen] scale] orientation:UIImageOrientationUp];

CGDataProviderRelease(dataProvider);
CGImageRelease(imageRef);

Just note that you will need to have two resolutions of the image on the server given the first two lines of my code. Currently the image will appear smaller on retina, larger on non retina screens.

只要注意,在我的代码的前两行中,服务器上需要有图像的两种分辨率。目前,该图像在视网膜上的尺寸较小,在非视网膜屏幕上更大。