Vue+Element實現(xiàn)頁面生成快照截圖
更新時間：2024年03月06日 16:56:26 作者：殺豬刀-墨林
這篇文章主要為大家詳細介紹了Vue如何結合Element實現(xiàn)頁面生成快照截圖功能,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下
頁面部分:
<template>
<div ref="homePage" class="home-container rel">
<div class="snap-box abs">
<div title="頁面快照" class="z-pointer" @click="newSnapShot()">
<img :src="snapCamera" alt="快照生成">
</div>
</div>
<el-image-viewer
v-if="imgUrl"
:on-close="()=>{imgUrl=''}"
:url-list="[imgUrl]" />
</div>
</template>
js代碼部分：
/**
* 圖片blob轉圖片base64
* @param blob
*/
export const blobToBase64 = (blob) => {
return new Promise((resolve, reject) => {
const fileReader = new FileReader();
fileReader.onload = (e) => {
resolve(e.target.result);
};
// readAsDataURL
fileReader.readAsDataURL(blob);
fileReader.onerror = () => {
reject(new Error('blobToBase64 error'));
};
});
}
import html2canvas from 'html2canvas';
import { blobToBase64 } from '@/utils/helper.js';
export default {
name: 'Home',
components: {
'el-image-viewer': () => import('element-ui/packages/image/src/image-viewer'),
},
data() {
return {
tooltipRemark,
loading: false,
imgUrl: '',
};
},
methods: {
// 生成快照
newSnapShot() {
this.loading = true;
const { ClipboardItem } = window;
html2canvas(this.$refs.homePage).then((canvas) => {
// 將canvas轉為blob對象
canvas.toBlob(async (blob) => {
if (typeof (navigator.clipboard) === 'undefined' && !ClipboardItem) {
await blobToBase64(blob).then((res) => {
this.imgUrl = res;
this.$message({
message: '快照生成成功',
type: 'success',
duration: 2000,
});
}).catch(() => {
this.$message({
message: '快照生成失敗',
type: 'warning',
duration: 2000,
});
}).finally(() => {
this.loading = false;
});
return;
}
// 將blob對象放入剪切板item中
// eslint-disable-next-line no-undef
const data = [new ClipboardItem({ [blob.type]: blob })];
// 寫入剪切板,成功會執(zhí)行resolve,失敗則走reject
await navigator.clipboard.write(data).then(() => {
this.$message({
message: '已保存到粘貼板',
type: 'success',
duration: 2000,
});
this.loading = false;
}, () => {
this.$message({
message: '保存截圖失敗',
type: 'warning',
duration: 2000,
});
this.loading = false;
});
}, 'image/png');
}).catch(() => {
this.loading = false;
});
},
},
};知識補充
除了上文的內容，小編還為大家整理了vue結合element實現(xiàn)截圖上傳功能的示例代碼，希望對大家有所幫助
下載相關依賴（element依賴省略）
代碼如下（示例）：
yarn add vue-cropper -S
main.js 里面引入并使用
代碼如下（示例）：
import vueCropper from 'vue-cropper' // 截圖插件 Vue.use(vueCropper)
多處使用考慮抽離插件（子組件）
代碼如下（示例）：
<template>
<div>
<el-upload
ref="upload"
list-type="picture-card"
:action="upurl"
:data="updataData"
:headers="uploadHeader"
:on-change="changeUpload"
:auto-upload="false"
:show-file-list="false"
>
<img v-if="inputForm.pic" :src="inputForm.pic" class="avatar upimg" />
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
<!-- vueCropper 剪裁圖片實現(xiàn)-->
<el-dialog :title="title" :visible.sync="dialogVisible" append-to-body>
<div class="cropper-content">
<div class="cropper" style="text-align: center">
<vueCropper
ref="cropper"
:img="option.img"
:outputSize="option.size"
:outputType="option.outputType"
:info="true"
:full="option.full"
:canMove="option.canMove"
:canMoveBox="option.canMoveBox"
:original="option.original"
:autoCrop="option.autoCrop"
:fixed="option.fixed"
:fixedNumber="option.fixedNumber"
:centerBox="option.centerBox"
:infoTrue="option.infoTrue"
:autoCropWidth="option.autoCropWidth"
:autoCropHeight="option.autoCropHeight"
:fixedBox="option.fixedBox"
></vueCropper>
</div>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="finish">確認</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { uploadPictureBase64 } from "../api/upimg";
// import local from "@/utils/local";
export default {
props:{
title:{
type:String,
}
},
data() {
return {
upurl: "boxes-manage/file/uploadPictureBase64",
inputForm: {
pic: "",
},
dialogVisible: false,
uploadHeader: { Authorization: "" },
updataData: {
file: "",
fileType: "",
}, //上傳參數(shù)
option: {
img: "", // 裁剪圖片的地址
info: true, // 裁剪框的大小信息
outputSize: 1, // 裁剪生成圖片的質量
outputType: "", // 裁剪生成圖片的格式
canScale: false, // 圖片是否允許滾輪縮放
autoCrop: true, // 是否默認生成截圖框
autoCropWidth: 400, // 默認生成截圖框寬度
autoCropHeight: 400, // 默認生成截圖框高度
fixedBox: false, // 固定截圖框大小 不允許改變
fixed: true, // 是否開啟截圖框寬高固定比例
fixedNumber: [1, 1], // 截圖框的寬高比例
full: true, // 是否輸出原圖比例的截圖
canMoveBox: true, // 截圖框能否拖動
original: false, // 上傳圖片按照原始比例渲染
centerBox: true, // 截圖框是否被限制在圖片里面
infoTrue: true, // true 為展示真實輸出圖片寬高 false 展示看到的截圖框寬高
},
};
},
methods: {
// 上傳按鈕 限制圖片大小 -----------------------------------------------------------
changeUpload(file) {
let testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
const isJPG = testmsg === "jpg";
const isPNG = testmsg === "png";
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG && !isPNG) {
this.$message.error("上傳頭像圖片只能是 JPG 或 PNG 格式!");
return;
}
this.$nextTick(() => {
this.option.img = file.url;
this.dialogVisible = true;
});
},
// 點擊裁剪
async finish() {
await this.$refs.cropper.getCropData((data) => {
let newdataff=data.split(";")[1].split(",")[1]
this.updataData.file = this.base64toFile(data).name;
this.updataData.fileType = this.base64toFile(data).name.split(".")[1];
uploadPictureBase64({
pictureBase64: newdataff,
fileName: this.updataData.file,
fileType: this.updataData.fileType,
}).then((res) => {
console.log(res);
if (res.code == "0000") {
this.$message({
message: "上傳圖片成功",
type: "success",
});
this.dialogVisible = false; // 隱藏蒙城
this.$emit("childFn", res.data); // 與父組件進行交互
this.inputForm.pic = res.data; // 將返回的圖片替換在頁面上
} else {
this.$message.error(res.message);
}
});
});
},
base64toFile(dataurl, filename = new Date().getTime()) {
let arr = dataurl.split(",");
let mime = arr[0].match(/:(.*?);/)[1];
let suffix = mime.split("/")[1];
let bstr = atob(arr[1]);
let n = bstr.length;
let u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], `${filename}.${suffix}`, {
type: mime,
});
},
},
};
</script>
<style scoped>
/* 截圖 */
.cropper {
width: auto;
height: 300px;
}
.upimg {
height: 146px;
width: 146px;
}
</style>
父組件里面使用
代碼如下（示例）：
1.引入截圖子組件
import Cropperimg from "../components/vueCropperimg.vue";
2.注冊截圖子組件
components: {
Cropperimg,
},
3.使用截圖子組件
<Cropperimg title="商品圖片裁剪" @childFn="parentFn" />
4.獲取子組件上傳的文件
parentFn(res) {
console.log(res);
},
實際項目效果
上傳前
上傳開始截圖
截圖后
到此這篇關于Vue+Element實現(xiàn)頁面生成快照截圖的文章就介紹到這了,更多相關Vue Element截圖內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家介紹了項目開發(fā)中husky的使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
vue element table中自定義一些input的驗證操作
這篇文章主要介紹了vue element table中自定義一些input的驗證操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了Vue3請求攔截器里如何配置token,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
<keep-alive> 是一個抽象組件,它自身不會渲染一個DOM元素,也不會出現(xiàn)在組件的父組件鏈中,下面這篇文章主要給大家介紹了關于vue3利用keepAlive緩存頁面的相關資料,需要的朋友可以參考下2022-11-11
本篇文章主要介紹了Vue計算屬性的使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
這篇文章主要介紹了基于vue實現(xiàn)圖片驗證碼倒計時60s功能,本文通過截圖實例代碼的形式給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-12-12
這篇文章主要介紹了Vue3.0靜態(tài)文件存放路徑與引用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
最近寫大屏,用到elementplus中的el-table,為了讓顯示效果好看一點,需要把表格的白色背景調整為透明,與整個背景融為一體,本文給大家介紹ElementPlus表格中的背景透明解決方案,感興趣的朋友一起看看吧2023-10-10
這篇文章主要為大家詳細介紹了如何利用Vue3實現(xiàn)一個可左右滑動操作組件，文中的示例代碼講解詳細，對我們學習Vue有一定幫助，感興趣的可以學一下2022-11-11
隨著Vue.js越來越火,Vue.js 的相關插件也在不斷的被貢獻出來,數(shù)不勝數(shù),這篇文章主要給大家介紹了關于Vue插件實現(xiàn)過程中遇到的問題,需要的朋友可以參考下2021-08-08