Sfoglia nel tuo dispositivo e visualizza una foto con il tasto “Browse…”.
Potrai scegliere di ingrandire o rimpicciolire con la tastiera usando i tasti “+” e “-” l’immagine caricata.
Lo spazio entro cui potrai muoverti potrà essere scelto impostando la misura dei pixel che di defaul è 750px di lunghezza e 500px di altezza.
Questo spazio può essere modificato ed anche la proporzione del riquadro utlizzando il bottone “Set Canvas Size”.
Una volta visualizzata l’immagine, sotto di essa apparirà il tasto “Download”: potrai così effettuare il download del tuo file zoomato +/- secondo come viene mostrato nel riquadro.
N.B. Nessuna immagine verrà caricata sul server. Il tutto viene svolto lato utente per una maggiore privacy.
Buona ingrandimento o rimpicciolimento a vostro piacere!
PS. ATTENZIONE! Nel codice c’è finita una funzione non voluta, non dichiarata, sei in grado di individuarla? 🙂
Zoom and Move
body {
}
.editor-container {
text-align: left;
position: relative;
}
.canvas-container {
position: relative;
}
#canvas {
border: 1px solid #ccc;
margin-bottom: 10px;
}
.toolbar {
margin-bottom: 10px;
}
.crop-download-btn {
margin-top: 10px;
background-color: #008CBA;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
display: none; /* Nascosto finché non viene caricata un'immagine */
}
.crop-download-btn:hover {
background-color: #005f7a;
}
.toolbar button {
background-color: #008CBA;
color: white;
padding: 10px 20px;
text-align: left;
cursor: pointer;
border-radius: 5px;
margin-right: 10px;
border: none; /* Rimuove il bordo che di default appare sui pulsanti di tipo button */
}
.toolbar button:hover {
background-color: #005f7a;
}
.file-upload {
position: relative;
overflow: hidden;
display: inline-block;
background-color: #008CBA;
color: white;
padding: 10px 20px;
text-align: center;
border-radius: 5px;
cursor: pointer;
margin-right: 10px;
}
.file-upload:hover {
background-color: #005f7a;
}
.file-upload input[type=file] {
position: absolute;
top: 0;
left: 0;
font-size: 23px; /* Imposta dimensioni visive coerenti con il pulsante */
opacity: 0; /* Rendi invisibile il campo di input, ma funzionante */
}
#file-name {
display: block;
margin-top: 5px;
}
.dimension-input {
margin-right: 10px;
}
const canvas = new fabric.Canvas('canvas');
canvas.setWidth(750);
canvas.setHeight(500);
let originalImageObject; // Variabile per memorizzare l'oggetto immagine originale
let imageObject; // Variabile per memorizzare l'oggetto immagine corrente
function loadImage(event) {
const file = event.target.files[0];
const reader = new FileReader();
reader.onload = function(f) {
const data = f.target.result;
fabric.Image.fromURL(data, function(img) {
img.set({
left: 0,
top: 0,
angle: 0,
scaleX: 1,
scaleY: 1,
originX: 'left',
originY: 'top'
});
const maxDimension = 600;
if (img.width > img.height && img.width > maxDimension) {
img.scaleToWidth(maxDimension);
} else if (img.height > img.width && img.height > maxDimension) {
img.scaleToHeight(maxDimension);
}
// Imposta una dimensione fissa per il canvas
canvas.setWidth(750); // Larghezza fissa di 800px
canvas.setHeight(500); // Altezza fissa di 600px
canvas.clear();
canvas.add(img);
imageObject = img; // Memorizza l'oggetto immagine corrente per un uso successivo
originalImageObject = img.toObject(['id', 'name']); // Clona l'oggetto immagine originale per il reset
canvas.renderAll();
// Mostra il pulsante Crop & Download dopo il caricamento dell'immagine
document.querySelector('.crop-download-btn').style.display = 'inline-block';
/*
canvas.on('mouse:wheel', function(opt) {
const delta = opt.e.deltaY;
let zoom = imageObject.scaleX;
zoom += delta / 100;
if (zoom > 10) zoom = 10; // Imposta il limite massimo di zoom
if (zoom img.height && img.width > maxDimension) {
img.scaleToWidth(maxDimension);
} else if (img.height > img.width && img.height > maxDimension) {
img.scaleToHeight(maxDimension);
}
canvas.setWidth(img.getScaledWidth());
canvas.setHeight(img.getScaledHeight());
canvas.add(img);
imageObject = img; // Aggiorna l'oggetto immagine corrente
canvas.renderAll();
});
} else {
alert('Please upload an image first.');
}
}
function cropAndDownloadImage() {
if (imageObject) {
// Crea un nuovo canvas per disegnare l'immagine ritagliata
const croppedCanvas = document.createElement('canvas');
const croppedCtx = croppedCanvas.getContext('2d');
// Imposta le dimensioni per corrispondere all'area visibile dell'immagine sul canvas
const visibleWidth = canvas.width;
const visibleHeight = canvas.height;
croppedCanvas.width = visibleWidth;
croppedCanvas.height = visibleHeight;
// Disegna l'area visibile dell'immagine sul nuovo canvas
croppedCtx.drawImage(canvas.getElement(), 0, 0, visibleWidth, visibleHeight, 0, 0, visibleWidth, visibleHeight);
// Converti il canvas in URL dei dati
const croppedDataURL = croppedCanvas.toDataURL('image/jpeg');
// Crea un nome file basato sul nome originale con informazioni aggiuntive
const originalFilename = document.getElementById('upload-image').files[0].name;
const filenameParts = originalFilename.split('.');
const fileExtension = filenameParts.pop();
const croppedFilename = `${filenameParts.join('.')}_ZOOMOVE.${fileExtension}`;
// Apri l'URL dei dati in una nuova scheda per il download
const link = document.createElement('a');
link.href = croppedDataURL;
link.download = croppedFilename;
link.click();
} else {
alert('Please upload an image first.');
}
}