Vue+Element實現(xiàn)頁面生成快照截圖
更新時間：2024年03月06日 16:56:26 作者：殺豬刀-墨林
這篇文章主要為大家詳細介紹了Vue如何結(jié)合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轉(zhuǎn)圖片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轉(zhuǎn)為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;
});
},
},
};知識補充
除了上文的內(nèi)容，小編還為大家整理了vue結(jié)合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, // 裁剪生成圖片的質(zhì)量
outputType: "", // 裁剪生成圖片的格式
canScale: false, // 圖片是否允許滾輪縮放
autoCrop: true, // 是否默認生成截圖框
autoCropWidth: 400, // 默認生成截圖框?qū)挾?
autoCropHeight: 400, // 默認生成截圖框高度
fixedBox: false, // 固定截圖框大小 不允許改變
fixed: true, // 是否開啟截圖框?qū)捀吖潭ū壤?
fixedNumber: [1, 1], // 截圖框的寬高比例
full: true, // 是否輸出原圖比例的截圖
canMoveBox: true, // 截圖框能否拖動
original: false, // 上傳圖片按照原始比例渲染
centerBox: true, // 截圖框是否被限制在圖片里面
infoTrue: true, // true 為展示真實輸出圖片寬高 false 展示看到的截圖框?qū)捀?
},
};
},
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截圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章介紹了Vue中的生命周期，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-03-03
SSE是圍繞只讀Comet交互推出的API或者模式,SSE 支持短輪詢、長輪詢和HTTP 流,而且能在斷開連接時自動確定何時重新連接,本文重點給大家介紹2023-10-10
uni-app制作小程序?qū)崿F(xiàn)左右菜單聯(lián)動效果
這篇文章主要介紹了uni-app制作小程序?qū)崿F(xiàn)左右菜單聯(lián)動效果,實現(xiàn)步驟和思路都很簡單，今天通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-11-11
vue-cli3自動消除console.log()的調(diào)試信息方式
這篇文章主要介紹了vue-cli3自動消除console.log()的調(diào)試信息方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
three.js是一個用于在Web上創(chuàng)建三維圖形的JavaScript庫,它可以用于創(chuàng)建各種類型的三維場景,包括游戲、虛擬現(xiàn)實、建筑和產(chǎn)品可視化等,下面這篇文章主要給大家介紹了關于如何通過一文帶你了解threejs在vue項目中的基本使用,需要的朋友可以參考下2023-04-04
這篇文章主要介紹了vue數(shù)組雙向綁定問題及$set用法說明，具有很好的參考價值，希望大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要給大家介紹了關于Vue實現(xiàn)返回頂部按鈕的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-10-10
這篇文章主要介紹了使用Vue?CLI配置代碼壓縮、加密和混淆功能,通過配置 vue.config.js 文件，我們可以使用 Vue CLI 輕松實現(xiàn)對 Vue 應用程序代碼的壓縮、加密和混淆，需要的朋友可以參考下2023-06-06
這篇文章主要介紹了Vue下載Excel后報錯,或打不開的解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-02-02
vue2和el-input無法修改和寫入并且不報錯的解決方案
這篇文章主要介紹了vue2和el-input無法修改和寫入并且不報錯的解決方案,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-07-07