56 lines
1.8 KiB
JavaScript
56 lines
1.8 KiB
JavaScript
import {computed, ref, watch} from "vue";
|
|
import {cropper} from "vue-picture-cropper";
|
|
import {roundWithPrecision} from "src/composables/utils";
|
|
import {photoAspectRatio} from "src/composables/photos/editor/photo";
|
|
|
|
export const cropperImgSizes = computed(() => [cropper.getImageData().width, cropper.getImageData().height]);
|
|
export const croppedArea = ref(null);
|
|
export const selectedAspectRatio = ref(null);
|
|
|
|
watch(() => selectedAspectRatio.value, (newVal) => {
|
|
cropper.setAspectRatio(newVal);
|
|
})
|
|
|
|
|
|
export const setCropData = () => {
|
|
const [w, h] = cropperImgSizes.value;
|
|
|
|
console.log("crop end");
|
|
|
|
const cropData = cropper.getCropBoxData();
|
|
croppedArea.value = {
|
|
left: roundWithPrecision(cropData.left / w, 5),
|
|
top: roundWithPrecision(cropData.top / h, 5),
|
|
width: roundWithPrecision(cropData.width / w, 5),
|
|
height: roundWithPrecision(cropData.height / h, 5)
|
|
};
|
|
}
|
|
|
|
export const aspectRatioOptions = computed(() =>
|
|
[
|
|
{label: '16:9', value: roundWithPrecision(16 / 9, 5)},
|
|
{label: '4:3', value: roundWithPrecision(4 / 3, 5)},
|
|
{label: '9:16', value: roundWithPrecision(9 / 16, 5)},
|
|
{label: '3:4', value: roundWithPrecision(3 / 4, 5)},
|
|
{label: '1:1', value: 1},
|
|
{label: 'Volný', value: null},
|
|
{label: 'Původní', value: roundWithPrecision(photoAspectRatio.value, 5)},
|
|
]
|
|
);
|
|
|
|
export const cropperReady = (e) => {
|
|
if (croppedArea.value) {
|
|
const [w, h] = cropperImgSizes.value;
|
|
selectedAspectRatio.value = roundWithPrecision((croppedArea.value.width * w) / (croppedArea.value.height * h), 5);
|
|
|
|
cropper.setCropBoxData({
|
|
left: croppedArea.value.left * w,
|
|
top: croppedArea.value.top * h,
|
|
width: croppedArea.value.width * w,
|
|
height: croppedArea.value.height * h
|
|
});
|
|
} else {
|
|
selectedAspectRatio.value = roundWithPrecision(photoAspectRatio.value, 5);
|
|
}
|
|
}
|