html2canvas 把h5網頁保存爲圖片
想把一個網頁得某些元素,繪製成圖片保存,有些數據是接口動態加載的,所以不能UI給到圖片,需要我們把api的數據也繪製到圖片上
html2canvas這個插件可以完美解決,以下是使用方法和一些坑
html2canvas : http://html2canvas.hertzen.com/
- index.html
<section class="one-yuan-popup share-popup">
<div class="light-box"></div>
<div class="container">
<div class="header">
<img src="<%= static_url %>/images/webview/one_yuan/hand_icon.png" alt="">
<span>長按分享給好友或保存邀請卡片</span>
</div>
<div class="content">
<img src="<%= avatar %>" class="one-share-avatar" alt="">
<img src="<%= static_url %>/images/webview/one_yuan/page_share.png" alt="">
<p class="one-share-title"><span id="nickname"><%= decodeURIComponent(nickname) %></span>邀請您</p>
<p class="one-share-desc">1元解鎖私人圖書館</p>
<img src="<%= qrcode.qrCodeUrl %>" alt="" class="one-share-code">
</div>
</div>
</section>
- index.scss
.one-yuan-popup {
position: fixed;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
z-index: 501;
.light-box {
display: block;
position: fixed;
width: 100%;
height: 100%;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, .85);
cursor: pointer;
}
.content {
position: relative;
width: 77vw;
height: 131vw;
padding-top: 0;
background: #fff;
border-radius: 8px;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
z-index: 1002;
text-align: center;
}
}
整體彈窗風格就是如下圖所示,我們要保存的是綠色圈出來的區域,箭頭指向得都是api數據,並且要全屏顯示
期待保存得圖片是這樣得
- index.js
let canvas2 = document.createElement('canvas'), // 創建canvas
_canvas = document.querySelector('.share-popup .content'), //此處可換body,或div等 我們一般可以放繪製的元素
w = parseInt(window.getComputedStyle(_canvas).width),
h = parseInt(window.getComputedStyle(_canvas).height);
//將canvas畫布放大若干倍,然後盛放在較小的容器內,就顯得不模糊了
canvas2.width = w * 2;
canvas2.height = h * 2;
canvas2.style.width = w + 'px';
canvas2.style.height = h + 'px';
let context = canvas2.getContext('2d'),
rect = $('.share-popup .content').get(0).getBoundingClientRect(); //獲取元素相對於視察的偏移量
context.scale(2, 2);
context.translate(-rect.left,-rect.top); //設置context位置,值爲相對於視窗的偏移量負值,讓圖片復位
// =====================================注意注意注意=================================
// 必須先scale,再traslate,如果不是繪製全屏的話,這兩句可以不加,正常繪製就會把margin區域也繪製上,如果需要不繪製margin區域,而且這個元素就根據窗口大小而居中,我們很不好控制,所以我們再這裏先獲取 getBoundingClientRect() 根據元素偏移,最後繪製出來全屏的,
html2canvas(document.querySelector('.share-popup .content'), {
canvas: canvas2,
useCORS: true, // 允許圖片跨域
width: 584, // 繪製圖片的寬 2倍
height: 1188 // 繪製圖片的高 2倍
}).then(function(canvas) {
$('.share-canvas').css('display','block').attr('src', canvas.toDataURL());
});