javascript 上传前可以在 html 表单上调整图像（客户端）的大小吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17583984/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Possible to resize an image (client side) on an html form before upload?
提问by Mark
I have a standard html input form that includes a field for uploading a file (image).
我有一个标准的 html 输入表单，其中包含一个用于上传文件（图像）的字段。
I unfortunatly cannot edit the backend php that processes the file, but I need to resize the images to a certain size.
不幸的是，我无法编辑处理文件的后端 php，但我需要将图像调整为特定大小。
I was thinking I could pull off this trick by having the images resized by jquery or alternative client side methods, on the form, before the actual submission to the PHP form.
我想我可以通过在实际提交到 PHP 表单之前在表单上通过 jquery 或替代客户端方法调整图像大小来实现这个技巧。
Is this possible? Anyone know of a good method?
这可能吗？有谁知道一个好的方法吗？
Thanks!!!
谢谢！！！
回答by markE
You can use the new FileReader to let the user select an image from their local file system.
您可以使用新的 FileReader 让用户从其本地文件系统中选择图像。
Then you can use canvas to resize the image as needed.
然后您可以使用画布根据需要调整图像大小。
This code lets the user select a local image file.
此代码允许用户选择本地图像文件。
The image will be scaled to half size on the client side.
图像将在客户端缩放到一半。
<!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>
Modern browsers support the FileReader (but for IE you need 10+).
现代浏览器支持 FileReader（但对于 IE，您需要 10+）。
