From 69a1b3bf45738f048361ee4ccb6bdc64fce35720 Mon Sep 17 00:00:00 2001
From: MrShi <1878285526@qq.com>
Date: 星期三, 12 三月 2025 11:31:46 +0800
Subject: [PATCH] 更新
---
admin/src/components/common/ImageCropper.vue | 232 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 232 insertions(+), 0 deletions(-)
diff --git a/admin/src/components/common/ImageCropper.vue b/admin/src/components/common/ImageCropper.vue
new file mode 100644
index 0000000..5ef77d9
--- /dev/null
+++ b/admin/src/components/common/ImageCropper.vue
@@ -0,0 +1,232 @@
+<template>
+ <div class="iconShot">
+ <div class="icon-dialog">
+ <div class="clip">
+ <div class="img" ref="img">
+ <vue-cropper
+ ref="cropper"
+ :img="imgSrc"
+ :width="options.width"
+ :height="options.height"
+ :canScale="options.canScale"
+ :autoCrop="options.autoCrop"
+ :canMove="options.canMove"
+ :output-size="options.outputSize"
+ :centerBox="options.centerBox"
+ :autoCropWidth="options.autoCropWidth"
+ :autoCropHeight="options.autoCropHeight"
+ @realTime="realTime"
+ ></vue-cropper>
+ </div>
+ <div class="previews">
+ <img style="width: 150px;height: 150px;border-radius1: 50%;object-fit: cover" :src="cutImgSrc" alt="鍥剧墖">
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+import { VueCropper } from 'vue-cropper'
+import {upload} from "@/api/system/common";
+export default {
+ name: 'ImageCropper',
+ components: { VueCropper },
+ props: {
+ imgSrc: {
+ type: String,
+ default: ''
+ },
+ // 鍥炴樉涓婃淇濆瓨鐨勬埅鍥剧殑浣嶇疆
+ location: {
+ type: Object,
+ default () {
+ return {}
+ }
+ }
+ // iconItem:{
+ // type:Object,
+ // default(){
+ // return {};
+ // }
+ // }
+ },
+ data () {
+ return {
+ // 瀛︿範鎴浘閫夐」
+ iconForm: {
+ originImgBase64: '',
+ imgBase64: ''
+ // location: "",
+ // matchingName: "",
+ // matchingType: "",
+ // note: "",
+ // picGroupId: "0",
+ // tsId: "",
+ },
+ // 鍌ㄥ瓨鎴浘鍖哄煙鐨勫浘鐗�,鑷繁浼�
+ // imgSrc:'',
+ // 鍌ㄥ瓨鎴浘鍚庣殑鐢熸垚鐨刡ase64鍥剧墖
+ cutImgSrc: '',
+ // cropper鎻掍欢鐨勯厤缃�
+ options: {
+ canScale: false,
+ autoCrop: true,
+ canMove: false,
+ centerBox: true,
+ height: 500,
+ width: 500,
+ outputSize:{width: 500, height: 500 },
+ autoCropWidth: 500,
+ autoCropHeight: 500,
+ fixed: true,
+ fixedNumber: [1, 1]
+ },
+ // 鎴浘妗嗙浉瀵瑰浘鐗囩殑浣嶇疆
+ clipAxis: {},
+ // 鎴浘鍥炴樉鏍囧織,鍙Е鍙戜竴娆″疄鐜板洖鏄撅紝
+ flag: true
+ }
+ },
+ mounted () {
+
+ },
+ watch: {
+ },
+ methods: {
+ getImagecropper(){
+ return this.$refs.cropper
+ },
+ // 瀛︿範鎴浘妗嗗彉鍖栦簨浠�
+ realTime (data) {
+ if (data.h) {
+ // 鑾峰彇鍥剧墖鐩稿瀹瑰櫒鐨勪綅缃�
+ const img = this.$refs.cropper.getImgAxis()
+ // 鑾峰彇鎴浘妗嗙浉瀵瑰鍣ㄧ殑浣嶇疆
+ const clip = this.$refs.cropper.getCropAxis()
+ this.clipAxis.x = clip.x1 - img.x1
+ this.clipAxis.y = clip.y1 - img.y1
+ // 鑾峰彇鎴浘鍥剧墖
+ this.$refs.cropper.getCropData(img => {
+ this.clipAxis.width = data.w
+ this.clipAxis.height = data.h
+ this.cutImgSrc = img
+ })
+ // 鑾峰彇鍘熷浘base64鐨勫浘鐗�
+ // this.imageUrlToBase64(data.url);
+
+ // 鍥炬爣鍒楄〃缂栬緫鍥炴樉(鍒濆鍖栧彧瑙﹀彂涓�娆�)
+ if (this.location.height != undefined && this.flag) {
+ this.$nextTick(() => {
+ // auto crop
+ this.$refs.cropper.goAutoCrop()
+ this.$nextTick(() => {
+ // if cropped and has position message, update crop box
+ this.$refs.cropper.cropOffsertX = this.location.x + img.x1
+ this.$refs.cropper.cropOffsertY = this.location.y + img.y1
+ this.$refs.cropper.cropW = this.location.width
+ this.$refs.cropper.cropH = this.location.height
+
+ // this.iconForm.location=this.iconItem.location;
+ // this.iconForm.matchingName=this.iconItem.matchingName;
+ // this.iconForm.matchingType=this.iconItem.matchingType;
+ // this.iconForm.note=this.iconItem.note;
+ // this.picGroupId=this.iconItem.picGroupId.split(',');
+ // this.iconForm.id=this.iconItem.id;
+ // this.iconForm.tsId=this.iconItem.tsId;
+ this.flag = false
+ })
+ })
+ }
+ }
+ },
+ // 鍘熷浘閫氳繃canvas杞负base64鐨勬牸寮�
+ imageUrlToBase64 (src) {
+ // 涓�瀹氳璁剧疆涓簂et锛屼笉鐒跺浘鐗囦笉鏄剧ず
+ const image = new Image()
+ // 瑙ｅ喅璺ㄥ煙闂
+ image.setAttribute('crossOrigin', 'anonymous')
+ const imageUrl = src
+ image.src = imageUrl
+
+ // image.onload涓哄紓姝ュ姞杞�
+ image.onload = () => {
+ var canvas = document.createElement('canvas')
+ canvas.width = image.width
+ canvas.height = image.height
+ var context = canvas.getContext('2d')
+ context.drawImage(image, 0, 0, image.width, image.height)
+
+ // var quality = 0.8;
+ // 杩欓噷鐨刣ataurl灏辨槸base64绫诲瀷
+ const dataURL = canvas.toDataURL('image/jpeg')// 浣跨敤toDataUrl灏嗗浘鐗囪浆鎹㈡垚jpeg鐨勬牸寮�
+ this.iconForm.originImgBase64 = dataURL
+ }
+ }
+ }
+}
+</script>
+
+<style lang="scss" scoped>
+.iconShot {
+ .icon-dialog {
+ .clip {
+ display: flex;
+ .img {
+ flex: 7.5;
+ height: 500px;
+ //float: left;
+ // display: inline-block;
+ .vue-cropper {
+ background-image: none;
+ }
+ .cropper-move {
+ cursor: default;
+ }
+ .cropper-face.cropper-move {
+ cursor: move;
+ }
+
+ }
+ .previews {
+ //width: 100px;
+ flex: 2.5;
+ //float: right;
+ height: 200px;
+ //position: relative;
+ >img {
+ //position: absolute;
+ //left: 50%;
+ transform: translate(35%, 50px);
+ max-height: 100%;
+ }
+ }
+ }
+
+ }
+ .icon-options {
+ font-size: 12px;
+ font-weight: 200;
+ >.el-row {
+ >.el-col {
+ >.el-row {
+ height: 36px;
+ line-height: 36px;
+ >.el-col:nth-child(1) {
+ font-weight: 600;
+ text-align: right;
+ }
+ .el-col:nth-child(2) {
+ .el-input,.el-select {
+ width: 185px !important;
+ }
+ }
+ >.el-col {
+ padding: 0 10px;
+ }
+ }
+ }
+ }
+ }
+}
+</style>
--
Gitblit v1.9.3