Public/pics
2
2
Fork 2
Code Issues 6 Pull Requests 2 Releases Wiki Activity

Make crop editor usable #22

Merged
Aaron merged 27 commits from crop-editor into master 2020-12-30 20:06:17 +01:00
Conversation 0 Commits 27 Files Changed 7 +44 -40
1 changed files with 44 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 837c92db44 - Show all commits

50
public/js/crop_editor.js
View File

@ -87,48 +87,52 @@ class CropEditor {
this.image_container.appendChild(this.original_image);
}
setInputValues() {
let current = this.thumbnail_select.options[this.thumbnail_select.selectedIndex].dataset;
if (typeof current.crop_region === "undefined") {
let source_ratio = this.original_image.naturalWidth / this.original_image.naturalHeight,
crop_ratio = current.crop_width / current.crop_height,
min_dim = Math.min(this.original_image.naturalWidth, this.original_image.naturalHeight);
setDefaultCrop(cropAspectRatio, cropMethod) {
let source = this.original_image;
let sourceAspectRatio = source.naturalWidth / source.naturalHeight;
// Cropping from the centre?
if (current.crop_method === "c") {
if (cropMethod === "c") {
// Crop vertically from the centre, using the entire width.
if (source_ratio < crop_ratio) {
this.crop_width.value = this.original_image.naturalWidth;
this.crop_height.value = Math.ceil(this.original_image.naturalWidth / crop_ratio);
if (sourceAspectRatio < cropAspectRatio) {
this.crop_width.value = source.naturalWidth;
this.crop_height.value = Math.ceil(source.naturalWidth / cropAspectRatio);
this.source_x.value = 0;
this.source_y.value = Math.ceil((this.original_image.naturalHeight - this.crop_height.value) / 2);
this.source_y.value = Math.ceil((source.naturalHeight - this.crop_height.value) / 2);
}
// Crop horizontally from the centre, using the entire height.
else {
this.crop_width.value = Math.ceil(current.crop_width * this.original_image.naturalHeight / current.crop_height);
this.crop_height.value = this.original_image.naturalHeight;
this.source_x.value = Math.ceil((this.original_image.naturalWidth - this.crop_width.value) / 2);
this.crop_width.value = Math.ceil(cropAspectRatio * source.naturalHeight);
this.crop_height.value = source.naturalHeight;
this.source_x.value = Math.ceil((source.naturalWidth - this.crop_width.value) / 2);
this.source_y.value = 0;
}
}
// Cropping a top or bottom slice?
else {
// Can we actually take a top or bottom slice from the original image?
if (source_ratio < crop_ratio) {
this.crop_width.value = this.original_image.naturalWidth;
this.crop_height.value = Math.floor(this.original_image.naturalHeight / crop_ratio);
if (sourceAspectRatio < cropAspectRatio) {
this.crop_width.value = source.naturalWidth;
this.crop_height.value = Math.floor(source.naturalHeight / cropAspectRatio);
this.source_x.value = "0";
this.source_y.value = current.crop_method.indexOf("t") !== -1 ? "0" : this.original_image.naturalHeight - this.crop_height.value;
this.source_y.value = cropMethod.indexOf("t") !== -1 ? "0" : source.naturalHeight - this.crop_height.value;
}
// Otherwise, take a vertical slice from the centre.
else {
this.crop_width.value = Math.floor(this.original_image.naturalHeight * crop_ratio);
this.crop_height.value = this.original_image.naturalHeight;
this.source_x.value = Math.floor((this.original_image.naturalWidth - this.crop_width.value) / 2);
this.crop_width.value = Math.floor(source.naturalHeight * cropAspectRatio);
this.crop_height.value = source.naturalHeight;
this.source_x.value = Math.floor((source.naturalWidth - this.crop_width.value) / 2);
this.source_y.value = "0";
}
}
}
setPositionFormValues() {
let current = this.thumbnail_select.options[this.thumbnail_select.selectedIndex].dataset;
if (typeof current.crop_region === "undefined") {
let aspectRatio = current.crop_width / current.crop_height;
this.setDefaultCrop(aspectRatio, current.crop_method);
} else {
let region = current.crop_region.split(',');
this.crop_width.value = region[0];
@ -140,7 +144,7 @@ class CropEditor {
showContainer() {
this.container.style.display = '';
this.setInputValues();
this.setPositionFormValues();
this.positionBoundary();
this.addEvents();
}