如何将调整大小的用户上传图像发送到服务器（Rails）？答案

【问题标题】：How to send a resized user uploaded image to the server (Rails)?如何将调整大小的用户上传图像发送到服务器（Rails）？
【发布时间】：2022-01-26 12:20:54
【问题描述】：

我知道有大量关于图像大小调整的帖子，我阅读了很多。我能够调整用户上传的图像的大小。但我真的不明白如何用这个新的和调整大小的图像发布表单。

我从this post实现了调整大小的方法，但我不明白将blob附加到formData的部分。

const input = this.$refs.input;
const file = input.files[0];

// Load the image
var reader = new FileReader();
reader.onload = function (readerEvent) {
  var image = new Image();
  image.onload = function (imageEvent) {
    // Resize the image
    var canvas = document.createElement('canvas');
    const width = 200;
    const height = 300;
    canvas.width = width;
    canvas.height = height;
    canvas.getContext('2d').drawImage(image, 0, 0, width, height);
    var dataUrl = canvas.toDataURL('image/jpeg');
    var resizedImage = dataURLToBlob(dataUrl);

    // I don't understand that part
    // $.event.trigger({
    //   type: 'imageResized',
    //   blob: resizedImage,
    //   url: dataUrl,
    // });

    // I understand that an image input value can not be changed programatically
    // const url = URL.createObjectURL(resizedImage);
    // input.value = url;
  };
  image.src = readerEvent.target.result;
};
reader.readAsDataURL(file);

明确地说，这是一个 Rails 项目，表单（包括许多其他字段，而不仅仅是图像）是使用 simple_form 构建的。

我真的应该将文件输入放在表单之外吗？我应该拦截表单提交调用以手动构造formData，包括调整大小的图像吗？我应该在服务器端调整大小吗？

我的理解可能是错误的，所以我非常感谢任何帮助！

【问题讨论】：

标签： javascript ruby-on-rails image

【解决方案1】：

您可能希望以任何方式在服务器上调整图像大小，因为浏览器在压缩它时做得不好。（见how to compress a base64 image to custom size）

fyi，可以通过一种方式以编程方式更新 FileList... Is it possible to update FileList?

关于要将文件附加到表单数据的部分您必须使用 canvas.toBlob 将其作为文件而不是 base64 字符串来获取。

async function showDemo (blob) {
  const file = blob // simulated getting a file from input

  // Load the image
  const bitmap = await createImageBitmap(blob)
  
  // Resize the image
  var canvas = document.createElement('canvas')
  const width = 200
  const height = 300
  canvas.width = width;
  canvas.height = height;
  canvas.getContext('2d').drawImage(bitmap, 0, 0, width, height);
  canvas.toBlob(function (resizedImage) {
    const fd = new FormData()
    const img = new Image()
    fd.append('upload', file, 'image.jpg')
    img.src = URL.createObjectURL(resizedImage)
    document.body.append(img)
    // upload
    // fetch(url, { method: 'post', body: fd })
  }, 'image/jpeg', 1);
}

// just to get a dummy image:
fetch('https://dummyimage.com/600x400/000/fff').then(res =>res.blob()).then(showDemo)

【讨论】：