Możliwość zmiany rozmiaru obrazu (strony klienta) na formularzu HTML przed przesłaniem?

Mam standardowy formularz wejściowy html, który zawiera pole do przesłania pliku (obrazu).Możliwość zmiany rozmiaru obrazu (strony klienta) na formularzu HTML przed przesłaniem?

Niestety nie mogę edytować php zaplecza, który przetwarza plik, ale muszę zmienić rozmiar obrazów do określonego rozmiaru.

Myślałem, że uda mi się wyciągnąć tę sztuczkę, zmieniając rozmiary obrazów za pomocą jquery lub alternatywnych metod po stronie klienta, na formularzu, przed rzeczywistym przesłaniem do formularza PHP.

Czy to możliwe? Ktoś wie o dobrej metodzie?

Dzięki!

Źródło

2013-07-11 Mark

Możliwe, że możesz narysować zdjęcie na płótnie, a następnie naDataUrl. Nie jestem pewien, czy to zadziała. – Amadan

Możesz użyć nowego FileReadera, aby pozwolić użytkownikowi wybrać obraz ze swojego lokalnego systemu plików.

Następnie można użyć płótna do zmiany rozmiaru obrazu w razie potrzeby.

enter image description here

Kod ten pozwala użytkownikowi wybrać lokalny plik obrazu.

Obraz zostanie przeskalowany do połowy rozmiaru po stronie klienta.

<!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>

Nowoczesne przeglądarki obsługują FileReader (ale dla IE potrzeba 10+).

Źródło

2013-07-11 02:38:09 markE

Jak mogę dodać przesłać obraz o zmienionym rozmiarze do mysql – INOH

Możliwość zmiany rozmiaru obrazu (strony klienta) na formularzu HTML przed przesłaniem?

Odpowiedz

Powiązane problemy