Grazie ninja72 per avermi risolto il problema con l'utilissimo codice che mi hai inviato.
Siccome le immagini non risultanavano proporzionate ho correto le righe che calcolano la "ratio".
Ho poi cercato di semplificare l'oggetto <canvas> mettendo tutti gli attributi nella riga
riga1: <canvas id="tela" width="800" height="600" style="border: 2px solid red;"></canvas>
ma non capisco perché le due righe seguenti:
cx.width = 800 // si dovrebbe eliminare
cx.height = 600 // si dovrebbe eliminare
non si possono eliminare essendo questi attributi contenuti nella riga1
Grazie ancora
lanvoel
codice:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>test</title> </head> <body> <canvas id="tela" width="800" height="600" style="border: 2px solid red;"></canvas> <br> <label for="photo">Canvas</label> <input type="file" name="photo" accept="image/*" id="photo"> <script> let ratio=1; const selectPhoto = document.getElementById('photo') var c = document.getElementById("tela") var cx = c.getContext("2d") cx.width = 800 // si dovrebbe eliminare cx.height = 600 // si dovrebbe eliminare selectPhoto.addEventListener('change', (e) => { const img = new Image() const url = URL.createObjectURL(e.target.files[0]) img.src = url img.onload = () => { if (img.width >img.height) { ratio=img.width/cx.width } else { ratio=img.height/cx.height } let newWidth = img.width / ratio let newHeight = img.height / ratio cx.clearRect(0, 0, cx.width, cx.height) cx.drawImage(img, 0, 0, newWidth, newHeight) URL.revokeObjectURL(url) } }) </script> </body> </html>
Rispondi quotando
