可以在上传之前调整图像（客户端）在html表单上的大小？ [英] Possible to resize an image (client side) on an html form before upload?
问题描述
我有一个标准的html输入表单，其中包含一个用于上传文件的域（image）。
我不能编辑处理文件的后端php，但我需要调整图像大小。
我想我可以通过jquery或其他客户端方法调整图像的大小，表单，在实际提交到PHP表单之前。
这可能吗？任何人都知道一个好的方法？
谢谢!!!
您可以使用新的FileReader让用户从他们的本地文件系统中选择一个图像。
然后，您可以根据需要使用画布调整图像大小。 >
这段代码让用户选择一个本地图像文件。
该图片将在客户端缩放至一半尺寸。
<！doctype html>
< html>
< head>
< meta content =text / html; charset = UTF-8http-equiv =Content-Type/>
< title>图片预览示例< / 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\光栅| image\ / x\-CMX | image\ / x\图标| image\ / x\-portable\-anymap | image\ / x\-portable\\ \\位图| image\ / x\-portable\-graymap的| image\ / x\-portable\-像素图| 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（您必须选择一个有效的图像文件！）;返回; }
oFReader.readAsDataURL（oFile）;
}
< / script>
< / head>
< body onload =loadImageFile（）;>
<表格名称=uploadForm>
< table>
< tbody>
< tr>
< td>< img id =originalImg/>< / td>
< td>< img id =uploadPreview/>< / td>
< td>< input id =uploadImagetype =filename =myPhotoonchange =loadImageFile（）; />< / TD>
< / tr>
< / tbody>
< / table>
< / form>
< / body>
< / html>
现代浏览器支持FileReader（但对于IE，您需要10+）。
I have a standard html input form that includes a field for uploading a file (image).
I unfortunatly cannot edit the backend php that processes the file, but I need to resize the images to a certain size.
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.
Is this possible? Anyone know of a good method?
Thanks!!!
You can use the new FileReader to let the user select an image from their local file system.
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+).
这篇关于可以在上传之前调整图像（客户端）在html表单上的大小？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
