html2canvas 能夠實現在前端直接對頁面進行截圖。其實現思路是html2canvas指令碼將頁面元素渲染為canvas，通過讀取DOM並將不同的樣式應用到這些元素上實現。它不需要服務端的操作，只在前端即可完成。
一、在專案中的使用
1. 安裝html2canvas
npm install --save html2canvas
複製程式碼2. 在專案中使用
// 在需要使用的頁面中先引入html2canvas
import html2canvas from 'html2canvas'
複製程式碼然後在頁面中使用，如下：
在template模板中，設定要生成圖片的內容，本文中要生成圖片的是ref="capture"的div，然後將生成的canvas圖片展示在ref="addImage"的div中
<template>
<div class="content" ref="addImage">
<div ref="capture" class="image-content">
<p>html2canvas 能夠實現在前端直接對頁面進行截圖。</p>
<p>其實現思路是html2canvas指令碼將頁面元素渲染為canvas，通過讀取DOM並將不同的樣式應用到這些元素上實現。</p>
<p>它不需要服務端的操作，只在前端即可完成。</p>
</div>
<div @click="generatorImage" class="img-btn">生成圖片</div>
</div>
</template>
複製程式碼然後在js檔案中，generatorImage方法實現html到圖片的轉換,此時即可看到頁面尾部已經新增了生成的圖片內容,也可以對圖片轉為base64編碼並下載到本地。
generatorImage () {
html2canvas(this.$refs.capture).then(canvas => {
this.$refs.addImage.append(canvas);
let link = document.createElement('a');
link.href = canvas.toDataURL();
link.setAttribute('download', '圖片canvas.png');
link.style.display = 'none';
document.body.appendChild(link);
link.click();
})
}
複製程式碼
二、html2canvas存在跨域資源無法載入
如果要生成圖片的dom元素中，包含有跨域資源，比如img標籤中的跨域圖片,通過上述方法生成的圖片中，img的內容是空白的，無法生成，這是因為canvas對於圖片資源的同源限制。
解決方法： html2canvas可以設定配置項，來實現圖片的載入
1.allowTaint設定成true，即可實現圖片的展示
allowTaint為true是允許canvas被汙染,一旦畫布汙染，就無法讀取其資料，不能使用畫布的toBolb(),toDataURL()或getImageData()方法，否則會出錯.
如果我們只是展示在頁面上，不通過js轉為檔案下載到本地（下載需要呼叫canvas.toDataURL()方法），則可以使用該方法。（頁面中右鍵可以將這張圖片完好的儲存到本地）
2.通過服務端設定CORS
解決跨域最常用的方法是跨域資源共享，我們將圖片伺服器的response header設定
access-control-allow-origin: *，
複製程式碼即可解決跨域圖片的訪問，同時，配合html2canvas的配置項useCORS: true，即可實現canvas圖片的轉化和下載。 由於我們自己專案的檔案伺服器暫時沒有設定CORS，所以此處例子採用淘寶的圖片
<template>
<div class="content" ref="addImage">
<div ref="capture" class="image-content">
<div class="parent">
<img src='https://user-gold-cdn.xitu.io/2018/12/18/167c06ce8cf413d1?w=476&h=260&f=webp&s=11552'>
</div>
<div class="parent">
<img src='https://user-gold-cdn.xitu.io/2018/12/18/167c06ce8d058da5?w=140&h=140&f=png&s=563'>
</div>
<div class="parent">
<img src='https://user-gold-cdn.xitu.io/2018/12/18/167c06ce8da5216c?w=160&h=280&f=webp&s=10926'>
</div>
</div>
<div @click="generatorImage" class="img-btn">生成圖片</div>
</div>
</template>
複製程式碼js檔案中：
generatorImage () {
html2canvas(this.$refs.capture,{useCORS: true}).then(canvas => {
this.$refs.addImage.append(canvas);
// 通過a標籤下載到本地
let link = document.createElement('a');
link.href = canvas.toDataURL();
link.setAttribute('download', '圖片canvas.png');
link.style.display = 'none';
document.body.appendChild(link);
link.click();
})
}
複製程式碼