Vi posto un piccolo lavoro, è una lavagna per la firma o disegno.
Può essere inserito in un iframe
Può essere utilizzato in una webview
Possono essere specificati alcuni parametri come :
il colore della linea {color=000000}
lo spessore della linea {thickness=4}
la dimensione della view {width=1000&height=600}
esempio : ‘drawing.htm?thickness=2&width=1000&height=600’
Spero sia utile per i vostri progetti.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
padding: 0;
margin: 0;
}
svg:not(:root) {
display: block;
}
.playable-canvas {
border: 1px solid #4d4e53;
border-radius: 2px;
}
.buttons {
margin-top: 10px;
display: flex;
justify-content: center;
gap: 10px;
}
button {
padding: 10px 20px;
font-size: 16px;
}
</style>
</head>
<body>
<canvas id="canvas" style="border:solid black 1px;"></canvas>
<div class="buttons">
<button onclick="clearCanvas()">Cancella</button>
<button onclick="undo()">Undo</button>
<button onclick="saveAsJPG()">Salva</button>
</div>
<script>
// Funzione per ottenere i parametri dall'URL
function getQueryParams() {
const urlParams = new URLSearchParams(window.location.search);
const color = urlParams.get('color') || '000000'; // Colore di default nero
const thickness = parseInt(urlParams.get('thickness')) || 4; // Spessore di default 4
const width = parseInt(urlParams.get('width')) || 600; // Larghezza di default 600
const height = parseInt(urlParams.get('height')) || 600; // Altezza di default 600
return { color: `#${color}`, thickness, width, height };
}
const { color, thickness, width, height } = getQueryParams(); // Recupera i parametri dall'URL
// Imposta il canvas con la larghezza e l'altezza specificate
const canvas = document.getElementById("canvas");
canvas.width = width;
canvas.height = height;
// Funzione di inizializzazione
function startup() {
const el = document.getElementById("canvas");
el.addEventListener("touchstart", handleStart);
el.addEventListener("touchend", handleEnd);
el.addEventListener("touchcancel", handleCancel);
el.addEventListener("touchmove", handleMove);
el.addEventListener("mousedown", handleMouseDown);
el.addEventListener("mousemove", handleMouseMove);
el.addEventListener("mouseup", handleMouseUp);
el.addEventListener("mouseleave", handleMouseUp); // Gestire quando il mouse esce dal canvas
}
let drawing = false;
let lastMousePos = { x: 0, y: 0 };
document.addEventListener("DOMContentLoaded", startup);
const ongoingTouches = [];
const history = []; // Array per salvare lo stato precedente del canvas
function handleStart(evt) {
evt.preventDefault();
const el = document.getElementById("canvas");
const ctx = el.getContext("2d");
const touches = evt.changedTouches;
for (let i = 0; i < touches.length; i++) {
ongoingTouches.push(copyTouch(touches[i]));
ctx.beginPath();
}
saveHistory(); // Salva lo stato corrente del canvas
}
function handleMove(evt) {
evt.preventDefault();
const el = document.getElementById("canvas");
const ctx = el.getContext("2d");
const touches = evt.changedTouches;
for (let i = 0; i < touches.length; i++) {
const idx = ongoingTouchIndexById(touches[i].identifier);
if (idx >= 0) {
ctx.beginPath();
ctx.moveTo(ongoingTouches[idx].pageX, ongoingTouches[idx].pageY);
ctx.lineTo(touches[i].pageX, touches[i].pageY);
ctx.lineWidth = thickness; // Usa lo spessore specificato
ctx.strokeStyle = color; // Usa il colore specificato
ctx.stroke();
ongoingTouches.splice(idx, 1, copyTouch(touches[i]));
}
}
}
function handleEnd(evt) {
evt.preventDefault();
const el = document.getElementById("canvas");
const ctx = el.getContext("2d");
const touches = evt.changedTouches;
for (let i = 0; i < touches.length; i++) {
const idx = ongoingTouchIndexById(touches[i].identifier);
if (idx >= 0) {
ctx.lineWidth = thickness; // Usa lo spessore specificato
ctx.strokeStyle = color; // Usa il colore specificato
ctx.stroke();
ongoingTouches.splice(idx, 1);
}
}
}
function handleCancel(evt) {
evt.preventDefault();
const touches = evt.changedTouches;
for (let i = 0; i < touches.length; i++) {
let idx = ongoingTouchIndexById(touches[i].identifier);
ongoingTouches.splice(idx, 1);
}
}
function copyTouch({ identifier, pageX, pageY }) {
return { identifier, pageX, pageY };
}
function ongoingTouchIndexById(idToFind) {
for (let i = 0; i < ongoingTouches.length; i++) {
if (ongoingTouches[i].identifier === idToFind) {
return i;
}
}
return -1;
}
// Funzione per cancellare il canvas
function clearCanvas() {
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);
history.length = 0; // Svuota la cronologia
}
// Funzione per salvare lo stato del canvas (per undo)
function saveHistory() {
const canvas = document.getElementById("canvas");
history.push(canvas.toDataURL()); // Salva lo stato corrente
}
// Funzione Undo (torna allo stato precedente)
function undo() {
if (history.length > 0) {
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const previousState = history.pop(); // Ottieni l'ultimo stato
const img = new Image();
img.src = previousState;
img.onload = function () {
ctx.clearRect(0, 0, canvas.width, canvas.height); // Pulisci il canvas
ctx.drawImage(img, 0, 0); // Ripristina lo stato precedente
};
}
}
// Funzione per salvare il disegno come JPG
function saveAsJPG() {
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
// Crea un canvas temporaneo per disegnare l'immagine con lo sfondo bianco
const tempCanvas = document.createElement("canvas");
tempCanvas.width = canvas.width;
tempCanvas.height = canvas.height;
const tempCtx = tempCanvas.getContext("2d");
// Riempie lo sfondo con bianco
tempCtx.fillStyle = "#ffffff";
tempCtx.fillRect(0, 0, tempCanvas.width, tempCanvas.height);
// Disegna l'immagine del canvas originale sopra lo sfondo bianco
tempCtx.drawImage(canvas, 0, 0);
// Crea il link per il download
const link = document.createElement("a");
link.download = "disegno.jpg";
// Converti il canvas temporaneo in un'immagine JPEG
link.href = tempCanvas.toDataURL("image/jpeg", 0.8); // Converti in JPEG con qualità 0.8
link.click();
}
function handleMouseDown(evt) {
drawing = true;
const el = document.getElementById("canvas");
const ctx = el.getContext("2d");
const mousePos = getMousePos(el, evt);
lastMousePos = mousePos; // Salviamo la posizione iniziale
ctx.beginPath();
ctx.moveTo(mousePos.x, mousePos.y); // Iniziamo a disegnare da questa posizione
}
// Funzione per gestire il movimento del mouse
function handleMouseMove(evt) {
if (!drawing) return; // Se non stiamo disegnando, non fare nulla
const el = document.getElementById("canvas");
const ctx = el.getContext("2d");
const mousePos = getMousePos(el, evt);
ctx.lineTo(mousePos.x, mousePos.y);
ctx.strokeStyle = color; // Usa il colore specificato
ctx.lineWidth = thickness; // Usa lo spessore specificato
ctx.stroke();
lastMousePos = mousePos; // Aggiorniamo la posizione precedente
}
// Funzione per finire il disegno con il mouse
function handleMouseUp() {
drawing = false; // Fine del disegno
}
// Funzione per ottenere la posizione del mouse nel canvas
function getMousePos(canvas, evt) {
const rect = canvas.getBoundingClientRect();
return {
x: evt.clientX - rect.left,
y: evt.clientY - rect.top,
};
}
</script>
</body>
</html>