1
私は、フォームを送信してフォームに追加する前に、クライアント側のイメージのサイズを変更しようとしています。現在イメージをサイズ変更してHTMLフォームに追加する正しい方法はありますか？
私はこれを持っている：
<form method="post" action="abc.php">
<input id="image-1" type="file" name="image-1" onchange="resizeImage('image-1')">
<input id="image-2" type="file" name="image-2" onchange="resizeImage('image-2')">
<input type="submit" value="Submit">
</form>
画像が追加され、動的に削除されている - ので、私は一緒に入れ、すべてまたは20
で何も存在しないかもしれない、この（画像をリサイズして正しく動作するようです）：
function resizeImage(inputID) {
//Read in file
var file = event.target.files[0];
//Ensure it's an image
if (file.type.match(/image.*/)) {
// Load the image
var reader = new FileReader();
reader.onload = function (readerEvent) {
var image = new Image();
image.onload = function (imageEvent) {
// Resize the image
var canvas = document.createElement('canvas'),
max_size = 1200,
width = image.width,
height = image.height;
if (width > height) {
if (width > max_size) {
height *= max_size/width;
width = max_size;
}
} else {
if (height > max_size) {
width *= max_size/height;
height = max_size;
}
}
canvas.width = width;
canvas.height = height;
canvas.getContext('2d').drawImage(image, 0, 0, width, height);
document.getElementById(inputID).src = canvas.toDataURL('image/png');
};
image.src = readerEvent.target.result;
};
reader.readAsDataURL(file);
}
}
私はこれを提出すると、最初は正常に動作しているようです。しかし、サーバー側の検証では、3000x3000pxから1200x1200pxに切り取っても、元の画像と同じサイズになります。まるでそれがまだオリジナルをアップロードしているかのように。
この新しいサイズ変更されたイメージを追加する前に、ソースを削除する必要がありますか？私は現時点で正しくしていますか？私はサーバー側の操作を制御できないため、通常の画像選択を再現する必要があります。うまくいけばこれが可能です！