Make image crop target size configurable
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
{% extends "base.html" %}
|
||||
{% block content %}
|
||||
<h1 class="page-title">Welcome{% if current_user and current_user.email %}, {{ current_user.email }}{% endif %}!</h1>
|
||||
<h1 class="page-title">Dashboard</h1>
|
||||
|
||||
<div class="row mt-4">
|
||||
<div class="col-12">
|
||||
|
||||
@@ -1,5 +1,12 @@
|
||||
{% extends "base.html" %}
|
||||
{% block content %}
|
||||
{# Expose server-side crop target sizes to the JS without embedding Jinja inside JS #}
|
||||
<div
|
||||
id="page-config"
|
||||
class="d-none"
|
||||
data-image-crop-target-w="{{ config.get('IMAGE_CROP_TARGET_W', 1920) }}"
|
||||
data-image-crop-target-h="{{ config.get('IMAGE_CROP_TARGET_H', 1080) }}"
|
||||
></div>
|
||||
{# Cropper.js (used for image cropping) #}
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cropperjs@1.6.2/dist/cropper.min.css" />
|
||||
<style>
|
||||
@@ -912,9 +919,15 @@
|
||||
|
||||
cropStatus.textContent = 'Preparing cropped image…';
|
||||
const isPortrait = cm === '9:16';
|
||||
// Export at Full HD by default (or whatever the server config says).
|
||||
// We still enforce a server-side max output size in _save_compressed_image.
|
||||
const cfg = document.getElementById('page-config');
|
||||
const TARGET_W = parseInt(cfg?.dataset?.imageCropTargetW || '1920', 10) || 1920;
|
||||
const TARGET_H = parseInt(cfg?.dataset?.imageCropTargetH || '1080', 10) || 1080;
|
||||
|
||||
const canvas = cropper.getCroppedCanvas({
|
||||
width: isPortrait ? 720 : 1280,
|
||||
height: isPortrait ? 1280 : 720,
|
||||
width: isPortrait ? TARGET_H : TARGET_W,
|
||||
height: isPortrait ? TARGET_W : TARGET_H,
|
||||
imageSmoothingQuality: 'high',
|
||||
});
|
||||
const blob = await new Promise((resolve) => canvas.toBlob(resolve, 'image/png'));
|
||||
|
||||
Reference in New Issue
Block a user