在前端的vue頁面實現最簡單的截圖:
第一步安裝html2canvas組件:
npm install html2canvas --save
第二步導入頁面:
import html2canvas from'html2canvas'
第三步定義自我截圖調用的方法(例如的方法為barPhoto):那你需要截圖你調用此方法就行
private barPhoto() {
//指定在500毫秒后執行toImage
setTimeout(this.toImage, 500);
}
第四步定義頁面元素轉換圖片的方法:
private toImage() {
// 第一個參數是需要生成截圖的元素,第二個是自己需要配置的參數,寬高等
html2canvas(this.$refs.imageTofile, {
backgroundColor: null,
useCORS: true // 如果截圖的內容里有圖片,可能會有跨域的情況,加上這個參數,解決文件跨域問題
}).then(canvas => {
let url = canvas.toDataURL("image/png");
this.htmlUrl = url;
// 把生成的base64位圖片上傳到服務器,生成在線圖片地址
this.sendUrl();
});
}
第五步圖片上傳服務器:
private sendUrl() {
// 如果圖片需要formData格式,就自己組裝一下,主要看后台需要什么參數
const formData = new FormData();
formData.append("base64", this.company.fileUrl);
formData.append("userId", 123);
formData.append("pathName", "pdf");
this.$ajax({
url: apiPath.common.uploadBase,
method: "post",
data: formData
}).then(res => {
if (res.code && res.data) {
return;
}
});
}
第六步頁面div標簽的內容:
在你想要截取內容的div標簽里加上 ref="imageTofile",
接着就是你想要展示截圖效果的div標簽:
<div>
<img
style="width: 100%;height: 100%;"
class="real_pic"
:src="htmlUrl"
crossorigin="anonymous"
/>
</div>
附加內容:
如果你想下載剛才的截圖:
第一步:有一個點擊下載的標簽:
<div class="download" @click="downloadCodeImg">點擊下載</div>
第二步:調用方法即可:
//下載圖片
private downloadCodeImg() {
console.log("下載圖片");
var a = document.createElement("a");
a.download = name ||"圖片"; // 設置圖片地址
a.href = this.htmlUrl;
a.click();
}
完美的結局總是很少,上述截圖步驟少了htmlUrl的定義了:private htmlUrl: string = "";
此方法可能存在很多不足ps(我用來截超圖地圖就沒成功!)應該可以滿足一些簡單的截圖了.