上传前进行图片大小调整而不需要预览的JavaScript代码

Question

我想避免上传大文件的图片。

我更喜欢使用 HTML5 FileAPI 库来完成这项工作。

所有其他功能都已添加（上传，重新排序等），因此我只需要图像调整大小的功能。

案例：

页面上有一个用于多个文件的输入框。

在输入框变化事件（添加文件时）中，将输入的图像/文件调整大小并附加到 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
}

有人吗？

谢谢

- Bralemili

Answer 1

根据我的经验，您无法在客户端上操纵图像，然后通过表单中的文件输入上传操纵后的图像。我过去所做的与您尝试做的事情的方法包括几个步骤：

1. 使用文件输入选择图像
2. 将文件读取为dataURL
3. 使用canvas根据需要操纵图像
4. 将新图像导出为dataUrl
5. 使用ajax将图像作为dataURL上传到服务器
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％，因此除非您大幅更改图像大小，否则可能无法实现您要寻求的节省。

- QBM5

---

我想要的图像尺寸最大为1920x1080。当我用相机拍照时，分辨率为6000x4000，大小在8Mb到20Mb之间。通过调整大小，它将会约为~2Mb（希望如此）。另外，我认为我可以添加jpg质量降低以获得更小的文件大小。顺便问一下，我将收到这些dataURL's作为PHP中的$_FILES还是$_POST？谢谢您的回复。 - Bralemili

将DataURL转换为Blob对象，将其附加到FormData中，然后发送怎么样？ - Bralemili

根据您之前的问题，如果您将preferredWidth更改为1920，则解决方案将正确调整图像大小。我不是PHP程序员，所以我不知道答案，但我的猜测会是$_POST，因为它不再是实际文件，而只是传输的数据。 - QBM5

我已经尝试过这个...但是使用canvas后文件大小变得更大了...原始文件只有37kb，上传后的版本却达到了387kb...这是怎么回事？ - carinlynchin

谢谢，解决了我的需求！@Carine，对于小文件有时会出现这种情况，但如果使用 Mb 文件，则真的会缩小。我已为此创建了一个Ember组件，如果有人需要，请给我发信息。 - lpinto.eu