图像在上传之前调整大小而不预览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
}

任何人？

谢谢

Answer 1

根据我的经验,您无法在客户端操作图像,然后通过表单中的文件输入上传受控图像.

我过去做的事情的方式涉及几个步骤.

1. 使用文件输入选择图像
2. 将文件作为dataURL读取
3. 使用画布根据需要操作图像
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%,这样您可能看不到所需的节省,除非您要大幅改变图像大小.