nvm, going with vue-picture-cropper
This commit is contained in:
ThatOneCalculator
parent
1c36662813
commit
36fdb35987
3 changed files with 63 additions and 18 deletions
|
|
@ -92,9 +92,9 @@
|
|||
"vite": "4.4.9",
|
||||
"vite-plugin-compression": "^0.5.1",
|
||||
"vue": "3.3.4",
|
||||
"vue-cropper": "^1.1.1",
|
||||
"vue-draggable-plus": "^0.2.6",
|
||||
"vue-isyourpasswordsafe": "^2.0.0",
|
||||
"vue-picture-cropper": "^0.6.2",
|
||||
"vue-plyr": "^7.0.0",
|
||||
"vue-prism-editor": "2.0.0-alpha.2"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,14 +18,15 @@
|
|||
};`"
|
||||
>
|
||||
<div class="container">
|
||||
<VueCropper
|
||||
<VuePictureCropper
|
||||
ref="cropper"
|
||||
:img="imgUrl"
|
||||
:auto-crop="true"
|
||||
:fixed="aspectRatio ? true : false"
|
||||
:fixed-number="aspectRatio ?? null"
|
||||
output-type="webp"
|
||||
></VueCropper>
|
||||
:options="{
|
||||
aspectRatio: aspectRatio ? aspectRatio[0] / aspectRatio[1] : null,
|
||||
dragMode: "crop",
|
||||
viewMode: 1,
|
||||
}"
|
||||
></VuePictureCropper>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -35,7 +36,7 @@
|
|||
<script lang="ts" setup>
|
||||
import { ref } from "vue";
|
||||
import type * as firefish from "firefish-js";
|
||||
import { VueCropper } from "vue-cropper";
|
||||
import VuePictureCropper, { cropper } from "vue-picture-cropper";
|
||||
import XModalWindow from "@/components/MkModalWindow.vue";
|
||||
import * as os from "@/os";
|
||||
import { $i } from "@/account";
|
||||
|
|
@ -43,7 +44,6 @@ import { defaultStore } from "@/store";
|
|||
import { apiUrl, url } from "@/config";
|
||||
import { query } from "@/scripts/url";
|
||||
import { i18n } from "@/i18n";
|
||||
import "vue-cropper/dist/index.css";
|
||||
|
||||
const emit = defineEmits<{
|
||||
(ev: "ok", cropped: firefish.entities.DriveFile): void;
|
||||
|
|
@ -60,11 +60,10 @@ const imgUrl = `${url}/proxy/image.webp?${query({
|
|||
url: props.file.url,
|
||||
})}`;
|
||||
const dialogEl = ref<InstanceType<typeof XModalWindow>>();
|
||||
const cropper = ref<InstanceType<typeof VueCropper>>();
|
||||
|
||||
const ok = async () => {
|
||||
const promise = new Promise<firefish.entities.DriveFile>(async (res) => {
|
||||
cropper.getCropBlob((blob) => {
|
||||
await cropper?.getBlob((blob) => {
|
||||
const formData = new FormData();
|
||||
formData.append("file", blob);
|
||||
if (defaultStore.state.uploadFolder) {
|
||||
|
|
|
|||
|
|
@ -875,15 +875,15 @@ importers:
|
|||
vue:
|
||||
specifier: 3.3.4
|
||||
version: 3.3.4
|
||||
vue-cropper:
|
||||
specifier: ^1.1.1
|
||||
version: 1.1.1
|
||||
vue-draggable-plus:
|
||||
specifier: ^0.2.6
|
||||
version: 0.2.6(@types/sortablejs@1.15.1)
|
||||
vue-isyourpasswordsafe:
|
||||
specifier: ^2.0.0
|
||||
version: 2.0.0
|
||||
vue-picture-cropper:
|
||||
specifier: ^0.6.2
|
||||
version: 0.6.2(vue@3.3.4)
|
||||
vue-plyr:
|
||||
specifier: ^7.0.0
|
||||
version: 7.0.0
|
||||
|
|
@ -1464,6 +1464,16 @@ packages:
|
|||
'@babel/helper-validator-identifier': 7.22.5
|
||||
to-fast-properties: 2.0.0
|
||||
|
||||
/@bassist/utils@0.11.2:
|
||||
resolution: {integrity: sha512-qybnYCrh/7AYrch4r+sjgrMgUlUIXJ1xmJwnx486nOD9ishFDlel7p6n8uitH6cygNW4n+/AJm5nAKRVSq3yng==}
|
||||
dev: true
|
||||
|
||||
/@bassist/utils@0.4.0:
|
||||
resolution: {integrity: sha512-aoFTl0jUjm8/tDZodP41wnEkvB+C5O9NFCuYN/ztL6jSUSsuBkXq90/1ifBm1XhV/zySHgLYlU1+tgo3XtQ+nA==}
|
||||
dependencies:
|
||||
'@withtypes/mime': 0.1.2
|
||||
dev: true
|
||||
|
||||
/@bcoe/v8-coverage@0.2.3:
|
||||
resolution: {integrity: sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==}
|
||||
dev: true
|
||||
|
|
@ -4909,6 +4919,19 @@ packages:
|
|||
resolution: {integrity: sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ==}
|
||||
dev: true
|
||||
|
||||
/@web-analytics/core@0.1.5:
|
||||
resolution: {integrity: sha512-oJCaAe7zj1X365ZvNQrso9yE+kszPQD2plbP5/J0EjgppZCmHSpkvqtY+T2lArGNcHezzPDjwBEkmYge6d+fIQ==}
|
||||
dependencies:
|
||||
'@bassist/utils': 0.11.2
|
||||
dev: true
|
||||
|
||||
/@web-analytics/vue@0.2.2:
|
||||
resolution: {integrity: sha512-becl9OFlEUYD+0x7ats72FVOvMk+kAXHc3tla2makSGOO2UDu69tGMv5WPExuTg9CqSFHd/a5aUGqmFq4sualQ==}
|
||||
dependencies:
|
||||
'@bassist/utils': 0.11.2
|
||||
'@web-analytics/core': 0.1.5
|
||||
dev: true
|
||||
|
||||
/@webassemblyjs/ast@1.11.6:
|
||||
resolution: {integrity: sha512-IN1xI7PwOvLPgjcf180gC1bqn3q/QaOCwYUahIOhbYUu8KA/3tw2RT/T0Gidi1l7Hhj5D/INhJxiICObqpMu4Q==}
|
||||
dependencies:
|
||||
|
|
@ -5066,6 +5089,12 @@ packages:
|
|||
webpack-cli: 5.1.3(webpack@5.88.1)
|
||||
dev: true
|
||||
|
||||
/@withtypes/mime@0.1.2:
|
||||
resolution: {integrity: sha512-PB9BfZGzwblUONJY0LiOwsHCA6uV3DIPj/w9ReekdHxPOl0VdUFgI5s4avKycuuq9Gf5Nz2ZPA2O36GAUzlMPA==}
|
||||
dependencies:
|
||||
mime: 3.0.0
|
||||
dev: true
|
||||
|
||||
/@xtuc/ieee754@1.2.0:
|
||||
resolution: {integrity: sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==}
|
||||
dev: true
|
||||
|
|
@ -7305,6 +7334,10 @@ packages:
|
|||
luxon: 3.3.0
|
||||
dev: false
|
||||
|
||||
/cropperjs@1.6.1:
|
||||
resolution: {integrity: sha512-F4wsi+XkDHCOMrHMYjrTEE4QBOrsHHN5/2VsVAaRq8P7E5z7xQpT75S+f/9WikmBEailas3+yo+6zPIomW+NOA==}
|
||||
dev: true
|
||||
|
||||
/cross-env@7.0.3:
|
||||
resolution: {integrity: sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==}
|
||||
engines: {node: '>=10.14', npm: '>=6', yarn: '>=1'}
|
||||
|
|
@ -13723,6 +13756,12 @@ packages:
|
|||
dependencies:
|
||||
mime-db: 1.52.0
|
||||
|
||||
/mime@3.0.0:
|
||||
resolution: {integrity: sha512-jSCU7/VB1loIWBZe14aEYHU/+1UMEHoaO7qxCOVJOw9GgH72VAWppxNcjU+x9a2k3GSIBXNKxXQFqRvvZ7vr3A==}
|
||||
engines: {node: '>=10.0.0'}
|
||||
hasBin: true
|
||||
dev: true
|
||||
|
||||
/mimic-fn@2.1.0:
|
||||
resolution: {integrity: sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==}
|
||||
engines: {node: '>=6'}
|
||||
|
|
@ -18593,10 +18632,6 @@ packages:
|
|||
resolution: {integrity: sha512-AFbieoL7a5LMqcnOF04ji+rpXadgOXnZsxQr//r83kLPr7biP7am3g9zbaZIaBGwBRWeSvoMD4mgPdX3e4NWBg==}
|
||||
dev: true
|
||||
|
||||
/vue-cropper@1.1.1:
|
||||
resolution: {integrity: sha512-WsqKMpaBf9Osi1LQlE/5AKdD0nHWOy1asLXocaG8NomOWO07jiZi968+/PbMmnD0QbPJOumDQaGuGa13qys85A==}
|
||||
dev: true
|
||||
|
||||
/vue-draggable-plus@0.2.6(@types/sortablejs@1.15.1):
|
||||
resolution: {integrity: sha512-d+0omKIBIfLiJFggc6H4ePRaifbX+33+OiCMsxn8rG59yWXlJGrobexxgXetnSo/1NLTd0TkYZKNc4CA6iwJZw==}
|
||||
peerDependencies:
|
||||
|
|
@ -18633,6 +18668,17 @@ packages:
|
|||
sha1: 1.1.1
|
||||
dev: true
|
||||
|
||||
/vue-picture-cropper@0.6.2(vue@3.3.4):
|
||||
resolution: {integrity: sha512-rULhkXdAofzYSn5K7icbOnWxgaN/UrY12DJ6ncIiS85wlfVB9HPZN/gIHoVQ4Kjz70IQonvP603BT7IaAJ+0DQ==}
|
||||
peerDependencies:
|
||||
vue: '>=3.2.13'
|
||||
dependencies:
|
||||
'@bassist/utils': 0.4.0
|
||||
'@web-analytics/vue': 0.2.2
|
||||
cropperjs: 1.6.1
|
||||
vue: 3.3.4
|
||||
dev: true
|
||||
|
||||
/vue-plyr@7.0.0:
|
||||
resolution: {integrity: sha512-NvbO/ZzV1IxlBQQbQlon5Sk8hKuGAj3k4k0XVdi7gM4oSqu8mZMhJ3WM3FfAtNfV790jbLnb8P3dHYqaBqIv6g==}
|
||||
dependencies:
|
||||
|
|
|
|||
Loading…
Reference in a new issue