私はファイル（画像）をアップロードするためのフィールドを含む標準HTML入力フォームを持っています。アップロードする前にHTMLフォームでイメージ（クライアント側）のサイズを変更できますか？
残念ながら、ファイルを処理するバックエンドPHPを編集することはできませんが、画像のサイズを特定のサイズに変更する必要があります。
私は、PHPフォームへの実際の提出の前に、イメージをjqueryまたは代替のクライアント側のメソッドによってフォーム上でサイズ変更することによって、このトリックを取り除くことができると考えていました。
これは可能ですか？誰でも良い方法を知っていますか？
ありがとうございました！
新しいFileReaderを使用すると、ユーザーがローカルファイルシステムからイメージを選択できるようになります。
キャンバスを使用して、必要に応じて画像のサイズを変更できます。
このコードは、ユーザーがローカルの画像ファイルを選択することができます。
イメージはクライアント側で半分のサイズにスケーリングされます。
<!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>
最新のブラウザでは、FileReaderがサポートされています（IEの場合は10+が必要です）。
アップロードされた画像をmysqlに追加する方法 – INOH
可能であれば、画像をキャンバスに描画してからtoDataUrlすることができます。それがうまくいくかどうかはわかりません。 – Amadan