可以在上传之前在 html 表单上调整图像(客户端-前端问题

Possible to resize an image (client side) on an html form before upload?(可以在上传之前在 html 表单上调整图像(客户端)的大小吗?)

本文介绍了可以在上传之前在 html 表单上调整图像(客户端)的大小吗?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

I have a standard html input form that includes a field for uploading a file (image).

很遗憾，我无法编辑处理文件的后端 php，但我需要将图像调整为特定大小.

I unfortunatly cannot edit the backend php that processes the file, but I need to resize the images to a certain size.

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

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?

谢谢！！！

推荐答案

您可以使用新的 FileReader 让用户从本地文件系统中选择图像.

You can use the new FileReader to let the user select an image from their local file system.

然后就可以根据需要使用canvas来调整图片大小了.

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>

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

Modern browsers support the FileReader (but for IE you need 10+).

这篇关于可以在上传之前在 html 表单上调整图像(客户端)的大小吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！