可以在上传之前在 html 表单上调整图像（客户端）的大小吗？
Posted
技术标签:
【中文标题】可以在上传之前在 html 表单上调整图像（客户端）的大小吗？【英文标题】：Possible to resize an image (client side) on an html form before upload? 【发布时间】：2013-07-09 04:05:26 【问题描述】：我有一个标准的 html 输入表单，其中包含一个用于上传文件（图像）的字段。
很遗憾，我无法编辑处理文件的后端 php，但我需要将图像调整为特定大小。
我想我可以通过在实际提交到 PHP 表单之前在表单上通过 jquery 或其他客户端方法调整图像大小来实现这个技巧。
这可能吗？有谁知道好的方法吗？
谢谢！！！
【问题讨论】：
可能，你可以先将drawImage绘制到canvas，然后再toDataUrl。不确定它是否会起作用。 【参考方案1】：您可以使用新的 FileReader 让用户从本地文件系统中选择图像。
然后就可以根据需要使用canvas来调整图片大小了。
此代码允许用户选择本地图像文件。
图像将在客户端缩放到一半。
<!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以上是关于可以在上传之前在 html 表单上调整图像（客户端）的大小吗？的主要内容，如果未能解决你的问题，请参考以下文章
html HTML5 FileReader + canvas调整器，用于在使用jquery上传图像之前调整大小和预览。