可以在上传之前在html表单上调整图像(客户端)的大小吗？

Question

可以在上传之前在html表单上调整图像(客户端)的大小吗？

Mar*_*ark 6 html javascript forms upload jquery

我有一个标准的html输入表单,其中包含一个用于上传文件(图像)的字段.

我不幸的是无法编辑处理文件的后端php,但我需要将图像大小调整到一定的大小.

我想我可以通过在实际提交到PHP表单之前在表单上使用jquery或替代客户端方法调整图像大小来解决这个问题.

这可能吗？有人知道一个好方法吗？

谢谢!!!

Answer 1

mar*_*rkE 11

您可以使用新的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>

Run Code Online (Sandbox Code Playgroud)

现代浏览器支持FileReader(但对于IE,您需要10+).

归档时间：	12 年，2 月前
查看次数：	11492 次
最近记录：	9 年，2 月前