Vue圖片裁剪功能實現(xiàn)代碼
更新時間：2022年08月24日 10:23:26 作者：Silent1376
這篇文章主要介紹了Vue圖片裁剪功能，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
一、效果展示：
1、表單的圖片上傳項：
- 新增時默認一個空白Input框
- 更新時展示以往上傳存放的圖片，
- 點擊【查看】瀏覽完整大小
- 點擊【刪除】清空src地址，重新上傳新照片
2、裁剪框頁面
- 先選擇裁剪的圖片
- 右側(cè)展示裁剪區(qū)域
- 支持放大縮小，圖片旋轉(zhuǎn)
- 點擊【上傳圖片】調(diào)用后臺上傳接口進行上傳
二、代碼部分
1、首先安裝Vue-Cropper，基于此組件的基礎上開發(fā)的裁剪頁面
npm install vue-cropper "vue-cropper": "^0.5.8"
2、裁剪彈窗的組件編寫：
<template>
<div
v-loading="loading"
class="cropper-content"
>
<div class="cropper-box">
<div class="cropper">
<vue-cropper
ref="cropper"
:img="option.img"
:output-size="option.outputSize"
:output-type="option.outputType"
:info="option.info"
:can-scale="option.canScale"
:auto-crop="option.autoCrop"
:auto-crop-width="autoCropWidth"
:auto-crop-height="autoCropHeight"
:fixed="option.fixed"
:fixed-number="option.fixedNumber"
:full="option.full"
:fixed-box="option.fixedBox"
:can-move="option.canMove"
:can-move-box="option.canMoveBox"
:original="option.original"
:center-box="option.centerBox"
:height="option.height"
:info-true="option.infoTrue"
:max-img-size="option.maxImgSize"
:enlarge="option.enlarge"
:mode="option.mode"
@realTime="realTime"
@imgLoad="imgLoad"
/>
</div>
<!--底部操作工具按鈕-->
<div class="footer-btn">
<div class="scope-btn">
<label
class="btn"
for="uploads"
>選擇圖片</label>
<input
id="uploads"
type="file"
style="position:absolute; clip:rect(0 0 0 0);"
accept="image/png, image/jpeg, image/gif, image/jpg"
@change="selectImg($event)"
>
<el-button
size="mini"
type="danger"
plain
icon="el-icon-zoom-in"
@click="changeScale(1)"
>放大</el-button>
<el-button
size="mini"
type="danger"
plain
icon="el-icon-zoom-out"
@click="changeScale(-1)"
>縮小</el-button>
<el-button
size="mini"
type="danger"
plain
@click="rotateLeft"
>? 左旋轉(zhuǎn)</el-button>
<el-button
size="mini"
type="danger"
plain
@click="rotateRight"
>? 右旋轉(zhuǎn)</el-button>
</div>
<div class="upload-btn">
<el-button
size="mini"
type="success"
@click="uploadImg('blob')"
>上傳圖片<i class="el-icon-upload" /></el-button>
</div>
</div>
</div>
<!--預覽效果圖-->
<div class="show-preview">
<div
:style="previews.div"
class="preview"
>
<img
:src="previews.url"
:style="previews.img"
>
</div>
</div>
</div>
</template>
<script>
import { VueCropper } from 'vue-cropper'
import { uploadFile } from '@/api/smrz/setting'
import { regularFileName } from '@/utils'
export default {
name: 'CropperImage',
components: {
VueCropper
},
/* props: ['name2'],*/
props: {
autoCropWidth: { // 默認生成截圖框?qū)挾?
type: Number,
default: 410
},
autoCropHeight: { // 默認生成截圖框高度
type: Number,
default: 150
},
busType: {
type: String,
default: 'advertPic'
}
},
data() {
return {
loading: false,
name: this.Name,
previews: {},
option: {
img: '', // 裁剪圖片的地址
outputSize: 1, // 裁剪生成圖片的質(zhì)量(可選0.1 - 1)
outputType: 'jpeg', // 裁剪生成圖片的格式（jpeg || png || webp）
info: true, // 圖片大小信息
canScale: true, // 圖片是否允許滾輪縮放
autoCrop: true, // 是否默認生成截圖框
// autoCropWidth: 410, 默認生成截圖框?qū)挾?
// autoCropHeight: 150, 默認生成截圖框高度
fixed: false, // 是否開啟截圖框?qū)捀吖潭ū壤?
fixedNumber: [1.53, 1], // 截圖框的寬高比例
full: true, // false按原比例裁切圖片，不失真
fixedBox: true, // 固定截圖框大小，不允許改變
canMove: true, // 上傳圖片是否可以移動
canMoveBox: true, // 截圖框能否拖動
original: true, // 上傳圖片按照原始比例渲染
centerBox: false, // 截圖框是否被限制在圖片里面
height: true, // 是否按照設備的dpr 輸出等比例圖片
infoTrue: false, // true為展示真實輸出圖片寬高，false展示看到的截圖框?qū)捀?
maxImgSize: 3000, // 限制圖片最大寬度和高度
enlarge: 1, // 圖片根據(jù)截圖框輸出比例倍數(shù)
mode: '230px 150px' // 圖片默認渲染方式
},
randomFileName: ''
}
},
methods: {
// 初始化函數(shù)
imgLoad(msg) {
console.log('工具初始化函數(shù)=====' + msg)
},
// 圖片縮放
changeScale(num) {
num = num || 1
this.$refs.cropper.changeScale(num)
},
// 向左旋轉(zhuǎn)
rotateLeft() {
this.$refs.cropper.rotateLeft()
},
// 向右旋轉(zhuǎn)
rotateRight() {
this.$refs.cropper.rotateRight()
},
// 實時預覽函數(shù)
realTime(data) {
this.previews = data
},
// 選擇圖片
selectImg(e) {
const file = e.target.files[0]
if (!/\.(jpg|jpeg|png|JPG|PNG)$/.test(e.target.value)) {
this.$message({
message: '圖片類型要求：jpeg、jpg、png',
type: 'error'
})
return false
}
// 轉(zhuǎn)化為blob
const reader = new FileReader()
reader.onload = (e) => {
let data
if (typeof e.target.result === 'object') {
data = window.URL.createObjectURL(new Blob([e.target.result]))
} else {
data = e.target.result
}
this.option.img = data
}
console.log(`file.name => ${file.name}`)
// 轉(zhuǎn)化為base64
reader.readAsDataURL(file)
},
// 上傳圖片
uploadImg(type) {
const _this = this
if (type === 'blob') {
// 獲取截圖的blob數(shù)據(jù)
this.$refs.cropper.getCropBlob(async(data) => {
_this.loading = true
const formData = new FormData()
// formData.append('file', data, this.createNewFileName())
// if (this.autoCropWidth === 100) {
// formData.append('subDir', 'exchange')
// } else if (this.autoCropHeight === 80) {
// formData.append('subDir', 'task')
// } else {
// formData.append('subDir', 'rotate')
// }
_this.randomFileName = this.createNewFileName()
// 給blob對象的filename屬性賦值文件名
formData.append('rpc', data, _this.randomFileName)
// 給參數(shù)賦值文件名
formData.append('fileName', _this.randomFileName)
formData.append('busType', _this.busType)
/* this.fileName = data.file.name
formData.append('fileName', this.fileName)*/
// 調(diào)用axios上傳
/* const { data: res } = await _this.$http.post('/api/file/imgUpload', formData)*/
uploadFile(formData).then(res => {
/* this.handleSuccess(res)*/
if (res.code === 200) {
_this.$message({
message: '圖片上傳成功',
type: 'success'
})
// const data = res.data.replace('[', '').replace(']', '').split(',')
// const imgInfo = {
// name: 'DX.jpg',
// url: res.data.agentUrl,
// storeUrl: res.data.storeUrl,
// uploadResult: res.data.uploadResult
// }
// _this.$emit('uploadImgSuccess', imgInfo)
// 添加隨機生成的文件名
res.fileName = _this.randomFileName
_this.$emit('uploadImgSuccess', res)
} else {
_this.$message({
message: '文件服務異常，請聯(lián)系管理員！',
type: 'error'
})
}
}).finally(() => {
_this.loading = false
})
})
/* if (flag) {
this.$message.warning('請選擇圖片')
}*/
}
},
createNewFileName() {
// const now = Date.now()
// const fileName = now + '-' + Math.ceil(Math.random() * 100)
// return fileName + '.jpg'
const fileName = regularFileName()
return fileName + '.jpg'
}
}
}
</script>
<style scoped lang="scss">
.cropper-content {
display: flex;
display: -webkit-flex;
justify-content: flex-end;
.cropper-box {
flex: 1;
width: 100%;
.cropper {
width: auto;
height: 300px;
}
}
.show-preview {
flex: 1;
-webkit-flex: 1;
display: flex;
display: -webkit-flex;
justify-content: center;
.preview {
overflow: hidden;
border: 1px solid #67c23a;
background: #cccccc;
}
}
}
.footer-btn {
margin-top: 30px;
display: flex;
display: -webkit-flex;
justify-content: flex-end;
.scope-btn {
display: flex;
display: -webkit-flex;
justify-content: space-between;
padding-right: 10px;
}
.upload-btn {
flex: 1;
-webkit-flex: 1;
display: flex;
display: -webkit-flex;
justify-content: center;
}
.btn {
outline: none;
display: inline-block;
line-height: 1;
white-space: nowrap;
cursor: pointer;
-webkit-appearance: none;
text-align: center;
-webkit-box-sizing: border-box;
box-sizing: border-box;
outline: 0;
-webkit-transition: 0.1s;
transition: 0.1s;
font-weight: 500;
padding: 8px 15px;
font-size: 12px;
border-radius: 3px;
color: #fff;
background-color: #409eff;
border-color: #409eff;
margin-right: 10px;
}
}
</style>需要更改成自己的上傳接口：
import { uploadFile } from '@/api/smrz/setting'后臺接口參數(shù)如下，要求表單方式上傳
/**
* 上傳附件
*
* @param file 文件流(注意帶文件后綴,統(tǒng)一使用.jpg結(jié)尾)
* @param fileName 文件名稱(唯一性)
* @param busType 業(yè)務類型(具體值參考ApiConstants類中FILE_開頭常量說明)
* @author wangkun
* @createTime 2022/7/19 17:18
*/
@PostMapping(value = "/file/upload", consumes = "multipart/form-data")
public RpcResult uploadFile(@RequestParam(value = "rpc") MultipartFile file, @RequestParam(value = "fileName") String fileName, @RequestParam(value = "busType") String busType) {在uploadImg函數(shù)這里，使用FormData對象包裝請求參數(shù)
注意append方法，要給文件對象指定文件名，必須要入?yún)⒌谌齻€參數(shù)
否則默認名稱blob
按實際接口對應調(diào)整參數(shù)即可
const formData = new FormData()
_this.randomFileName = this.createNewFileName()
// 給blob對象的filename屬性賦值文件名
formData.append('rpc', data, _this.randomFileName)
// 給參數(shù)賦值文件名
formData.append('fileName', _this.randomFileName)
formData.append('busType', _this.busType)
uploadFile(formData)其它自定義參數(shù)，通過Props屬性傳入此組件
props: {
autoCropWidth: { // 默認生成截圖框?qū)挾?
type: Number,
default: 410
},
autoCropHeight: { // 默認生成截圖框高度
type: Number,
default: 150
},
busType: {
type: String,
default: 'advertPic'
}
},文件名的生成方法，就是當前時間按單位數(shù)值排序
實際使用根據(jù)業(yè)務實際情況改寫
export function regularFileName() {
const now = new Date()
const year = now.getFullYear()
const month = digitFix(now.getMonth() + 1)
const dayOfMonth = digitFix(now.getDate())
const hour = digitFix(now.getHours())
const minute = digitFix(now.getMinutes())
const second = digitFix(now.getSeconds())
const millSecond = now.getMilliseconds()
return `${year}${month}${dayOfMonth}${hour}${minute}${second}${millSecond}`
}const fileName = `${regularFileName()}3、【圖片上傳表單項】組件編寫
<template>
<div class="cropper-app">
<el-form
ref="ruleForm"
:model="formValidate"
:rules="ruleValidate"
label-width="110px"
class="demo-ruleForm"
>
<el-form-item
:label="label"
prop="mainImage"
>
<div class="list-img-box">
<div
v-if="formValidate.mainImage !== ''"
class="img_div"
style="height: 100px;"
>
<img
:src="formValidate.mainImage"
alt="圖片找不到"
>
<a href="#" rel="external nofollow" >
<div class="mask">
<h3 style="">
<i
class="el-icon-zoom-in"
@click="clickImg('zoom-in')"
/>
<i
class="el-icon-delete"
@click="clickImg('delete')"
/>
</h3>
</div>
</a>
</div>
<div
v-else
class="upload-btn"
style="height: 100px;width: 200px"
@click="uploadPicture('flagImg')"
>
<i
class="el-icon-plus"
style="font-size: 30px;"
/>
<!--<span>封面設置</span>-->
</div>
</div>
<input
v-model="formValidate.mainImage"
type="hidden"
placeholder="請?zhí)砑臃饷?
>
</el-form-item>
</el-form>
<!-- 剪裁組件彈窗 -->
<el-dialog
v-if="cropperModel"
title="圖片剪切"
:visible.sync="cropperModel"
width="1020px"
center
append-to-body
>
<cropper-image
v-if="cropperModel"
ref="child"
:auto-crop-width="autoCropWidth"
:auto-crop-height="autoCropHeight"
:bus-type="busType"
@uploadImgSuccess="handleUploadSuccess"
/>
</el-dialog>
<!--查看大封面-->
<el-dialog
title=""
:visible.sync="imgVisible"
center
append-to-body
>
<img
v-if="imgVisible"
:src="imgUrl"
style="width: 100%"
alt="查看"
>
</el-dialog>
</div>
</template>
<script>
import CropperImage from '@/components/CropperImage'
import { commonsDownloadAPI } from '@/api/smrz/setting'
export default {
name: 'Tailoring',
components: { CropperImage },
props: {
label: {
type: String,
default: '上傳圖片'
},
url: {
type: String
},
autoCropWidth: { // 默認生成截圖框?qū)挾?
type: Number,
default: 410
},
autoCropHeight: { // 默認生成截圖框高度
type: Number,
default: 150
},
isSignFlag: {
type: Boolean,
default: false
},
busType: {
type: String,
default: 'busType'
}
},
data() {
var imageUrl2 = (rule, value, callback) => {
if (!this.isSignFlag) {
return callback()
}
if (!value) {
return callback(new Error('請輸上傳圖片'))
}
return callback()
}
return {
formValidate: {
mainImage: ''
},
ruleValidate: {
mainImage: [
/* { required: true, message: '請上傳圖片', trigger: 'blur' }*/
{ required: true, validator: imageUrl2, trigger: 'blur' }
]
},
// 裁切圖片參數(shù)
cropperModel: false,
cropperName: '',
imgUrl: '',
imgVisible: false,
dialogImageUrl: '',
dialogVisible: false
}
},
created() {
this.formValidate.mainImage = this.url
this.imgUrl = this.url
},
methods: {
validateForm() {
this.$refs['ruleForm'].validate((valid) => {
this.$emit('validVal', valid)
})
},
// 封面設置
uploadPicture(name) {
this.cropperName = name
this.cropperModel = true
},
// 圖片上傳成功后
async handleUploadSuccess(data) {
// this.formValidate.mainImage = data.url
// 圖片回顯
const { data: res2, code } = await commonsDownloadAPI({
fileName: data.fileName,
busType: 'advertPic'
})
const imgBase64 =
code !== 200
? '-1' : `data:image/jpeg;base64,${res2.data}`
this.formValidate.mainImage = imgBase64
/* switch (data.name) {
case 'flagImg':
this.formValidate.mainImage = data.url
console.log('最終輸出' + data.name)
console.log('最終輸出2' + this.formValidate)
break
}*/
this.cropperModel = false
this.$emit('uploadSuccess', data)
},
clickImg(val) {
if (val === 'delete') {
this.formValidate.mainImage = ''
this.$emit('deleteImage')
} else if (val === 'zoom-in') {
//
this.imgUrl = this.formValidate.mainImage
this.imgVisible = true
}
}
}
}
</script>
<style scoped>
.upload-list-cover {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 0 40px;
align-items: center;
background: rgba(0, 0, 0, 0.6);
opacity: 0;
transition: opacity 1s;
}
.cover_icon {
font-size: 30px;
}
.upload-btn {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
border: 1px solid #cccccc;
border-radius: 5px;
overflow: hidden;
box-shadow: 0 0 1px #cccccc;
}
.upload-btn:hover {
border: 1px solid #69b7ed;
}
.upload-btn i {
margin: 5px;
}
.img_div img {
width: 200px !important;
height: 100px !important;
/* margin: 20px 400px 0 400px;
position: relative;
width: 531px;
height: 354px;*/
}
.mask {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 100px;
background: rgba(101, 101, 101, 0.6);
color: #ffffff;
opacity: 0;
}
.mask h3 {
text-align: center;
line-height: 60px;
}
.img_div a:hover .mask {
opacity: 0.8;
}
</style>表單項組件需要引入
1、裁剪組件
2、圖片下載接口
import CropperImage from '@/components/CropperImage'
import { commonsDownloadAPI } from '@/api/smrz/setting'3、表單項設置了自定義校驗
var imageUrl2 = (rule, value, callback) => {
if (!this.isSignFlag) {
return callback()
}
if (!value) {
return callback(new Error('請輸上傳圖片'))
}
return callback()
}就是檢查src有沒有地址或者base64資源，校驗觸發(fā)的效果：
4、圖片上傳后的回調(diào)處理：
上傳成功后，回到表單頁需要立即回顯之前上傳的圖片
所以需要調(diào)用圖片下載接口來獲取剛剛上傳的資源，
在這個回調(diào)方法中實現(xiàn)，因為下載接口提供的資源不是圖片地址，而是返回Base64編碼
這里我寫的是base64編碼資源的回顯處理
實際使用根據(jù)業(yè)務實際情況改寫
// 圖片上傳成功后
async handleUploadSuccess(data) {
// this.formValidate.mainImage = data.url
// 圖片回顯
const { data: res2, code } = await commonsDownloadAPI({
fileName: data.fileName,
busType: 'advertPic'
})
const imgBase64 =
code !== 200
? '-1' : `data:image/jpeg;base64,${res2.data}`
this.formValidate.mainImage = imgBase64
/* switch (data.name) {
case 'flagImg':
this.formValidate.mainImage = data.url
console.log('最終輸出' + data.name)
console.log('最終輸出2' + this.formValidate)
break
}*/
this.cropperModel = false
this.$emit('uploadSuccess', data)
},4、業(yè)務功能引用
引入表單項
import Tailoring from '@/components/Tailoring'
聲明組件，并注入?yún)?shù)
<div class="ant-upload-preview">
<tailoring
v-if="true"
ref="child"
label="廣告圖片"
:is-sign-flag="true"
:url="url"
:bus-type="businessType"
:auto-crop-height="80"
:auto-crop-width="410"
@uploadSuccess="uploadSuccess"
@validVal="validVal"
/>
</div>- url是一開始加載組件需要回顯的圖片資源地址
- isSignFlag變量用來輔助自定義校驗的，為false時直接放行校驗，所以默認寫死true
- bus-type是自定義的業(yè)務參數(shù)
- auto-crop的寬高用來配置裁剪的寬高，預覽大小和裁剪大小合并使用這兩個參數(shù)
上傳成功的回調(diào)，uploadSuccess，可以在組件自定義需要的參數(shù)
這里是以圖片名稱作為記錄主鍵，所以要傳入這個文件名
實際使用根據(jù)業(yè)務實際情況改寫
async uploadSuccess(res) {
console.log(`上傳結(jié)果 res -> ${JSON.stringify(res)}`)
const fileName = res.fileName
this.newId = fileName.substring(0, fileName.lastIndexOf('.'))
},校驗值，應該是返回校驗后的src值，但我這里沒用上，所以不執(zhí)行任何邏輯
validVal(val) {},
要觸發(fā)【裁剪表單項】校驗，使用
this.$refs.child.validateForm()
到此這篇關(guān)于Vue圖片裁剪功能支持的文章就介紹到這了,更多相關(guān)vue圖片裁剪內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue-cli3 karma單元測試的實現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
Vue中使用Echarts響應式布局flexible.js+rem適配方案詳解
這篇文章主要介紹了Vue中使用Echarts響應式布局flexible.js+rem適配方案詳解,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-01-01
Vue 使用beforeEach實現(xiàn)登錄狀態(tài)檢查功能
今天小編就為大家分享一篇Vue 使用beforeEach實現(xiàn)登錄狀態(tài)檢查功能，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
這篇文章主要介紹了用electron打包vue項目中的報錯問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
vue中的vue-print-nb如何實現(xiàn)頁面打印
這篇文章主要介紹了vue中的vue-print-nb如何實現(xiàn)頁面打印，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
淺談VueJS SSR 后端繪制內(nèi)存泄漏的相關(guān)解決經(jīng)驗
這次我想給大家介紹的內(nèi)存泄漏的定位方法，并非工具的使用。而是一些經(jīng)驗的總結(jié)，也就是我所知道的 VueJS SSR 中最容易出現(xiàn)內(nèi)存泄漏的地方，非常具有實用價值，需要的朋友可以參考下2018-12-12
這篇文章主要介紹了vue中touch和click共存的解決方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要給大家介紹了關(guān)于vue3錨點定位兩種實現(xiàn)的相關(guān)資料,說到錨點定位,很多人第一時間會想到 a標簽,但是a標簽實現(xiàn)的錨點定位并不是那么的完美,需要的朋友可以參考下2023-07-07
vue3 + vite + ts 中使用less文件全局變量的操作方法
這篇文章主要介紹了vue3 + vite + ts 中使用less文件全局變量的操作方法,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-03-03
這篇文章主要為大家介紹了用了babel是否還需要polyfill的原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02