È possibile ridimensionare un'immagine (lato client) su un modulo html prima del caricamento?

Ho un modulo di input html standard che include un campo per il caricamento di un file (immagine).È possibile ridimensionare un'immagine (lato client) su un modulo html prima del caricamento?

Purtroppo non posso modificare il file back-end che elabora il file, ma ho bisogno di ridimensionare le immagini ad una certa dimensione.

Stavo pensando che avrei potuto ottenere questo trucco facendo in modo che le immagini fossero ridimensionate da metodi jquery o alternativi sul lato client, sul modulo, prima dell'invio effettivo al modulo PHP.

È possibile? Qualcuno sa di un buon metodo?

Grazie !!!

fonte

2013-07-11 Mark

Probabilmente, è possibile disegnareImmagine su tela e quindi suDataUrl. Non sono sicuro se funzionerebbe. – Amadan

È possibile utilizzare il nuovo FileReader per consentire all'utente di selezionare un'immagine dal proprio file system locale.

Quindi è possibile utilizzare la tela per ridimensionare l'immagine secondo necessità.

enter image description here

Questo codice consente all'utente di selezionare un file di immagine locale.

L'immagine verrà ridimensionata a metà dimensioni sul lato client.

<!doctype html> 
<html> 
<head> 
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /> 
<title>Image preview example</title> 
<script type="text/javascript"> 
oFReader = new FileReader(), rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i; 

oFReader.onload = function (oFREvent) { 

    var img=new Image(); 
    img.onload=function(){ 
     document.getElementById("originalImg").src=img.src; 
     var canvas=document.createElement("canvas"); 
     var ctx=canvas.getContext("2d"); 
     canvas.width=img.width/2; 
     canvas.height=img.height/2; 
     ctx.drawImage(img,0,0,img.width,img.height,0,0,canvas.width,canvas.height); 
     document.getElementById("uploadPreview").src = canvas.toDataURL(); 
    } 
    img.src=oFREvent.target.result; 
}; 

function loadImageFile() { 
    if (document.getElementById("uploadImage").files.length === 0) { return; } 
    var oFile = document.getElementById("uploadImage").files[0]; 
    if (!rFilter.test(oFile.type)) { alert("You must select a valid image file!"); return; } 
    oFReader.readAsDataURL(oFile); 
} 
</script> 
</head> 

<body onload="loadImageFile();"> 
    <form name="uploadForm"> 
    <table> 
     <tbody> 
     <tr> 
      <td><img id="originalImg"/></td> 
      <td><img id="uploadPreview"/></td> 
      <td><input id="uploadImage" type="file" name="myPhoto" onchange="loadImageFile();" /></td> 
     </tr> 
     </tbody> 
    </table> 
    </form> 
</body> 
</html>

I moderni browser supportano FileReader (ma per IE occorrono 10+).

fonte

2013-07-11 02:38:09 markE

come posso aggiungere l'immagine ridimensionata di upload a mysql – INOH

È possibile ridimensionare un'immagine (lato client) su un modulo html prima del caricamento?

risposta

Problemi correlati