390 lines
12 KiB
JavaScript
390 lines
12 KiB
JavaScript
/**
|
|
* Image Cropper Component
|
|
* Uses Cropper.js for image cropping with square aspect ratio
|
|
*/
|
|
|
|
import { t } from '../i18n.js'
|
|
|
|
// Load Cropper.js dynamically (self-hosted for privacy)
|
|
let cropperLoaded = false
|
|
async function loadCropperJS() {
|
|
if (cropperLoaded) return
|
|
|
|
// Load CSS
|
|
const link = document.createElement('link')
|
|
link.rel = 'stylesheet'
|
|
link.href = '/css/vendor/cropper.min.css'
|
|
document.head.appendChild(link)
|
|
|
|
// Load JS
|
|
await new Promise((resolve, reject) => {
|
|
const script = document.createElement('script')
|
|
script.src = '/js/vendor/cropper.min.js'
|
|
script.onload = resolve
|
|
script.onerror = reject
|
|
document.head.appendChild(script)
|
|
})
|
|
|
|
cropperLoaded = true
|
|
}
|
|
|
|
class ImageCropper extends HTMLElement {
|
|
constructor() {
|
|
super()
|
|
this.cropper = null
|
|
this.currentFile = null
|
|
this.onCropComplete = null
|
|
this.onCancel = null
|
|
this.currentAspectRatio = 1
|
|
}
|
|
|
|
connectedCallback() {
|
|
this.render()
|
|
this.setupEventListeners()
|
|
}
|
|
|
|
disconnectedCallback() {
|
|
this.destroyCropper()
|
|
}
|
|
|
|
render() {
|
|
this.innerHTML = /* html */`
|
|
<div class="cropper-overlay" id="cropper-overlay">
|
|
<div class="cropper-modal">
|
|
<div class="cropper-header">
|
|
<h3>${t('cropper.title')}</h3>
|
|
<button type="button" class="cropper-close" id="cropper-close" aria-label="Close">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<line x1="18" y1="6" x2="6" y2="18"></line>
|
|
<line x1="6" y1="6" x2="18" y2="18"></line>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div class="cropper-container">
|
|
<img id="cropper-image" src="" alt="Crop preview">
|
|
</div>
|
|
<div class="cropper-toolbar">
|
|
<span class="cropper-toolbar-label">${t('cropper.aspectRatio')}</span>
|
|
<div class="cropper-ratio-buttons">
|
|
<button type="button" class="cropper-ratio-btn active" data-ratio="1">1:1</button>
|
|
<button type="button" class="cropper-ratio-btn" data-ratio="1.333">4:3</button>
|
|
<button type="button" class="cropper-ratio-btn" data-ratio="1.778">16:9</button>
|
|
<button type="button" class="cropper-ratio-btn" data-ratio="0">${t('cropper.free')}</button>
|
|
</div>
|
|
</div>
|
|
<div class="cropper-preview-section">
|
|
<span class="cropper-preview-label">${t('cropper.preview')}</span>
|
|
<div class="cropper-preview" id="cropper-preview"></div>
|
|
</div>
|
|
<div class="cropper-actions">
|
|
<button type="button" class="btn btn-outline" id="cropper-cancel">${t('cropper.cancel')}</button>
|
|
<button type="button" class="btn btn-primary" id="cropper-confirm">${t('cropper.confirm')}</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`
|
|
}
|
|
|
|
setupEventListeners() {
|
|
this.querySelector('#cropper-close')?.addEventListener('click', () => this.cancel())
|
|
this.querySelector('#cropper-cancel')?.addEventListener('click', () => this.cancel())
|
|
this.querySelector('#cropper-confirm')?.addEventListener('click', () => this.confirm())
|
|
|
|
// Close on overlay click
|
|
this.querySelector('#cropper-overlay')?.addEventListener('click', (e) => {
|
|
if (e.target.id === 'cropper-overlay') this.cancel()
|
|
})
|
|
|
|
// Aspect ratio buttons
|
|
this.querySelectorAll('.cropper-ratio-btn').forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
this.querySelectorAll('.cropper-ratio-btn').forEach(b => b.classList.remove('active'))
|
|
btn.classList.add('active')
|
|
const ratio = parseFloat(btn.dataset.ratio)
|
|
this.currentAspectRatio = ratio
|
|
if (this.cropper) {
|
|
this.cropper.setAspectRatio(ratio === 0 ? NaN : ratio)
|
|
}
|
|
})
|
|
})
|
|
}
|
|
|
|
async open(file, onComplete, onCancel) {
|
|
await loadCropperJS()
|
|
|
|
this.currentFile = file
|
|
this.onCropComplete = onComplete
|
|
this.onCancel = onCancel
|
|
|
|
const overlay = this.querySelector('#cropper-overlay')
|
|
const image = this.querySelector('#cropper-image')
|
|
|
|
// Create object URL for the file
|
|
const url = URL.createObjectURL(file)
|
|
image.src = url
|
|
|
|
// Wait for image to load
|
|
await new Promise(resolve => {
|
|
image.onload = resolve
|
|
})
|
|
|
|
// Show overlay
|
|
overlay.classList.add('visible')
|
|
document.body.style.overflow = 'hidden'
|
|
|
|
// Reset aspect ratio buttons
|
|
this.currentAspectRatio = 1
|
|
this.querySelectorAll('.cropper-ratio-btn').forEach(btn => {
|
|
btn.classList.toggle('active', btn.dataset.ratio === '1')
|
|
})
|
|
|
|
// Initialize Cropper
|
|
this.destroyCropper()
|
|
this.cropper = new window.Cropper(image, {
|
|
aspectRatio: 1,
|
|
viewMode: 1,
|
|
dragMode: 'move',
|
|
autoCropArea: 0.9,
|
|
cropBoxMovable: true,
|
|
cropBoxResizable: true,
|
|
toggleDragModeOnDblclick: false,
|
|
preview: '#cropper-preview',
|
|
background: false
|
|
})
|
|
}
|
|
|
|
async confirm() {
|
|
if (!this.cropper) return
|
|
|
|
// Calculate output dimensions based on aspect ratio
|
|
const maxSize = 1200
|
|
let width, height
|
|
if (this.currentAspectRatio === 0 || isNaN(this.currentAspectRatio)) {
|
|
// Free crop - use actual crop box dimensions, max 1200px on longest side
|
|
const cropData = this.cropper.getCropBoxData()
|
|
const scale = Math.min(1, maxSize / Math.max(cropData.width, cropData.height))
|
|
width = Math.round(cropData.width * scale)
|
|
height = Math.round(cropData.height * scale)
|
|
} else if (this.currentAspectRatio >= 1) {
|
|
width = maxSize
|
|
height = Math.round(maxSize / this.currentAspectRatio)
|
|
} else {
|
|
height = maxSize
|
|
width = Math.round(maxSize * this.currentAspectRatio)
|
|
}
|
|
|
|
// Get cropped canvas
|
|
const canvas = this.cropper.getCroppedCanvas({
|
|
width,
|
|
height,
|
|
imageSmoothingEnabled: true,
|
|
imageSmoothingQuality: 'high'
|
|
})
|
|
|
|
// Convert to blob
|
|
const blob = await new Promise(resolve => {
|
|
canvas.toBlob(resolve, 'image/jpeg', 0.9)
|
|
})
|
|
|
|
// Create file from blob
|
|
const croppedFile = new File([blob], this.currentFile.name, {
|
|
type: 'image/jpeg',
|
|
lastModified: Date.now()
|
|
})
|
|
|
|
// Create preview URL
|
|
const previewUrl = canvas.toDataURL('image/jpeg', 0.9)
|
|
|
|
this.close()
|
|
|
|
if (this.onCropComplete) {
|
|
this.onCropComplete(croppedFile, previewUrl)
|
|
}
|
|
}
|
|
|
|
cancel() {
|
|
this.close()
|
|
if (this.onCancel) {
|
|
this.onCancel()
|
|
}
|
|
}
|
|
|
|
close() {
|
|
const overlay = this.querySelector('#cropper-overlay')
|
|
overlay.classList.remove('visible')
|
|
document.body.style.overflow = ''
|
|
|
|
this.destroyCropper()
|
|
|
|
// Revoke object URL
|
|
const image = this.querySelector('#cropper-image')
|
|
if (image.src.startsWith('blob:')) {
|
|
URL.revokeObjectURL(image.src)
|
|
}
|
|
image.src = ''
|
|
}
|
|
|
|
destroyCropper() {
|
|
if (this.cropper) {
|
|
this.cropper.destroy()
|
|
this.cropper = null
|
|
}
|
|
}
|
|
}
|
|
|
|
customElements.define('image-cropper', ImageCropper)
|
|
|
|
const style = document.createElement('style')
|
|
style.textContent = /* css */`
|
|
image-cropper .cropper-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(0, 0, 0, 0.85);
|
|
display: none;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 1000;
|
|
padding: var(--space-md);
|
|
}
|
|
|
|
image-cropper .cropper-overlay.visible {
|
|
display: flex;
|
|
}
|
|
|
|
image-cropper .cropper-modal {
|
|
background: var(--color-bg);
|
|
border-radius: var(--radius-lg);
|
|
max-width: 600px;
|
|
width: 100%;
|
|
max-height: 90vh;
|
|
margin: auto;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
|
|
opacity: 1;
|
|
}
|
|
|
|
image-cropper .cropper-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: var(--space-md) var(--space-lg);
|
|
border-bottom: 1px solid var(--color-border);
|
|
}
|
|
|
|
image-cropper .cropper-header h3 {
|
|
margin: 0;
|
|
font-size: var(--font-size-lg);
|
|
}
|
|
|
|
image-cropper .cropper-close {
|
|
background: none;
|
|
border: none;
|
|
padding: var(--space-xs);
|
|
cursor: pointer;
|
|
color: var(--color-text-muted);
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
|
|
image-cropper .cropper-close:hover {
|
|
background: var(--color-bg-tertiary);
|
|
color: var(--color-text);
|
|
}
|
|
|
|
image-cropper .cropper-container {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 350px;
|
|
background: var(--color-bg-tertiary);
|
|
}
|
|
|
|
image-cropper .cropper-container img {
|
|
display: block;
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
}
|
|
|
|
image-cropper .cropper-toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-md);
|
|
padding: var(--space-sm) var(--space-lg);
|
|
border-top: 1px solid var(--color-border);
|
|
background: var(--color-bg-secondary);
|
|
}
|
|
|
|
image-cropper .cropper-toolbar-label {
|
|
font-size: var(--font-size-sm);
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
image-cropper .cropper-ratio-buttons {
|
|
display: flex;
|
|
gap: var(--space-xs);
|
|
}
|
|
|
|
image-cropper .cropper-ratio-btn {
|
|
padding: var(--space-xs) var(--space-sm);
|
|
font-size: var(--font-size-sm);
|
|
border: 1px solid var(--color-border);
|
|
background: var(--color-bg);
|
|
color: var(--color-text-secondary);
|
|
border-radius: var(--radius-sm);
|
|
cursor: pointer;
|
|
transition: all var(--transition-fast);
|
|
}
|
|
|
|
image-cropper .cropper-ratio-btn:hover {
|
|
background: var(--color-bg-tertiary);
|
|
color: var(--color-text);
|
|
}
|
|
|
|
image-cropper .cropper-ratio-btn.active {
|
|
background: var(--color-primary);
|
|
border-color: var(--color-primary);
|
|
color: var(--color-bg);
|
|
}
|
|
|
|
image-cropper .cropper-preview-section {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-md);
|
|
padding: var(--space-md) var(--space-lg);
|
|
border-top: 1px solid var(--color-border);
|
|
}
|
|
|
|
image-cropper .cropper-preview-label {
|
|
font-size: var(--font-size-sm);
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
image-cropper .cropper-preview {
|
|
width: 80px;
|
|
height: 80px;
|
|
border-radius: var(--radius-md);
|
|
overflow: hidden;
|
|
border: 1px solid var(--color-border);
|
|
}
|
|
|
|
image-cropper .cropper-actions {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: var(--space-sm);
|
|
padding: var(--space-md) var(--space-lg);
|
|
border-top: 1px solid var(--color-border);
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
image-cropper .cropper-container {
|
|
height: 280px;
|
|
}
|
|
}
|
|
`
|
|
document.head.appendChild(style)
|
|
|
|
export { ImageCropper }
|