生成並下載網頁的屏幕截圖，而不損失樣式

我想生成並下載網頁的屏幕截圖而不損失樣式。我有一個網頁。在那個網頁上我有一個下載按鈕。當用戶點擊下載按鈕時，整個頁面的屏幕截圖需要在用戶計算機中下載爲圖像。我怎樣才能做到這一點？生成並下載網頁的屏幕截圖，而不損失樣式

請檢查我的代碼

的Index.html

<html> 
<body> 
<link href="style.css" rel="stylesheet"> 
<h1>Scrrenshot</h1> 
<form class="cf"> 
    <div class="half left cf"> 
    <input type="text" id="input-name" placeholder="Name"> 
    <input type="email" id="input-email" placeholder="Email address"> 
    <input type="text" id="input-subject" placeholder="Subject"> 
    </div> 
    <div class="half right cf"> 
    <textarea name="message" type="text" id="input-message" placeholder="Message"></textarea> 
    </div> 
    <input type="submit" value="Submit" id="input-submit"> 
</form> 
<a class="btn btn-success" href="javascript:void(0);" onclick="generate();">Generate Screenshot »</a> 

</body> 



<script> 
(function (exports) { 
    function urlsToAbsolute(nodeList) { 
     if (!nodeList.length) { 
      return []; 
     } 
     var attrName = 'href'; 
     if (nodeList[0].__proto__ === HTMLImageElement.prototype 
     || nodeList[0].__proto__ === HTMLScriptElement.prototype) { 
      attrName = 'src'; 
     } 
     nodeList = [].map.call(nodeList, function (el, i) { 
      var attr = el.getAttribute(attrName); 
      if (!attr) { 
       return; 
      } 
      var absURL = /^(https?|data):/i.test(attr); 
      if (absURL) { 
       return el; 
      } else { 
       return el; 
      } 
     }); 
     return nodeList; 
    } 

    function screenshotPage() { 
     urlsToAbsolute(document.images); 
     urlsToAbsolute(document.querySelectorAll("link[rel='stylesheet']")); 
     var screenshot = document.documentElement.cloneNode(true); 
     var b = document.createElement('base'); 
     b.href = document.location.protocol + '//' + location.host; 
     var head = screenshot.querySelector('head'); 
     head.insertBefore(b, head.firstChild); 
     screenshot.style.pointerEvents = 'none'; 
     screenshot.style.overflow = 'hidden'; 
     screenshot.style.webkitUserSelect = 'none'; 
     screenshot.style.mozUserSelect = 'none'; 
     screenshot.style.msUserSelect = 'none'; 
     screenshot.style.oUserSelect = 'none'; 
     screenshot.style.userSelect = 'none'; 
     screenshot.dataset.scrollX = window.scrollX; 
     screenshot.dataset.scrollY = window.scrollY; 
     var script = document.createElement('script'); 
     script.textContent = '(' + addOnPageLoad_.toString() + ')();'; 
     screenshot.querySelector('body').appendChild(script); 
     var blob = new Blob([screenshot.outerHTML], { 
      type: 'text/html' 
     }); 
     return blob; 
    } 

    function addOnPageLoad_() { 
     window.addEventListener('DOMContentLoaded', function (e) { 
      var scrollX = document.documentElement.dataset.scrollX || 0; 
      var scrollY = document.documentElement.dataset.scrollY || 0; 
      window.scrollTo(scrollX, scrollY); 
     }); 
    } 

    function generate() { 
     window.URL = window.URL || window.webkitURL; 
     window.open(window.URL.createObjectURL(screenshotPage())); 
    } 
    exports.screenshotPage = screenshotPage; 
    exports.generate = generate; 
})(window); 

</script> 

</html>

的style.css

@import "compass/css3"; 

@import url(https://fonts.googleapis.com/css?family=Merriweather); 
$red: #e74c3c; 

*, 
*:before, 
*:after { 
    @include box-sizing(border-box); 
} 

html, body { 
    background: #f1f1f1; 
    font-family: 'Merriweather', sans-serif; 
    padding: 1em; 
} 

h1 { 
    text-align: center; 
    color: #a8a8a8; 
    @include text-shadow(1px 1px 0 rgba(white, 1)); 
} 

form { 
    border: 2px solid blue; 
    margin: 20px auto; 
    max-width: 600px; 
    padding: 5px; 
    text-align: center; 

} 

    input, textarea { 
    border:0; outline:0; 
    padding: 1em; 
    @include border-radius(8px); 
    display: block; 
    width: 100%; 
    margin-top: 1em; 
    font-family: 'Merriweather', sans-serif; 
    @include box-shadow(0 1px 1px rgba(black, 0.1)); 
    resize: none; 

    &:focus { 
     @include box-shadow(0 0px 2px rgba($red, 1)!important); 
    } 
    } 

    #input-submit { 
    color: white; 
    background: $red; 
    cursor: pointer; 

    &:hover { 
     @include box-shadow(0 1px 1px 1px rgba(#aaa, 0.6)); 
    } 
    } 

    textarea { 
     height: 126px; 
    } 
} 


.half { 
    float: left; 
    width: 48%; 
    margin-bottom: 1em; 
} 

.right { width: 50%; } 

.left { 
    margin-right: 2%; 
} 


@media (max-width: 480px) { 
    .half { 
    width: 100%; 
    float: none; 
    margin-bottom: 0; 
    } 
} 


/* Clearfix */ 
.cf:before, 
.cf:after { 
    content: " "; /* 1 */ 
    display: table; /* 2 */ 
} 

.cf:after { 
    clear: both; 
} 

.half.left.cf > input { 
    margin: 5px; 
}

爲此，我所使用的方法http://www.xpertdeveloper.com/2012/10/webpage-screenshot-with-html5-js/]，這裏產生的，但截圖沒有風格也不是下載。請幫忙，有沒有任何jQuery庫可用於此？此

來源

2017-06-12 abilash er

您可以實現這一目標使用下面的JavaScript庫...

html2canvas（採取網頁截圖）
FileSave.js（用於下載截圖爲圖像）

ᴅᴇᴍᴏ

(function(exports) { 
 
    function urlsToAbsolute(nodeList) { 
 
     if (!nodeList.length) { 
 
      return []; 
 
     } 
 
     var attrName = 'href'; 
 
     if (nodeList[0].__proto__ === HTMLImageElement.prototype || nodeList[0].__proto__ === HTMLScriptElement.prototype) { 
 
      attrName = 'src'; 
 
     } 
 
     nodeList = [].map.call(nodeList, function(el, i) { 
 
      var attr = el.getAttribute(attrName); 
 
      if (!attr) { 
 
       return; 
 
      } 
 
      var absURL = /^(https?|data):/i.test(attr); 
 
      if (absURL) { 
 
       return el; 
 
      } else { 
 
       return el; 
 
      } 
 
     }); 
 
     return nodeList; 
 
    } 
 

 
    function screenshotPage() { 
 
     var wrapper = document.getElementById('wrapper'); 
 
     html2canvas(wrapper, { 
 
      onrendered: function(canvas) { 
 
       canvas.toBlob(function(blob) { 
 
        saveAs(blob, 'myScreenshot.png'); 
 
       }); 
 
      } 
 
     }); 
 
    } 
 

 
    function addOnPageLoad_() { 
 
     window.addEventListener('DOMContentLoaded', function(e) { 
 
      var scrollX = document.documentElement.dataset.scrollX || 0; 
 
      var scrollY = document.documentElement.dataset.scrollY || 0; 
 
      window.scrollTo(scrollX, scrollY); 
 
     }); 
 
    } 
 

 
    function generate() { 
 
     screenshotPage(); 
 
    } 
 
    exports.screenshotPage = screenshotPage; 
 
    exports.generate = generate; 
 
})(window);

@import url(https://fonts.googleapis.com/css?family=Merriweather); 
 
$red: #e74c3c; 
 
*, 
 
*:before, 
 
*:after { 
 
    @include box-sizing(border-box); 
 
} 
 

 
html, 
 
body { 
 
    background: #f1f1f1; 
 
    font-family: 'Merriweather', sans-serif; 
 
    padding: 1em; 
 
} 
 

 
h1 { 
 
    text-align: center; 
 
    color: #a8a8a8; 
 
    @include text-shadow(1px 1px 0 rgba(white, 1)); 
 
} 
 

 
form { 
 
    border: 2px solid blue; 
 
    margin: 20px auto; 
 
    max-width: 600px; 
 
    padding: 5px; 
 
    text-align: center; 
 
} 
 

 
input, 
 
textarea { 
 
    border: 0; 
 
    outline: 0; 
 
    padding: 1em; 
 
    @include border-radius(8px); 
 
    display: block; 
 
    width: 100%; 
 
    margin-top: 1em; 
 
    font-family: 'Merriweather', sans-serif; 
 
    @include box-shadow(0 1px 1px rgba(black, 0.1)); 
 
    resize: none; 
 
    &:focus { 
 
     @include box-shadow(0 0px 2px rgba($red, 1)!important); 
 
    } 
 
} 
 

 
#input-submit { 
 
    color: white; 
 
    background: $red; 
 
    cursor: pointer; 
 
    &:hover { 
 
     @include box-shadow(0 1px 1px 1px rgba(#aaa, 0.6)); 
 
    } 
 
} 
 

 
textarea { 
 
    height: 126px; 
 
} 
 

 

 
} 
 
.half { 
 
    float: left; 
 
    width: 48%; 
 
    margin-bottom: 1em; 
 
} 
 
.right { 
 
    width: 50%; 
 
} 
 
.left { 
 
    margin-right: 2%; 
 
} 
 
@media (max-width: 480px) { 
 
    .half { 
 
     width: 100%; 
 
     float: none; 
 
     margin-bottom: 0; 
 
    } 
 
} 
 

 
/* Clearfix */ 
 
.cf:before, 
 
.cf:after { 
 
    content: " "; 
 
    /* 1 */ 
 
    
 
    display: table; 
 
    /* 2 */ 
 
} 
 
.cf:after { 
 
    clear: both; 
 
} 
 
.half.left.cf > input { 
 
    margin: 5px; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script> 
 
<div id="wrapper"> 
 
    <h1>Scrrenshot</h1> 
 
    <form class="cf"> 
 
     <div class="half left cf"> 
 
      <input type="text" id="input-name" placeholder="Name"> 
 
      <input type="email" id="input-email" placeholder="Email address"> 
 
      <input type="text" id="input-subject" placeholder="Subject"> 
 
     </div> 
 
     <div class="half right cf"> 
 
      <textarea name="message" type="text" id="input-message" placeholder="Message"></textarea> 
 
     </div> 
 
     <input type="submit" value="Submit" id="input-submit"> 
 
    </form> 
 
</div> 
 
<a class="btn btn-success" href="javascript:void(0);" onclick="generate();">Generate Screenshot »</a>

來源

2017-06-12 08:52:26

這太棒了！。這是工作。朋友，我們可以提高我們正在下載的圖像的質量？目前圖像清晰度較低。 –

嗯..我認爲這是最高的質量。雖然，你可以參考他們的網站了解更多關於這個 –

謝謝你的朋友。 –

幾個選項要麼使用此

<html> 
<head> 
<title> Download-Button </title> 
</head> 
<body> 
<p> Click the image ! You can download! </p> 
<a download="logo.png" href="http://localhost/folder/img/logo.png" title="Logo title"> 
<img alt="logo" src="http://localhost/folder/img/logo.png"> 
</a> 
</body> 
</html>

或者您可以使用Mordernizr

也許這個作品

<a href="/path/to/image" download> 
    <img src="/path/to/image" /> 
</a>

參考此鏈接藏漢 [1] http://www.w3schools.com/tags/att_a_download.asp

來源

2017-06-12 08:24:49 Saubhagya

不好意思，但是這個解決方案完全錯過了帖子的觀點。其中沒有任何內容顯示如何捕獲瀏覽器窗口的屏幕截圖並將其保存。 – Stevko

生成並下載網頁的屏幕截圖，而不損失樣式

回答

相關問題