1

I noticed that in Safari if I share a page via Twitter, there is a thumbnail generated of the page being shared.

I have searched Google and found that AVAssetImageGenerator package can create video thumbnails. Is there a similar way to create a thumbnail of a webpage?

esqew
  • 42,425
  • 27
  • 92
  • 132
maple
  • 101
  • 1
  • 13

1 Answers1

2

You can create thumbnails of your UIWebViews by using :

UIView *newView = [view snapshotViewAfterScreenUpdates:YES];

or you can use as well :

UIGraphicsBeginImageContextWithOptions(myView.bounds.size, NO, 0);

[myView drawViewHierarchyInRect:view.bounds afterScreenUpdates:YES];

UIImage *image = UIGraphicsGetImageFromCurrentImageContext();

UIGraphicsEndImageContext();

Important! if you want to create a thumbnail of an UIWebView, you can find problems like, you take the screenshot and the page hasnt been loaded completely, so I would recommend to you do it when the page has been loaded or, as I had to do, put a javascript flag to call iOS natively and take the screenshot in this particular moment. You can save the thumbnails, store them using the mechanism you want (coredata for example and have a persistent database to access the information fastly) or you can use a configuration file with the paths to the internal folder inside the application, it´s really up to you. But bear in mind about "when" the UIWebView has loaded the content because sometimes, we take the screenshot and there is nothing in the view and you will get all the time a blank page. Instead of taking the screenshot in : webView:shouldStartLoadWithRequest:navigationType: take it in webViewDidFinishLoad: but bear in mind, it doesnt mean the webpage has been loaded correctly! You can have an ajax event or an external javascript event that uploads content in the screen but the UIWebView can say it has been loaded when it hasnt! so thats the reason to use a javascript flag to call natively an internal function to take the screenshot.

Once you have the screenshot, you will have to resize it to have your thumbnail image. For example, you can use :

+ (UIImage *)imageWithImage:(UIImage *)image scaledToSize:(CGSize)newSize {
    //UIGraphicsBeginImageContext(newSize);
    // In next line, pass 0.0 to use the current device's pixel scaling factor (and thus account for Retina resolution).
    // Pass 1.0 to force exact pixel size.
    UIGraphicsBeginImageContextWithOptions(newSize, NO, 0.0);
    [image drawInRect:CGRectMake(0, 0, newSize.width, newSize.height)];
    UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();    
    UIGraphicsEndImageContext();
    return newImage;
}

(solution found in The simplest way to resize an UIImage?)

But there are several ways to do it. The best in my opinion is to add a category and adapt the functionality in the way you want.

Hope it helps

Community
  • 1
  • 1
AlfuryDB
  • 289
  • 1
  • 4
  • Hi @AlfuryDB , maybe i did not clearly describe my question, i want to get this webpage url without open it. – maple Jul 21 '14 at 15:01
  • Hi, @alfuryDB, I misunderstand `SLComposeViewController`, In fact, when i add a url [twitter addURL:url], then this will be a thumbnail. – maple Jul 22 '14 at 03:35
  • SLComposeViewController, simply gives you access to share information through different social nets but the good point is it´s a native component which give you access and you have just to launch it to share whatever, the OS takes care about the sharing the information ( you can get the response in a callback when the view controller has gone to perform whatever). So for my understanding, you want the url you are passing, converts itself in a thumbnail to be shown in the SLComposeViewController? – AlfuryDB Jul 22 '14 at 11:14
  • You can add an image to that, and this image can be a thumbnail. I know what you mean but Im afraid it doesnt translate the url into a thumbnail automatically, if you want to do that, you can do a middle point by taking a thumbnail of a UIWebView and load it in the image. You can add an image in the next way : [twitter addImage:[UIImage imageNamed:@"my_thumbnail_image.png"]]; considering twitter is an instance of the class SLComposeViewController sure. – AlfuryDB Jul 22 '14 at 11:17
  • yeah, i want the url converts itself in a thumbnail to shown in SLComposeViewController. when i only add url.not add image, the right thumbnail will show the webpage thumbnail. but it show my link a blank page. like this . 'http://news.healtho.com/#/detail/53cbe8a32488b0601b40bfc6`. but if the url like `http://stackoverflow.com/questions/24867575/how-to-create-thumbnail-for-a-webpage-with-ios`. it will show properly. what's the different? – maple Jul 22 '14 at 13:20
  • The way iOS or other systems deal with that, is by natively taking a screenshot in the background and most of the times they interact with javascript as I wrote you before. If you get a blankpage is because when it tries to take the screenshot, it sees the view has been loaded and save that like a thumbnail when in fact, it hasnt been loaded properly – AlfuryDB Jul 22 '14 at 13:55