將網頁儲存為圖片形式程式碼例項

admin發表於2017-03-31
網頁

本章節介紹一下如何將網頁儲存為圖片格式。

雖然當前大多數瀏覽器都有這樣的功能，但是有時候還是需要人為的使用程式碼實現。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
body{
  color:red;
}
img{
  margin-top:100px;
  width:1024px;
}
</style>
<script src="demo/js/js/html2canvas.js"></script>
<script>
(function() {
  window.onload = function(){
    html2canvas(document.body, {
      "logging": true, //Enable log (use Web Console for get Errors and Warnings)
      "onrendered": function(canvas) {
        var img = new Image();
        img.onload = function() {
          img.onload = null;
          document.body.appendChild(img);
        };
        img.onerror = function() {
          img.onerror = null;
          if(window.console.log) {
            window.console.log("Not loaded image from canvas.toDataURL");
          } 
          else {
            alert("Not loaded image from canvas.toDataURL");
          }
        };
        img.src = canvas.toDataURL("image/png");
      }
    });
  };
})();
</script>
</head>
<body>
<div>螞蟻部落歡迎您</div>
</body>

可以將網頁生成一個圖片並追加到網頁中，當然實際應用中並沒有這麼簡單，程式碼根據自己的需要改造即可。

上面的功能是通過html2canvas.js外掛實現的，具體用法可以百度查詢。

相關文章