Sfoglia nel tuo dispositivo e visualizza una foto con il tasto “Browse…”.
Potrai scegliere l’inclinazione scrivendola (approssimata ai centesimi) o incrementandola con le frecce a step di 0.1, effettuando la rotazione passo dopo passo sia a sinistra che a destra, rispettivamente con i tasti “Rotate Left” e “Rotate Right”. Nel caso in cui si voglia tornare al punto di partenza basterà premere il tasto “Reset Image”.
Con il tasto “Grid”, una volta carica l’immagine sarà possibile visualizzare la griglia nel caso si voglia avere un punto di riferimento per raddrizzare un orizzonte o una linea di riferimento.
Una volta visualizzata l’immagine, sotto di essa apparirà il tasto “Download”: potrai così effettuare il download del tuo file ruotato e tagliato, come si vede nel riquadro.
N.B. Nessuna immagine verrà caricata sul server. Il tutto viene svolto lato utente per una maggiore privacy.
Buona rotazione e… dacci un taglio!
Rotate And Crop
body {
}
.editor-container {
text-align: left;
position: relative; /* Per consentire il posizionamento assoluto della griglia */
}
.canvas-container {
position: relative;
}
#canvas {
border: 1px solid #ccc;
margin-bottom: 10px;
position: relative; /* Assicura che la griglia possa essere sovrapposta */
}
.grid {
position: absolute;
top: 0;
left: 0;
width: 100%; /* Larghezza pari a quella dell'immagine */
height: 100%; /* Altezza pari a quella dell'immagine */
background-image: linear-gradient(to right, transparent 33.33%, rgba(0, 0, 0, 0.3) 33.33%, rgba(0, 0, 0, 0.3) 66.66%, transparent 66.66%),
linear-gradient(to bottom, transparent 33.33%, rgba(0, 0, 0, 0.3) 33.33%, rgba(0, 0, 0, 0.3) 66.66%, transparent 66.66%);
background-size: 10px 10px;
pointer-events: none;
display: none; /* Inizialmente nascosta */
}
.show-grid .grid {
display: block; /* Mostra la griglia quando la classe .show-grid è presente */
}
.grey-border {
box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.1); /* Evidenzia il rettangolo grigio */
}
.toolbar {
margin-bottom: 10px;
}
input[type="file"] {
display: none;
}
label, button {
background-color: #008CBA;
color: white;
padding: 10px 20px;
text-align: left;
cursor: pointer;
border-radius: 5px;
margin-right: 10px;
}
input[type="number"] {
width: 70px; /* Increased width to accommodate decimal input */
margin-left: 10px;
margin-right: 10px;
}
button:hover {
background-color: #005f7a;
}
.crop-download-btn {
margin-top: 10px; /* Space above the button */
}
const canvas = new fabric.Canvas('canvas');
let originalImageObject; // Variabile per memorizzare l'oggetto immagine originale
let imageObject; // Variabile per memorizzare l'oggetto immagine corrente
let isGridVisible = false;
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);
}
canvas.setWidth(img.getScaledWidth());
canvas.setHeight(img.getScaledHeight());
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';
// Aggiorna le dimensioni della griglia
updateGridSize(img.getScaledWidth(), img.getScaledHeight());
});
};
reader.readAsDataURL(file);
}
function updateGridSize(width, height) {
const grid = document.querySelector('.grid');
grid.style.width = width + 'px';
grid.style.height = height + 'px';
}
function rotateImage(direction) {
const degrees = parseFloat(document.getElementById('rotation-degrees').value);
if (imageObject) {
const newAngle = imageObject.angle + direction * degrees;
imageObject.rotate(newAngle);
canvas.renderAll();
} else {
alert('Please upload an image first.');
}
}
function resetImage() {
if (originalImageObject) {
// Ripristina l'immagine alle sue proprietà originali
canvas.clear();
fabric.Image.fromObject(originalImageObject, function(img) {
img.set({
scaleX: 1,
scaleY: 1,
left: 0,
top: 0,
angle: 0,
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);
}
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 toggleGrid() {
if (imageObject) {
const canvasContainer = document.querySelector('.canvas-container');
canvasContainer.classList.toggle('show-grid');
isGridVisible = !isGridVisible;
updateGreyBorder(); // Aggiorna lo stato del rettangolo grigio
} else {
alert('Please upload an image first.');
}
}
function updateGreyBorder() {
const canvasElement = document.getElementById('canvas');
if (isGridVisible) {
canvasElement.classList.add('grey-border');
} else {
canvasElement.classList.remove('grey-border');
}
}
function cropAndDownloadImage() {
if (imageObject) {
// Calcola il grado di rotazione e la direzione
const rotationDegrees = Math.abs(imageObject.angle % 360);
const rotationDirection = imageObject.angle >= 0 ? 'CW' : 'CCW';
// 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('.')}__CROP_${rotationDegrees.toFixed(1)}${rotationDirection}.${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.');
}
}