javascript'另存爲'彈出

你好javascript gurus :) 我正在一個項目上工作，我正在使用JavaScript代碼來獲取該網站的屏幕截圖。截圖工作正常，並在頁面上很好地呈現。我想要做的不是在頁面上顯示它，我想用屏幕截圖顯示「另存爲」彈出窗口。這裏是當前的代碼，其在頁面上顯示的圖像：javascript'另存爲'彈出

<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; 
           }); 

          }, 
          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>

預先感謝。

來源

2011-08-09 Laziale

因此，您可以使用canvas2image。

我想你可以把你的準備功能：

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

來源

2011-08-09 14:24:14 hughes

謝謝，這工作 – Laziale

javascript'另存爲'彈出

回答

相關問題