WebKit検証(3) - ビューを画像に保存

WebKitのビューはどんな構成になっているのか。
ADC のドキュメントから図を拝借してきた。

WebKit Objective-C Programming Guide: Core WebKit Classes


なるほど WebViewは フレームで構成されていてこれらが入れ子になった構造になっている。
表示されている内容を画像に落とすにはどうしたら良いのだろうか？

ネットで調べるとすぐに出てきそうな気もするが、今回は検証も兼ねて少し自分で調べてみよう。
まず WebView 自体の表示内容はどうなっているのか。WebViewは NSView のサブクラスになっているので、表示内容を画像として書き出すことができる。

とりあえず作ってみよう。

まず Interface Builderで右下に「Save」ボタンを追加する。


AppControllerクラスに #saveImage: メソッドを追加し、「Save」ボタンの Actionへ接続しておく。

- (IBAction)saveImage:(id)sender;

#saveImage: の実装は次の通り。とりあえず NSWebView の表示内容をそのままPNG形式の画像ファイル（test.png）へ保存するコードを書いてみた。

<- (IBAction)saveImage:(id)sender
{
 NSBitmapImageRep* bitmap =
  [_web_view bitmapImageRepForCachingDisplayInRect:[_web_view bounds]];
 [_web_view cacheDisplayInRect:[_web_view bounds]
     toBitmapImageRep:bitmap];

 NSData* outdata = [bitmap representationUsingType:NSPNGFileType
             properties:[NSDictionary dictionary]];

 NSArray *paths = NSSearchPathForDirectoriesInDomains(
   NSDesktopDirectory, NSUserDomainMask, YES);
 NSString* path = [NSString stringWithFormat:@"%@/test.png",
       [paths objectAtIndex:0], nil];
 
 [outdata writeToFile:path atomically:YES];
}

NSView の表示内容を画像に落とす方法は Cocoaの日々：波紋（その１４） 前後を参照のこと。


さて実行してみよう。米国アップルのホームページを表示させてみた。


読み込みが終わったら「Save」ボタンを押す。デスクトップ上にファイルができた。なにやら画像が出来ている様子。プレビューで開いてみよう。


出た。HTML全体ではなく、ビューの表示領域だけだが画像に落とすことができた。


うーむ。こんなに簡単にいくとは思ってなかった。何事もやってみるものだ。

(ひさびさの)サンプルコード：WebKitSample-1.zip