mozilla开发笔记:生成网页缩略图

    从firefox1.5开始，gecko就支持HTML标签(基于 WHATWG canvas specification规范)，它可以用来在网页上绘图、呈现UI元素等。gecko的canvas标签支持drawWindow功能，我们可以用来生成网页的缩略图。

    下面的一段C＋＋代码可以用来生成Canvas标签以及用来绘图的上下文（目前只支持2D绘图）。

    nsCOMPtr<nsIDOMElement> htmlElem;
    rv = doc->CreateElement( NS_LITERAL_STRING("canvas"), getter_AddRefs(htmlElem) );

    nsIDOMNode *added = nsnull;
    rv = parentNode->AppendChild( htmlElem, &added );
 
    nsCOMPtr<nsIDOMHTMLCanvasElement> canvasNode( do_QueryInterface(htmlElem, &rv) );
 
    canvasNode->SetWidth( m_canvasSize.x() );
    canvasNode->SetHeight( m_canvasSize.y() );
    canvasNode->SetAttribute(NS_LITERAL_STRING("style"),
                             NS_LITERAL_STRING("border: 1px solid green; margin:5px;"));

    nsCOMPtr<nsISupports> intf;
    rv = canvasNode->GetContext(NS_LITERAL_STRING("2d"), getter_AddRefs(intf) );
   
    nsCOMPtr<nsIDOMCanvasRenderingContext2D> canvasContext( do_QueryInterface(intf, &rv) );   


一旦获得canvasContext，就可以调用drawWindow将已经打开的页面渲染到canvas中。

canvasContext->Save();
float scale = m_canvasSize.x()/(float)w > m_canvasSize.y()/(float)h?

    m_canvasSize.y()/(float)h : m_canvasSize.x()/(float)w;
canvasContext->Scale( scale, scale );                
rv = canvasContext->DrawWindow( win, 0, 0, w, h, NS_LITERAL_STRING("rgba(0,0,0,0)") );
canvasContext->Restore();

这些都比较简单，然后就是如何遍历当前打开的窗口：

nsCOMPtr<nsIWindowWatcher> watcher( do_GetService(NS_WINDOWWATCHER_CONTRACTID) );
if ( watcher ) {
    nsCOMPtr<nsISimpleEnumerator> i;
    rv = watcher->GetWindowEnumerator( getter_AddRefs(i) );
        
    PRBool b;
    i->HasMoreElements( &b );
    while( b != PR_FALSE ) {
        nsISupports *itf;
        i->GetNext( &itf );
        nsCOMPtr<nsIDOMWindow> win( do_QueryInterface(itf, &rv) );
        if ( NS_FAILED(rv) ) {
            i->HasMoreElements( &b );
            continue;
        }
        // do something


        i->HasMoreElements( &b );
    }
}

你也可以用javascript来写上面的代码，但是注意这些代码是特权代码，也就是只能在扩展里使用的。

这些生成缩略图不好的地方在于事先要有nsIDOMWindow的指针，如果你想对还没有打开的网页生成缩略图，就不适用了。