sendnrw/misskey
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(frontend): allow cropping images on drive (#11092)

Browse Source 
* feat(frontend): allow cropping images on drive

* nanka iroiro

* folder

---------

Co-authored-by: tamaina <tamaina@hotmail.co.jp>
This commit is contained in:
Kagami Sascha Rosylight
2023-07-05 06:54:40 +02:00
committed by GitHub
parent 1ab9f096c3
commit ac4245dce1
7 changed files with 55 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
packages/frontend/src/components/MkCropperDialog.vue
View File

@@ -47,6 +47,7 @@ const emit = defineEmits<{
const props = defineProps<{
file: misskey.entities.DriveFile;
aspectRatio: number;
uploadFolder?: string | null;
}>();
const imgUrl = getProxiedImageUrl(props.file.url, undefined, true);
@@ -58,11 +59,17 @@ let loading = $ref(true);
const ok = async () => {
const promise = new Promise<misskey.entities.DriveFile>(async (res) => {
const croppedCanvas = await cropper?.getCropperSelection()?.$toCanvas();
croppedCanvas.toBlob(blob => {
croppedCanvas?.toBlob(blob => {
if (!blob) return;
const formData = new FormData();
formData.append('file', blob);
formData.append('i', $i.token);
if (defaultStore.state.uploadFolder) {
formData.append('name', `cropped_${props.file.name}`);
formData.append('isSensitive', props.file.isSensitive ? 'true' : 'false');
formData.append('comment', props.file.comment ?? 'null');
formData.append('i', $i!.token);
if (props.uploadFolder || props.uploadFolder === null) {
formData.append('folderId', props.uploadFolder ?? 'null');
} else if (defaultStore.state.uploadFolder) {
formData.append('folderId', defaultStore.state.uploadFolder);
}
@@ -82,12 +89,12 @@ const ok = async () => {
const f = await promise;
emit('ok', f);
dialogEl.close();
dialogEl!.close();
};
const cancel = () => {
emit('cancel');
dialogEl.close();
dialogEl!.close();
};
const onImageLoad = () => {
@@ -100,7 +107,7 @@ const onImageLoad = () => {
};
onMounted(() => {
cropper = new Cropper(imgEl, {
cropper = new Cropper(imgEl!, {
});
const computedStyle = getComputedStyle(document.documentElement);
@@ -112,13 +119,13 @@ onMounted(() => {
selection.outlined = true;
window.setTimeout(() => {
cropper.getCropperImage()!.$center('contain');
cropper!.getCropperImage()!.$center('contain');
selection.$center();
}, 100);
// モーダルオープンアニメーションが終わったあとで再度調整
window.setTimeout(() => {
cropper.getCropperImage()!.$center('contain');
cropper!.getCropperImage()!.$center('contain');
selection.$center();
}, 500);
});