js截屏插件html2canvas+保存到本地整體解決代碼方案

tml2canvas是一個用于html截屏的js插件，在網站切圖項目中不太常見，以至于在遇到問題的時候，能夠被查閱到的有用信息很少，這次是一個很復雜的使用案例，進行了多次的截屏、拼接、再截屏，并且解決了截屏錯位空白問題，增加了保存圖片到本地的有效代碼方案。

其中關于截屏空白的問題（頁面有下拉的時候產生），先后查閱了國內外資料后找到了有效解決方案，頗為曲折。

/*第一次把圖標截圖放到模板里*/
html2canvas(document.querySelector(".tjqx-bars "),{
//height:850,
//y:window.pageYOffset,
}).then(canvas => {

$('#captureimg').html(canvas);

/*第二次把模板整個截圖*/
html2canvas(document.querySelector("#capturetmpl"),{
//height:1240,
//y:window.pageYOffset,
scrollX: 0,
scrollY: -window.scrollY,
}).then(canvas => {
//canvas.setAttribute('id','thecanvas');
$('#capture').html(canvas);

//圖片寫到body臨時存儲
var dataURL = canvas.toDataURL();
$(document.body).data('url', dataURL);

//Canvas2Image.saveAsPNG(canvas);

//var dataURL = canvas.toDataURL("image/png");
//console.log(dataURL);
//$(document.body).data('url', dataURL);
//var tmpUrl = "data:application/octet-stream;base64" + dataURL;
// $('.kzdialog-fz').attr('href', tmpUrl);

//關閉
layer.close(index);
});

 

 

//復制圖片提示
$('.kzdialog-fz').click(function(){

var url = $(document.body).data('url');

$("<a>", {
href: url,
download: "fileName"
})
.on("click", function() {$(this).remove()})
.appendTo("body")[0].click();

//var oCanvas = document.getElementById("thecanvas");
//Canvas2Image.saveAsPNG(oCanvas);



//layer.msg('復制成功');
//layer.msg('復制圖片失敗 請重試');
})

標簽：html2canvas

求來源

項目開發過程中，你可能會遇到用戶需要保存當前頁面的內容，但是用戶又不想自己通過手機系統手動截圖；又或者，你想分享當前頁面的內容，把它當做一個海報分享，那這個時候就需要通過程序員來幫你完成前期操作，這個時候就用到了H5快照功能，具體情況如下。

html源碼

<div class="mainBox">
  <div class="contentBox" id="need">
    <img src="images/1.jpg" />
    <div class="mainText1">
      菩提本無樹，明鏡亦非臺。<br>
      佛性常清凈，何處有塵埃！<br>
      身是菩提樹，心如明鏡臺。<br>
      明鏡本清凈，何處染塵埃！<br>
      菩提本無樹，明鏡亦非臺。<br>
      本來無一物，何處惹塵埃！<br>
      菩提只向心覓，何勞向外求玄？<br>
      聽說依此修行，西方只在目前！
    </div>
    <div class="mainText2">Bodhi has no trees, and a mirror is not a platform.There's nothing in the world, where to get dust!</div>
  </div>
  <div class="btn">下載</div>
  <img src="" class="uploadImg" />
</div>

js源碼

截圖功能需要依賴于canvas2image.js和html2canvas.js

首先在頁面中引入這兩個js，當然，如果你需要用到jq，同時還要引入jquery依賴

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/canvas2image.js"></script>
<script type="text/javascript" src="js/html2canvas.js"></script>
<script type="text/javascript">
  $(".btn").click(function(){
    var need = $("#need").get(0);
    html2canvas(need, {
       useCORS: true,          //允許跨域
       allowTaint: false,       //允許跨域數據污染'被污染'的canvas
       taintTest: true,
       scale: 1                      //比例，越大分辨率越高，圖片越小
     }).then(function(canvas) {
        // canvas寬度
        var canvasWidth = $("#need").width();
        // canvas高度
        var canvasHeight = $("#need").height();
            // 調用Canvas2Image插件
            let w = $("#need").width(); //圖片寬度
            let h = $("#need").height();
            // 將canvas轉為圖片
            var img = Canvas2Image.convertToImage(canvas, canvasWidth, canvasHeight);
            // var img = Canvas2Image.convertToJPEG(canvas, canvasWidth, canvasHeight)
            $(".uploadImg").attr("src",img.src);// 渲染圖片，并且加到頁面中查看效果
            // 保存
            saveFile(img.src, 'richer.png');
    });
  })
// 保存文件函數
  var saveFile = function(data, filename){
      var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
      save_link.href = data;
      save_link.download = filename;
      var event = document.createEvent('MouseEvents');
      event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
      save_link.dispatchEvent(event);
  };

</script>

截取圖片不能顯示問題

在項目測試過程中，可能有的同學會遇到截取圖片，截取成功后文字能顯示，但是圖片顯示不出來的問題。這個問題我在上面的js中也有所標注，主要是跨域問題。

在你設置useCORS: true, 為圖，允許跨域的前提下，你的項目還要運行在環境中才能完全顯示圖片。環境中運行很重要，你可以在本地部署服務，或者放到一個線上的服務器中運行，這樣測試，就是ok了，當然，后續你的項目放在正式環境中，那肯定也是ok的。

搬你想搬，蓋你所需，碼字不易，且行且珍惜！

網頁上生成一個便于用戶分享的精美海報，或者對于網頁內容生成截圖，現在已經是一個非常常見的需求，現在怎么實現呢？

生成海報很麻煩

生成網頁截圖和海報一般都有兩種做法，一是服務端使用 GD 庫生成，二是前端使用 Canvas 生成，但是這兩種方法都比較麻煩。

服務端通過 GD 庫去生成的話，首先要去查 GD 庫相關的大量函數，然后圖片的坐標，文字的換行等等都要仔細去算，一點點修改，都要重新算一遍，非常難受。

而前端使用 Canvas 生成的話，就需要熟悉 Canvas 的語法，它的 API 比較復雜，有大量的方法和屬性，讓很多希望通過 Canvas 畫圖的同學望而卻步。

那么有沒有什么簡單的方法生成海報呢？不需要學習太多新知識，利用現有的知識就實現的呢？

html2canvas

有的，html2canvas 就是這樣的一個 Javascript 庫，無需大量學習，只需要會 HTML 和 CSS 即可，html2canvas 可以把網頁元素或者整個網頁轉換為一個 Canvas 對象或者圖片。

html2canvas 是通過在瀏覽器端解析 HTML 和 CSS 來實現這個功能，不需要任何服務器端的支持，然后也不需要對 Canvas 相關的方法深入的學習，只需要懂簡單的 HTML 和 CSS 即可。

總結一下，下面是 html2canvas 的一些主要優勢：

無需后端支持：html2canvas 完全在客戶端運行，無需任何服務器端的支持。這使得它非常適合在各種環境中使用，包括靜態網頁和單頁應用。
靈活且強大：你可以指定截圖的元素，包括整個網頁或者特定的 DOM 元素。此外，html2canvas 還支持多種 CSS 屬性，包括 z-index、overflow、CSS transforms 和 CSS filters 等。
跨瀏覽器兼容性：html2canvas 支持所有主流的瀏覽器，包括 Chrome、Firefox、Safari 和 IE11+。
豐富的功能：html2canvas 提供了一系列的選項和API，使得你可以對截圖過程進行深度定制，包括修改截圖的尺寸、忽略特定元素、添加背景顏色等。
源碼開放：html2canvas 是開源的，你可以查看和修改它的源代碼，甚至為它貢獻代碼。

但是也需要注意的是，由于 html2canvas 是通過解析 HTML 和 CSS 來生成截圖的，所以它無法完美地復制所有的渲染效果，特別是一些復雜的 CSS 樣式和動態內容。

幾行代碼

首先加載 html2canvas 對應的 JavaScript 庫：

<script type='text/javascript' src='https://cdn.staticfile.org/html2canvas/1.4.1/html2canvas.js'></script>

然后選擇對應的網頁元素生成屏幕截圖：

html2canvas(document.querySelector("#capture")).then(canvas => {
    document.body.appendChild(canvas)
});

就是這么簡單，幾行代碼就實現。

在線咨詢

上一篇：html5前端設計簡歷模板
下一篇：html中如何給圖片添加點擊事件的詳解

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商