JavaScript 'save as' popup

I am working on one project and I am using JavaScript code to get a screenshot of the website.

The screenshot is working fine and is rendered nicely on the page. What I want to do is instead of displaying it on the page, I want to show the 'save as' popup window with the screenshot.

Here is the current code which displays the image on the page:

<script type="text/javascript"> 
    
    var date = new Date();
    var message,
    timeoutTimer,
    timer;
    
    var proxyUrl = "http://html2canvas.appspot.com";
    
    function addRow(table,field,val){
        var tr = $('<tr />').appendTo( $(table));
       
        tr.append($('<td />').css('font-weight','bold').text(field)).append($('<td />').text(val));
        
        
        
    }
    
    function throwMessage(msg,duration){
    
        window.clearTimeout(timeoutTimer);
        timeoutTimer = window.setTimeout(function(){
            message.fadeOut(function(){
                message.remove();   
            });                   
        },duration || 2000);
        $(message).remove();
        message = $('<div />').html(msg).css({
            margin:0,
            padding:10,
            background: "#000",
            opacity:0.7,
            position:"fixed",
            top:10,
            right:10,
            fontFamily: 'Tahoma' ,
            color:'#fff',
            fontSize:12,
            borderRadius:12,
            width:'auto',
            height:'auto',
            textAlign:'center',
            textDecoration:'none'
        }).hide().fadeIn().appendTo('body');
    }
    
    $(function(){
        
        $('ul li a').click(function(e){
            e.preventDefault();
            $('#url').val(this.href);
            $('button').click();                  
        })
        
        var iframe,d;
        
        

        
        $('input[type="button"]').click(function(){
            $(iframe.contentWindow).unbind('load');
            $(iframe).contents().find('body').html2canvas({
                canvasHeight: d.body.scrollHeight,
                canvasWidth: d.body.scrollWidth,
                logging:true
                                    
            });             
            
        });
        
        $('button').click(function(){
            
            $(this).prop('disabled',true);
            var url = $('#url').val();
            $('#content').append($('<img />').attr('src','loading.gif').css('margin-top',40));
            
            var urlParts = document.createElement('a');
            urlParts.href = url;
            
            $.ajax({
                data: {
                    xhr2:false,
                    url:urlParts.href
                    
                },
                url: proxyUrl,
                dataType: "jsonp",
                success: function(html){
                    
                    
                    iframe = document.createElement('iframe');
                    $(iframe).css({
                        'visibility':'hidden'
                    }).width($(window).width()).height($(window).height());
                    $('#content').append(iframe);
                    d = iframe.contentWindow.document; 
                   
                    d.open();
                    
                    $(iframe.contentWindow).load(function(){

                        timer = date.getTime();
                        
                        $(iframe).contents().find('body').html2canvas({
                            canvasHeight: d.body.scrollHeight,
                            canvasWidth: d.body.scrollWidth,
                            logging:true,
                            proxyUrl: proxyUrl,
                            logger:function(msg){
                                $('#logger').val(function(e,i){
                                    return i+"\n"+msg;
                                });
                                
     开发者_JAVA技巧                       },
                            ready: function(renderer) {
                                $('button').prop('disabled',false);
                                $("#content").empty();               
                                var finishTime = new Date();
              
                                var table = $('<table />');  
                                $('#content')
                                .append('<h2>Screenshot</h2>')
                                .append(renderer.canvas)
                                .append('<h3>Details</h3>')
                                .append(table);
                                
                                
                                
                                addRow(table,"Creation time",((finishTime.getTime()-timer)/1000) + " seconds");
                                addRow(table,"Total draws", renderer.numDraws);
                                addRow(table,"Context stacks", renderer.contextStacks.length);
                                addRow(table,"Loaded images", renderer.images.length/2);
                                addRow(table,"Performed z-index reorder", renderer.needReorder);
                                addRow(table,"Used rangeBounds", renderer.support.rangeBounds);
                      


                                throwMessage('Screenshot created in '+ ((finishTime.getTime()-timer)/1000) + " seconds<br />Total of "+renderer.numDraws+" draws performed",4000);
        
        
                         
                            }
                                    
                        });

                    });

                    $('base').attr('href',urlParts.protocol+"//"+urlParts.hostname+"/");
                    html = html.replace("<head>","<head><base href='"+urlParts.protocol+"//"+urlParts.hostname+"/' />");
                    if ($("#disablejs").prop('checked')){
                        html = html.replace(/\<script/gi,"<!--<script");
                        html = html.replace(/\<\/script\>/gi,"<\/script>-->");
                    }
                    // console.log(html);
                    d.write(html);
                    d.close();                         
                }                
            });                                    });                                                                            
    });        
</script> 

---

For that you can use canvas2image.

I guess you could put in your ready function:

ready: function(renderer) {
  ....
  Canvas2Image.saveAsPNG(renderer.canvas);