vue.jpg
先看效果
image.png
---start---
1.先安裝依賴
[傳送門] (http://html2canvas.hertzen.com/)
npm install --save html2canvas
2.引入html2canvas.min.js
3.引入canvas2image.js
[傳送門](https://github.com/hongru/canvas2image/blob/master/canvas2image.js "canvas2image.js")
4.在腳手架public/index.html中引入樣式
image.png
5.開始布局
image.png
6.引入Canvas2image
import Canvas2image from "/public/static/canvas/canvas2image.js"; //根據(jù)自己存放的路徑修改
image.png
7.在按鈕上綁定點擊事件
<el-button
:disabled="disabled"
size="medium"
@click="handleQrcode(Canvas2image)"
type="primary"
class="mar_t20"
>下載二維碼圖片</el-button
>
image.png
8.解構(gòu)出需要的下載的格式
handleQrcode({ saveAsJPEG }) {
this.loading = true;
this.disabled = true;
html2canvas(document.querySelector("#capture"), { useCORS: true }) //useCORS: true 解決圖片跨域問題
.then((canvas) => {
saveAsJPEG(canvas, 400, 600, "diningRoom"); //參數(shù)1:圖片 參數(shù)2:寬 參數(shù)3: 高 參數(shù)4:文件名
this.dialogFormVisible = false;
this.loading = false;
this.disabled = false;
this.$notify({
title: "下載成功",
message: "恭喜您床頭二維碼下載成功",
type: "success",
});
})
.catch((e) => {
console.log(e, "error");
});
},
---end---
好友沒有更新了，后續(xù)還會帶來更多新的內(nèi)容智政，歡迎關(guān)注，希望能夠幫助更多童鞋~~~
