javascript - 将图像读入JS并随后对其进行压缩

Question

我是一名服务器端开发人员，刚开始接触前端开发。我一直在修改普通的 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 函数(假设我的目标是压缩它并将其发送到服务器)？这种情况会在选择图像时发生(即按浏览按钮)，还是在按提交时发生？我应该在哪里举办事件以及如何从那里开始？一个带有示例的快速说明性答案就太好了!

<小时/>

我一直在尝试在图像选择时执行此操作(但无济于事):

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. 如果处理成功，当用户点击提交时，您将覆盖表单的默认行为，并发送 FormData包含您的新文件/Blob，而不是原始文件/Blob。

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 属性。