js實現截圖
阿新 • • 發佈:2019-02-15
前言:藉助html2canvas實現
1.html部分
需要截圖的容器
<div class="js-capture hide"></>
截圖生成的圖片存放的位置,注意:img沒有src的時候不要寫src屬性,不然會重新重新整理頁面
<img alt="" class="js-Base64Img hide">
js部分 function generatePicture(cb) { 圖片是一禎一禎載入的,為了確保圖片載入完再截圖,放在延時載入器裡 setTimeout(() => { getBase64($('.js-capture')[0], function(data) { $('.js-Base64Img').attr('src', data); if (cb) { cb(); } }); }, 1000); } ready是所以資源載入完畢之後才執行 $(() => { 截圖之前把截圖區域顯示,隱藏狀態下不可截圖 $('.js-capture').removeClass('hide'); generatePicture(() => { 截圖之後把截圖區域給隱藏掉 $('.js-capture').addClass('hide'); $('.js-Base64Img').removeClass('hide'); }); })
3.截圖相關
注意點:背景圖片某些手機無法截圖,截圖區域中的圖片不能跨越,不同機型識別二維碼的能力不同,要想全部識別,設計設計頁面應當簡單
import html2canvas from 'html2canvas'; function DPR() { if (window.devicePixelRatio && window.devicePixelRatio > 1) { return window.devicePixelRatio; } return 1; } function parseValue(value) { return parseInt(value, 10); } export default function getBase64(el, callback) { const dom = el; const box = window.getComputedStyle(dom); const width = parseValue(box.width); const height = parseValue(box.height); const scaleBy = DPR(); const canvas = document.createElement('canvas'); canvas.width = width * scaleBy; canvas.height = height * scaleBy; canvas.style.width = `${width}px`; canvas.style.height = `${height}px`; const context = canvas.getContext('2d'); context.scale(scaleBy, scaleBy); html2canvas(dom, { canvas, }).then(c => { 把canvas轉位base64 callback(c.toDataURL('image/png') || ''); });