html2Canvas是一個(gè)比較成熟的開源庫，它能將DOM直接轉(zhuǎn)為Canvas暮刃，省去了使用原生Canvas需要一點(diǎn)一點(diǎn)去繪制的過程。
缺點(diǎn)：它并不支持所有的css屬性，詳情可以參考官方文檔:https://html2canvas.hertzen.com/features/
安裝
npm
npm install --save html2canvas
yarn
yarn add html2canvas
引入
import html2canvas from 'html2canvas' // 引入html2canvas
使用
<div id="qr-section" class="qr-section">
<!需要使用html2canvas繪圖的html部分---->
<vue-qr ref="qrCode" :text="text" width="100" height="100" :logoSrc="logoPath"></vue-qr>
<span class="num">{{ text }}</span>
</div>
toImage(){
window.pageYoffset = 0
document.documentElement.scrollTop = 0
document.body.scrollTop = 0
const canvasBox = document.getElementById('qr-section')
// 第一個(gè)參數(shù)是需要生成截圖的元素,第二個(gè)是自己需要配置的參數(shù),寬高等
html2canvas(canvasBox厦幅，{}).then(canvas => {
// 獲取圖片url
const dataURL = canvas.toDataURL('image/jpg')
if(dataURL ){
// 下載
})
常見參數(shù)配置項(xiàng)
_R8XPT_ZO{DHRI%A8OH)E0G.png
