refactor: ♻️ switch from cropperjs to vue-cropper

seems to be less buggy

packages/client/package.json

@@ -43,7 +43,6 @@
 		"chartjs-plugin-zoom": "2.0.1",
 		"city-timezones": "^1.2.1",
 		"compare-versions": "6.1.0",
-		"cropperjs": "2.0.0-beta.4",
 		"cross-env": "7.0.3",
 		"cypress": "10.11.0",
 		"date-fns": "2.30.0",
@@ -93,6 +92,7 @@
 		"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-plyr": "^7.0.0",

packages/client/src/components/MkCropperDialog.vue

@@ -17,18 +17,15 @@
 					height ? `${height}px` : '100%'
 				};`"
 			>
-				<Transition name="fade">
-					<div v-if="loading" class="loading">
-						<MkLoading />
-					</div>
-				</Transition>
 				<div class="container">
-					<img
+					<VueCropper
-						ref="imgEl"
+						ref="cropper"
-						:src="imgUrl"
+						:img="imgUrl"
-						style="display: none"
+						:auto-crop="true"
-						@load="onImageLoad"
+						:fixed="aspectRatio ? true : false"
-					/>
+						:fixed-number="aspectRatio ?? null"
+						output-type="webp"
+					></VueCropper>
 				</div>
 			</div>
 		</template>
@@ -36,10 +33,9 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, ref } from "vue";
+import { ref } from "vue";
 import type * as firefish from "firefish-js";
-import Cropper from "cropperjs";
+import { VueCropper } from "vue-cropper";
-import tinycolor from "tinycolor2";
 import XModalWindow from "@/components/MkModalWindow.vue";
 import * as os from "@/os";
 import { $i } from "@/account";
@@ -47,6 +43,7 @@ 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;
@@ -56,21 +53,18 @@ const emit = defineEmits<{
 
 const props = defineProps<{
 	file: firefish.entities.DriveFile;
-	aspectRatio: number;
+	aspectRatio?: Array<number>;
 }>();
 
 const imgUrl = `${url}/proxy/image.webp?${query({
 	url: props.file.url,
 })}`;
 const dialogEl = ref<InstanceType<typeof XModalWindow>>();
-const imgEl = ref<HTMLImageElement>();
+const cropper = ref<InstanceType<typeof VueCropper>>();
-let cropper: Cropper | null = null,
-	loading = ref(true);
 
 const ok = async () => {
 	const promise = new Promise<firefish.entities.DriveFile>(async (res) => {
-		const croppedCanvas = await cropper?.getCropperSelection()?.$toCanvas();
+		cropper.getCropBlob(blob => {
-		croppedCanvas.toBlob((blob) => {
 			const formData = new FormData();
 			formData.append("file", blob);
 			if (defaultStore.state.uploadFolder) {
@@ -103,40 +97,6 @@ const cancel = () => {
 	emit("cancel");
 	dialogEl.value.close();
 };
-
-const onImageLoad = () => {
-	loading.value = false;
-
-	if (cropper) {
-		cropper.getCropperImage()!.$center("contain");
-		cropper.getCropperSelection()!.$center();
-	}
-};
-
-onMounted(() => {
-	cropper = new Cropper(imgEl.value, {});
-
-	const computedStyle = getComputedStyle(document.documentElement);
-
-	const selection = cropper.getCropperSelection()!;
-	selection.themeColor = tinycolor(
-		computedStyle.getPropertyValue("--accent"),
-	).toHexString();
-	selection.aspectRatio = props.aspectRatio;
-	selection.initialAspectRatio = props.aspectRatio;
-	selection.outlined = true;
-
-	window.setTimeout(() => {
-		cropper.getCropperImage()!.$center("contain");
-		selection.$center();
-	}, 100);
-
-	// モーダルオープンアニメーションが終わったあとで再度調整
-	window.setTimeout(() => {
-		cropper.getCropperImage()!.$center("contain");
-		selection.$center();
-	}, 500);
-});
 </script>
 
 <style lang="scss" scoped>
@@ -156,34 +116,10 @@ onMounted(() => {
 	height: var(--vh);
 	position: relative;
 
-	> .loading {
-		position: absolute;
-		z-index: 10;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		-webkit-backdrop-filter: var(--blur, blur(10px));
-		backdrop-filter: var(--blur, blur(10px));
-		background: rgba(0, 0, 0, 0.5);
-	}
-
 	> .container {
 		flex: 1;
 		width: 100%;
 		height: 100%;
-
-		> ::v-deep(cropper-canvas) {
-			width: 100%;
-			height: 100%;
-
-			> cropper-selection > cropper-handle[action="move"] {
-				background: transparent;
-			}
-		}
 	}
 }
 </style>

packages/client/src/os.ts

@@ -747,7 +747,7 @@ export async function pickEmoji(src: HTMLElement | null, opts) {
 export async function cropImage(
 	image: firefish.entities.DriveFile,
 	options: {
-		aspectRatio: number;
+		aspectRatio?: Array<number>;
 	},
 ): Promise<firefish.entities.DriveFile> {
 	return new Promise((resolve, reject) => {

packages/client/src/pages/settings/profile.vue

@@ -257,7 +257,7 @@ function changeAvatar(ev) {
 
 			if (!canceled) {
 				originalOrCropped = await os.cropImage(file, {
-					aspectRatio: 1,
+					aspectRatio: [1, 1],
 				});
 			}
 
@@ -282,7 +282,7 @@ function changeBanner(ev) {
 
 			if (!canceled) {
 				originalOrCropped = await os.cropImage(file, {
-					aspectRatio: 2,
+					aspectRatio: [16, 9],
 				});
 			}
 

pnpm-lock.yaml

@@ -728,9 +728,6 @@ importers:
       compare-versions:
         specifier: 6.1.0
         version: 6.1.0
-      cropperjs:
-        specifier: 2.0.0-beta.4
-        version: 2.0.0-beta.4
       cross-env:
         specifier: 7.0.3
         version: 7.0.3
@@ -878,6 +875,9 @@ 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)
@@ -1658,94 +1658,6 @@ packages:
     dev: true
     optional: true
 
-  /@cropper/element-canvas@2.0.0-beta.4:
-    resolution: {integrity: sha512-xL7k5YgtbCLdR/QEj81An4HpPcBTJXf1lq+2xisyHALGeUKQXjA9cJQL7bldYscHAKjmFgNZ5xOMrNaYM++qZw==}
-    dependencies:
-      '@cropper/element': 2.0.0-beta.4
-      '@cropper/utils': 2.0.0-beta.4
-    dev: true
-
-  /@cropper/element-crosshair@2.0.0-beta.4:
-    resolution: {integrity: sha512-NiwIQZFh963i3E3QbXFiU9oNqs+P1cLJur3+e+DK0E3oLTa7rEfcigP/ZoMj/3DZ9Et0LPhKKRDY2SJ8ZszyPA==}
-    dependencies:
-      '@cropper/element': 2.0.0-beta.4
-      '@cropper/utils': 2.0.0-beta.4
-    dev: true
-
-  /@cropper/element-grid@2.0.0-beta.4:
-    resolution: {integrity: sha512-uMVVNk1SICwM2nA/7BHkyEojc0DAqsDFIUnC/sIGPtNf3fe5hYQyukby8BEPO7dlqzfIXYmnxacgLaPM9BZ7GQ==}
-    dependencies:
-      '@cropper/element': 2.0.0-beta.4
-      '@cropper/utils': 2.0.0-beta.4
-    dev: true
-
-  /@cropper/element-handle@2.0.0-beta.4:
-    resolution: {integrity: sha512-PHjC4ptBi0leQ82mPWvivNilNOpiBnV90ueqz99tli8f9bQobx+Os7dzKFwLIpj4WKCNRYhyEvxf1KuKhQisIg==}
-    dependencies:
-      '@cropper/element': 2.0.0-beta.4
-      '@cropper/utils': 2.0.0-beta.4
-    dev: true
-
-  /@cropper/element-image@2.0.0-beta.4:
-    resolution: {integrity: sha512-Nu5z5EFpyOEC2CAdhNZGfvpG9Xj6ZD46jvpJGKxsel7J7Kqf4qy+5m6nNdq2J+lK7YfTi16svkHeFwzNWZYLAA==}
-    dependencies:
-      '@cropper/element': 2.0.0-beta.4
-      '@cropper/element-canvas': 2.0.0-beta.4
-      '@cropper/utils': 2.0.0-beta.4
-    dev: true
-
-  /@cropper/element-selection@2.0.0-beta.4:
-    resolution: {integrity: sha512-wHZhWI80cC5TfFHI/2HT1A+ZbHifnAO+/IAr4IqkbaxtDZ9duqEvM2hhC+ZXgB3BYqVidAJNwpSnZkVK+DlJ6A==}
-    dependencies:
-      '@cropper/element': 2.0.0-beta.4
-      '@cropper/element-canvas': 2.0.0-beta.4
-      '@cropper/element-image': 2.0.0-beta.4
-      '@cropper/utils': 2.0.0-beta.4
-    dev: true
-
-  /@cropper/element-shade@2.0.0-beta.4:
-    resolution: {integrity: sha512-sTFTzlmu+Z31Hp7RHgUAxfDsRIQ/uG8RueOBBHLeKVGFZbYhsIElQaLcVDwebgqXLHVr9imCEvvIX11JeTqiTQ==}
-    dependencies:
-      '@cropper/element': 2.0.0-beta.4
-      '@cropper/element-canvas': 2.0.0-beta.4
-      '@cropper/element-selection': 2.0.0-beta.4
-      '@cropper/utils': 2.0.0-beta.4
-    dev: true
-
-  /@cropper/element-viewer@2.0.0-beta.4:
-    resolution: {integrity: sha512-bXW8OuezoHjyGFmQzX1QEj3OqvmSZwaLiQts+mVhcarYqAEVrK9s/bC/OqZKR2ZKkHeaiGWq+rTOBVAmhZja/A==}
-    dependencies:
-      '@cropper/element': 2.0.0-beta.4
-      '@cropper/element-canvas': 2.0.0-beta.4
-      '@cropper/element-image': 2.0.0-beta.4
-      '@cropper/element-selection': 2.0.0-beta.4
-      '@cropper/utils': 2.0.0-beta.4
-    dev: true
-
-  /@cropper/element@2.0.0-beta.4:
-    resolution: {integrity: sha512-1P8Vm9+OqTQz4B/rEA0t8xmzKUkYyxzxTiOaDMPKjKbG2R3UZgJBWRzvTgTsDudld9vlR6FfXpDBU1ZWA1BWxQ==}
-    dependencies:
-      '@cropper/utils': 2.0.0-beta.4
-    dev: true
-
-  /@cropper/elements@2.0.0-beta.4:
-    resolution: {integrity: sha512-cXKNFwudKcFrxn75VU9nLWNpjUnHcY0rUvtLn+2YVOLAnCTFLlu+azjOW1XZJ01FAEcC62Itb4CvDae+qgDpcQ==}
-    dependencies:
-      '@cropper/element': 2.0.0-beta.4
-      '@cropper/element-canvas': 2.0.0-beta.4
-      '@cropper/element-crosshair': 2.0.0-beta.4
-      '@cropper/element-grid': 2.0.0-beta.4
-      '@cropper/element-handle': 2.0.0-beta.4
-      '@cropper/element-image': 2.0.0-beta.4
-      '@cropper/element-selection': 2.0.0-beta.4
-      '@cropper/element-shade': 2.0.0-beta.4
-      '@cropper/element-viewer': 2.0.0-beta.4
-    dev: true
-
-  /@cropper/utils@2.0.0-beta.4:
-    resolution: {integrity: sha512-mrUTA3LbEq1Y3nPTC5X6koTd2Dk8P+6xTuhp4P8X3mg5Z7d8AVK+0OU5kbB49OLAaEfvGEqbZJ84rLwgMy9RHw==}
-    dev: true
-
   /@cspotcode/source-map-consumer@0.8.0:
     resolution: {integrity: sha512-41qniHzTU8yAGbCp04ohlmSrZf8bkf/iJsl3V0dRGsQN/5GFfx+LbCSsCpp2gqrqjTVg/K6O8ycoV35JIwAzAg==}
     engines: {node: '>= 12'}
@@ -7393,13 +7305,6 @@ packages:
       luxon: 3.3.0
     dev: false
 
-  /cropperjs@2.0.0-beta.4:
-    resolution: {integrity: sha512-tWIQnvbou6eJvQkajwhGLOOEw03dM/i23FmnUQtMKjuzbTDSMP61kcwM77Uit8MXEWcUb5PH8n4jawyrFvj5ag==}
-    dependencies:
-      '@cropper/elements': 2.0.0-beta.4
-      '@cropper/utils': 2.0.0-beta.4
-    dev: true
-
   /cross-env@7.0.3:
     resolution: {integrity: sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==}
     engines: {node: '>=10.14', npm: '>=6', yarn: '>=1'}
@@ -18688,6 +18593,10 @@ 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: