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

其中關(guān)于截屏空白的問(wèn)題（頁(yè)面有下拉的時(shí)候產(chǎn)生），先后查閱了國(guó)內(nèi)外資料后找到了有效解決方案，頗為曲折。

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

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

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

//圖片寫(xiě)到body臨時(shí)存儲(chǔ)
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);

//關(guān)閉
layer.close(index);
});

 

 

//復(fù)制圖片提示
$('.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('復(fù)制成功');
//layer.msg('復(fù)制圖片失敗 請(qǐng)重試');
})

標(biāo)簽：html2canvas

求來(lái)源

項(xiàng)目開(kāi)發(fā)過(guò)程中，你可能會(huì)遇到用戶需要保存當(dāng)前頁(yè)面的內(nèi)容，但是用戶又不想自己通過(guò)手機(jī)系統(tǒng)手動(dòng)截圖；又或者，你想分享當(dāng)前頁(yè)面的內(nèi)容，把它當(dāng)做一個(gè)海報(bào)分享，那這個(gè)時(shí)候就需要通過(guò)程序員來(lái)幫你完成前期操作，這個(gè)時(shí)候就用到了H5快照功能，具體情況如下。

html源碼

<div class="mainBox">
  <div class="contentBox" id="need">
    <img src="images/1.jpg" />
    <div class="mainText1">
      菩提本無(wú)樹(shù)，明鏡亦非臺(tái)。<br>
      佛性常清凈，何處有塵埃！<br>
      身是菩提樹(shù)，心如明鏡臺(tái)。<br>
      明鏡本清凈，何處染塵埃！<br>
      菩提本無(wú)樹(shù)，明鏡亦非臺(tái)。<br>
      本來(lái)無(wú)一物，何處惹塵埃！<br>
      菩提只向心覓，何勞向外求玄？<br>
      聽(tīng)說(shuō)依此修行，西方只在目前！
    </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

首先在頁(yè)面中引入這兩個(gè)js，當(dāng)然，如果你需要用到j(luò)q，同時(shí)還要引入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,       //允許跨域數(shù)據(jù)污染'被污染'的canvas
       taintTest: true,
       scale: 1                      //比例，越大分辨率越高，圖片越小
     }).then(function(canvas) {
        // canvas寬度
        var canvasWidth = $("#need").width();
        // canvas高度
        var canvasHeight = $("#need").height();
            // 調(diào)用Canvas2Image插件
            let w = $("#need").width(); //圖片寬度
            let h = $("#need").height();
            // 將canvas轉(zhuǎn)為圖片
            var img = Canvas2Image.convertToImage(canvas, canvasWidth, canvasHeight);
            // var img = Canvas2Image.convertToJPEG(canvas, canvasWidth, canvasHeight)
            $(".uploadImg").attr("src",img.src);// 渲染圖片，并且加到頁(yè)面中查看效果
            // 保存
            saveFile(img.src, 'richer.png');
    });
  })
// 保存文件函數(shù)
  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>

截取圖片不能顯示問(wèn)題

在項(xiàng)目測(cè)試過(guò)程中，可能有的同學(xué)會(huì)遇到截取圖片，截取成功后文字能顯示，但是圖片顯示不出來(lái)的問(wèn)題。這個(gè)問(wèn)題我在上面的js中也有所標(biāo)注，主要是跨域問(wèn)題。

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

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

網(wǎng)頁(yè)上生成一個(gè)便于用戶分享的精美海報(bào)，或者對(duì)于網(wǎng)頁(yè)內(nèi)容生成截圖，現(xiàn)在已經(jīng)是一個(gè)非常常見(jiàn)的需求，現(xiàn)在怎么實(shí)現(xiàn)呢？

生成海報(bào)很麻煩

生成網(wǎng)頁(yè)截圖和海報(bào)一般都有兩種做法，一是服務(wù)端使用 GD 庫(kù)生成，二是前端使用 Canvas 生成，但是這兩種方法都比較麻煩。

服務(wù)端通過(guò) GD 庫(kù)去生成的話，首先要去查 GD 庫(kù)相關(guān)的大量函數(shù)，然后圖片的坐標(biāo)，文字的換行等等都要仔細(xì)去算，一點(diǎn)點(diǎn)修改，都要重新算一遍，非常難受。

而前端使用 Canvas 生成的話，就需要熟悉 Canvas 的語(yǔ)法，它的 API 比較復(fù)雜，有大量的方法和屬性，讓很多希望通過(guò) Canvas 畫(huà)圖的同學(xué)望而卻步。

那么有沒(méi)有什么簡(jiǎn)單的方法生成海報(bào)呢？不需要學(xué)習(xí)太多新知識(shí)，利用現(xiàn)有的知識(shí)就實(shí)現(xiàn)的呢？

html2canvas

有的，html2canvas 就是這樣的一個(gè) Javascript 庫(kù)，無(wú)需大量學(xué)習(xí)，只需要會(huì) HTML 和 CSS 即可，html2canvas 可以把網(wǎng)頁(yè)元素或者整個(gè)網(wǎng)頁(yè)轉(zhuǎn)換為一個(gè) Canvas 對(duì)象或者圖片。

html2canvas 是通過(guò)在瀏覽器端解析 HTML 和 CSS 來(lái)實(shí)現(xiàn)這個(gè)功能，不需要任何服務(wù)器端的支持，然后也不需要對(duì) Canvas 相關(guān)的方法深入的學(xué)習(xí)，只需要懂簡(jiǎn)單的 HTML 和 CSS 即可。

總結(jié)一下，下面是 html2canvas 的一些主要優(yōu)勢(shì)：

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

但是也需要注意的是，由于 html2canvas 是通過(guò)解析 HTML 和 CSS 來(lái)生成截圖的，所以它無(wú)法完美地復(fù)制所有的渲染效果，特別是一些復(fù)雜的 CSS 樣式和動(dòng)態(tài)內(nèi)容。

幾行代碼

首先加載 html2canvas 對(duì)應(yīng)的 JavaScript 庫(kù)：

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

然后選擇對(duì)應(yīng)的網(wǎng)頁(yè)元素生成屏幕截圖：

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

就是這么簡(jiǎn)單，幾行代碼就實(shí)現(xiàn)。