使用帶有PNG擴展名的html2canvas捕獲網頁截圖

如何使用帶有png擴展名的html2canvas捕獲網頁截圖並將其保存在本地文件夾中？使用帶有PNG擴展名的html2canvas捕獲網頁截圖

我試過下面的代碼。它保存了屏幕截圖，文件名爲download，但沒有png/jpeg擴展名。任何方式使它工作？我也想將截圖保存到本地文件夾。

<html> 
<head> 
<meta charset="utf-8"/> 
<title>test2</title> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script> 
<script type="text/javascript" src ="http://code.jquery.com/jquery-1.9.0.min.js"></script> 
<script type="text/javascript" src="html2canvas.js?rev032"></script> 
<script type="text/javascript"> 

    $(window).load(function(){ 

     $('#load').click(function(){ 

       html2canvas($('#testdiv'), { 
        onrendered: function (canvas) { 
         var img = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); 
         window.location.href = img; 
        } 
       }); 

     }); 
}); 

</script>  
</head> 
<body> 
    <div id="testdiv"> 
      <h1>Testing</h1> 
      <h4>One column:</h4> 
      <table border="1"> 
      <tr> 
       <td>100</td> 
      </tr> 
      </table> 
     <br/> 
    </div> 
    <input type="button" value="Save" id="load"/> 
</body> 
</html>

來源

2014-01-23 Abhi

var save = document.createElement('a'); 
     save.href = data; 
     save.target = '_blank'; 
     save.`enter code here`download = 'fileName'; 

     var event = document.createEvent('Event'); 
     event.initEvent('click', true, true); 
     save.dispatchEvent(event); 
     (window.URL || window.webkitURL).revokeObjectURL(save.href);

來源

2014-02-19 07:12:25 Arun

 $(window).load(function(){ 

      $('#load').click(function(){ 

        html2canvas($('#testdiv'), { 
         onrendered: function (canvas) { 
          var img = canvas.toDataURL("image/png","image/octet-stream"); 
          url = getImage(dataImage); 
          window.location.href = img; 
         } 
        }); 

      }); 
    }); 



function getImage(dataImage) { 

    //var encodedData = window.btoa(html); 
    var urls = ''; 
    var Data = 
     { 
      file: dataImage, 

     } 


    $.ajax({ 
     url: "/ColorMyTile/GetUserPatternImage", 
     dataType: 'json', 
     contentType: 'application/json; charset=utf-8', 
     type: 'POST', 
     async:false, 
     //processData: false, 

     data: JSON.stringify(Data), 


     success: function (response) { 


      urls = response; 


     } 
    }); 
    return urls; 
}

---這裏是流轉換爲圖像的C＃代碼....

[HttpPost] 
    public JsonResult GetUserPatternImage(string file) 
    { 



     string dirPath = Server.MapPath("~//Images//EmailPattern//"); 

     string base64 = file.Substring(file.IndexOf(',') + 1); 
     base64 = base64.Trim('\0'); 
     var length = base64.Length; 
     byte[] data = Convert.FromBase64String(base64); 
     UserPattern objPattern = new UserPattern(); 
     string imgSRC = ""; 

     string Alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; 
     const int CharactersCount = 10; 
     var rng = System.Security.Cryptography.RandomNumberGenerator.Create(); 
     byte[] buffer = new byte[4]; 
     char[] chars = new char[CharactersCount]; 
     //string[] charsColor = model.color.Split(','); 
     //string[] charsID = model.ids.Split(','); 


     for (int i = 0; i < chars.Length; i++) 
     { 
      rng.GetBytes(buffer); 
      int nxt = BitConverter.ToInt32(buffer, 0); 
      int index = nxt % Alphabet.Length; 
      if (index < 0) index += Alphabet.Length; 
      chars[i] = Alphabet[index]; 
     } 
     string ImgName = new string(chars); 

     using (MemoryStream ms = new MemoryStream(Convert.FromBase64String(base64))) 
     { 
      using (Bitmap bm2 = new Bitmap(ms)) 
      { 
       Color backColor = bm2.GetPixel(0, 0); 
       bm2.MakeTransparent(backColor); 
       imgSRC = dirPath + ImgName + ".jpg"; 
       bm2.Save(imgSRC); 

      } 
     } 
     ImgName = ImgName + ".jpg"; 



     return Json(ImgName, JsonRequestBehavior.AllowGet); 

    }

來源

2014-09-19 11:59:26

使用帶有PNG擴展名的html2canvas捕獲網頁截圖

回答

相關問題