vue 實現網頁截圖功能詳解
阿新 • • 發佈:2021-11-19
最近專案有一個需求,需要上傳圖片,但是客戶上傳的圖片大小不一,所以我們需要規定客戶的圖片比例,但又需要是客戶所需的,所以就想到了截圖
實現效果
我們的架構是,所以用的是一個vue的截圖插件
安裝外掛:npm install vue-cropper --save-dev
引入元件
import Vue from 'vue'; import { VueCropper } from "vue-cropper"; Vue.use(VueCropper)
核心代www.cppcns.com碼
<div> <span class="spanStyle">產品圖片:</span> <!--整個圖片預覽的div--> <div style="display:flex;padding-left: 300px;"> <div class="info-item" style="flex:1;margin-left:-160px;margin-top: -25px"> <label class="btn btn-orange theme-bg-gray theme-white w90" for="uploads" style="display:inline-block;width: 70px;padding: 0;text-align: center;line-height: 28px;" >選擇圖片</label> <input type="file" id="uploads" :value="imgFile" style="position:absolute; clip:rect(0 0 0 0);" accept="image/png,image/jpeg,image/gif,image/jpg" @change="uploadImg($event,1)"> <div class="line" style="margin-left: -280px;margin-top: 85px;"> <div class="cropper-content" style="margin-top:-60px;margin-left:160px;"> <div class="cropper"> <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" :autoCropWidth="option.autoCropWidth" :autoCropHeight="option.autoCropHeight" :fixedBox="option.fixedBox" @realTime="realTime" ></vueCropper> </div> <!--擷取完的圖片展示div--> <div style="margin-left:700px;"> <div class="show-preview" :style="{'width': '300px','height':'150px','overflow': 'hidden','margin-left': '-650px'}"> <div :style="previews.div" > <img :src="previews.url" :style="previews.img"> </div> </div> </div> </div> </div> </div> </div> </div>
預覽的方法
data (){ return{ headImg:'',//剪下圖片上傳 crap: false,previews: {},option: { img: '',outputSize:1,//剪下後的圖片質量(0.1-1) full: false,//輸出原圖比例截圖 props名full outputType: 'png',canMove: true,original: false,canMoveBox: true,autoCrop: true,autoCropWidth: 300,autoCropHeight: 150,fixedBox: true },fileName:'',//本機檔案地址 downImg: '#',imgFile:'',uploadImgRelaPath:'',//上傳後的圖片的地址(不帶伺服器域名) } },methods:{ // 實時預覽函式 realTime(data) { console.log('realTime') this.previews = data },//選擇本地圖片 uploadImg(e,num) { console.log('uploadImg'); var _this = this; //上傳圖片 var file = e.target.files[0] _this.fileName = file.name; if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) { alert('圖片型別必須是.gif,jpeg,jpg,png,bmp中的一種') return false } var reader = new FileReader(); readlMhioer.onload =(e) => { let data; if (typeof e.target.result === 'object') { // 把Array Buffer轉化為blob 如果是base64不需要 data = window.URL.createObjectURL(new Blob([e.target.result])) } else { data = e.target.result } if (num === 1) { _this.option.img = data } else if (num === 2) { _this.example2.img = data } } http://www.cppcns.com// // 轉化為blob reader.readAsArrayBuffer(file); } }
然後我們要獲取擷取完之後的圖片,是通過Cropper的回撥函式來獲取它的圖片,這裡我們獲取的是我們轉為blob格式的圖片(不轉顯示不了)
這邊是因為後臺就是用file型別接收的,所以我需要再把blob轉為file,然後才用formData上傳檔案
productAdd(){
this.$refs.cropper.getCropBlob((data) => {
//這個data就是我們擷取後的blob圖片
let formData = new FormData();
lMhio //獲取檔名,因為在轉成file裡面不能用this.所以需要用一個變數來賦值
var name=this.fileName
var file = new File([data],name,{type: data.type,lastModified: Date.now()});
formData.append("files",file)
new Promise((resolve,reject) => {
productAdd(formData).then(response => {
if (response.code == 20000) {
Dialog.alert({
title: '提示',message: '儲存成功!'
}).then(() => {
this.back('/productInfo')
});
}
}).catch(error => {
reject(error)
})
})
})
}
實際運用到自己的專案中還需改動,比如編輯圖片還需回顯,上傳多張剪下的圖片等等…
以上就是vue 實現截圖功能詳解的詳細內容,更多關於vue 網頁截圖的資料請關注我們其它相關文章!