上传前图像大小调整，无需预览 javascript

Image resize before upload without preview javascript

本文关键字：javascript 调整 图像      更新时间：2023-09-26

我想避免上传大/重的图像文件。

我更喜欢HTML5文件API库来完成这项工作。

添加了所有其他功能（上传、重新排序等），所以我只需要图像调整大小功能。

箱：

页面上有多个文件的输入。

在输入更改事件（添加文件时），调整输入的图像/文件的大小并将它们附加到 FormData（），然后通过 ajax 将 FormData（） 发送到 PHP 脚本。

例： 

$('input').on('change',function(){
   var formData = resizeImages(this.files[0]);   
   uploadResizedImages(formData);
});
function resizeImages(files){
   formData = new FormData();
   //For each image, resize it and append to formData
   //resize file part missing....
   formData.append('files[]',this);//Appending to formData (this = currently iterated file)
   return formData;//Return the formData with resized images
}

任何人？

谢谢

根据我的经验，您无法在客户端操作图像，然后通过表单中的文件输入上传处理后的图像。

我做你过去试图做的事情的方式涉及几个步骤。

  1. 使用文件输入选择图像
  2. 将文件作为数据 URL 读取
  3. 根据需要使用画布处理图像
  4. 将新图像导出为数据网址
  5. 使用 ajax 将图像作为数据URL上传到服务器
  6. 使用服务器端函数将 dataUrl 转换为图像并存储

https://jsfiddle.net/0hmhumL1/

function resizeInCanvas(img){
  /////////  3-3 manipulate image
    var perferedWidth = 2700;
  var ratio = perferedWidth / img.width;
  var canvas = $("<canvas>")[0];
  canvas.width = img.width * ratio;
  canvas.height = img.height * ratio;
  var ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0,0,canvas.width, canvas.height);
  //////////4. export as dataUrl
  return canvas.toDataURL();
}

作为 dataUrl 上传时，您将处理图像的大小（所需的带宽）增加约 20%，因此除非您大幅更改图像大小，否则您可能无法看到所需的节省。

相关文章：