将图像读入 JS 以随后对其进行压缩

Question

我是一名服务器端开发人员，刚接触前端开发。我一直在修改 vanilla Javascript，需要澄清一些概念。

我正在试验的用例是通过 JS 处理图像上传（以及在所述上传到服务器之前由空中 JS 促进的压缩）。

目前我被困在第一步。想象一下以下简单的设置：

<form method="POST" action="some_url">
<input type="file" id="browse_image" onchange="compressImage(event)">
<input type="submit" value="Submit">
</form>

我的问题是：

我在哪一步尝试将图像传递给 JS 函数（假设我的目标是压缩它并将其发送到服务器）？这会发生在图像选择时（即按下browse 按钮）还是在按下Submit 时？我在哪里举办活动以及如何从那里开始？一个带有示例的快速说明性答案会很棒！

---

我一直在尝试在图像选择时这样做（无济于事）：

function compressImage(e){

     var reader = new FileReader();
     reader.readAsDataURL(e.target.files[0]);
     console.log(reader);
}

如果能获得一个概念性的演练以及一个快速的说明性示例，那就太好了。仅限 Vanilla JS，在掌握 JS 的窍门之前，我不会接触 JQuery。

Answer 1

在我看来（但这有点主观），你会在两个地方都这样做。

1. 用户从您的输入中选择一个文件
2. 你通过js处理文件
3. 如果您的处理失败（例如文件不是图像/损坏/谁知道），您可以直接让用户知道。
4. 如果处理成功，当用户单击提交时，您会覆盖表单的默认行为，并发送包含新文件/Blob 的FormData，而不是原始文件。

var toSend = null, // here we will store our processed File/Blob (the one to send)
browse_image = document.getElementById('browse_image');

// when user selects a new File
browse_image.onchange = process_user_file;
// when user decides to send it to server
document.querySelector('form').onsubmit = overwrite_default_submit;

// grab the file from the input and process it
function process_user_file(evt) {
  // since we attached the event listener through elem.onevent,
  // 'this' refers to the input
  var file = this.files[0];
  // here do your compression, for demo, we'll just check it's a png file
  var reader = new FileReader();
  // a FileReader is async, so we pass the actual checking script as the onload handler
  reader.onload = checkMagicNumber;
  reader.readAsArrayBuffer(file.slice(0,4));
}

// we don't want the real form to be submitted, but our processed File/Blob
function overwrite_default_submit(evt) {
  // block the form's submit default behavior
  evt.preventDefault();
  // create a new form result from scratch
  var form = new FormData();
  // add our File/Blob
  form.append("myfile", toSend, browse_image.files[0].name);
  // create a new AJAX request that will do the same as original form's behavior
  var xhr = new XMLHttpRequest();
  xhr.open('POST', evt.target.action);
//  xhr.send(form); // uncomment to really send the request
  console.log('sent', toSend);
}

// simply checks if it's really a png file
// for you, it will be your own compression code,
//  which implementation can not be discussed in this answer
function checkMagicNumber(evt) {
  var PNG = '89504e47';
  var arr = new Uint8Array(evt.target.result);
  var header = "";
  for(var i = 0; i < arr.length; i++) {
     header += arr[i].toString(16);
  }
  // some user friendly actions
  if(header !== PNG) {
    alert('not a png file'); // let the user know it didn't work
    browse_image.value = ""; // remove invalid File
    sub.disabled = true; // avoid the form's submission
    toSend = null; // nothing to send
  }
  else {
    toSend = browse_image.files[0]; // for demo we don't actually modify it...
    sub.disabled = false; // allow form's submission
  }
}

<form method="POST" action="some_url">
  <label>Please select a .png file</label>
  <input type="file" id="browse_image" name="myfile">
  <input type="submit" value="Submit" disabled id="sub">
</form>

Ps：请注意，即使您的原始代码也不会发送任何内容，因为您的表单中没有任何输入具有 name 属性。