Javascript 将图像读入JS，然后对其进行压缩

我是一名服务器端开发人员，是前端开发的新手。我一直在修补香草Javascript，需要澄清一些概念

我正在试验的用例是在通过JS上传到服务器之前处理图像上传和mid-air JS促进的压缩

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

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

---

如果能得到一个概念性的演练，再加上一个快速的示例，那就太好了。只是香草JS，在我掌握JS的窍门之前，我不会去碰JQuery。

在我看来，这有点主观，你可以在两个地方都做

用户从输入中选择一个文件 您可以通过js处理该文件 如果处理失败，例如文件不是图像/已损坏/谁知道，您可以直接让用户知道。 如果处理成功，当用户单击“提交”时，您将覆盖表单的默认行为，并发送包含新文件/Blob而不是原始文件/Blob的。 var toSend=null，//在这里，我们将存储要发送的已处理文件/Blob browse_image=document.getElementById'browse_image'； //当用户选择新文件时 浏览\u image.onchange=处理\u用户\u文件； //当用户决定将其发送到服务器时 document.querySelector'form'.onsubmit=overwrite\u default\u submit； //从输入中获取文件并对其进行处理 函数进程\用户\文件EVT{ //由于我们通过elem.onevent连接了事件侦听器， //“this”指的是输入 var file=this.files[0]； //这里做你的压缩，为了演示，我们只检查它是一个png文件 var reader=新文件读取器； //FileReader是异步的，因此我们将实际的检查脚本作为onload处理程序传递 reader.onload=checkMagicNumber； reader.readAsArrayBufferfile.slice0,4； } //我们不希望提交真实的表单，但希望提交已处理的文件/Blob 函数覆盖\u默认值\u提交vt{ //阻止表单的提交默认行为 预防违约； //从头开始创建新表单结果 var form=新FormData； //添加我们的文件/Blob form.appendmyfile，toSend，浏览\u image.files[0]。名称； //创建一个与原始表单行为相同的新AJAX请求 var xhr=新的XMLHttpRequest； xhr.open'POST'，evt.target.action； //xhr.sendform；//取消注释以真正发送请求 console.log'sent'，toSend； } //只需检查它是否真的是一个png文件 //对你来说，这将是你自己的压缩代码， //在这个回答中，哪一个实现不能被讨论 函数检查magicnumberevt{ var PNG='89504e47'； var arr=新的Uint8Arrayevt.target.result； var头=； forvar i=0；i您的输入type=submit中有一个轻微的输入错误，value=submit之后需要一个引号，但其他情况下，给定的代码对我来说很好。你有什么特别的问题？@Hamms:接得好。那么console.log语句将输出FileReader{readyState:1，result:null，error:null，onloadstart:null，onprogress:null，onload:null，onabort:null，onerror:null，onloadend:null}。这告诉我什么都没有被抓获。对于下一步该做什么，我有两三个想法，因此问题就来了。@HassanBaig好吧，你自己决定什么时候做，但这可以让你事先知道你得到的是否正确，而IMM为了更好的用户体验，最好尽快让用户知道，从而尽快进行处理。但有些人可能不同意，因为这种方法的问题是，用户可能会在第一次选择文件和单击“提交”之间改变主意，在这种情况下，您可能会无用地处理一些文件。所以实际上，这是一个意见的问题。更好的方法是在用户选择时进行默认检查，并且只有在用户决定发送时才进行真正的处理。唯一真正需要的操作是覆盖表单的默认行为。@HassanBaig我在代码中添加了一些注释，希望这能帮助您更好地理解那里发生了什么。对于this.files问题，是否确实像我一样添加了事件处理程序？要获得图像的自然宽度和自然高度，您必须自己用硬而快的方式从文件数据中获取图像，或者用简单而慢的方式使用元素。但这远远超出了这个问题的范围，而且速度较慢，因为使用这种方法，浏览器不仅会解析图像的元数据，还会解压其内容，

---

应用必要的颜色配置文件（如果有的话），甚至在某些浏览器（如chrome）中实际渲染图像，并在内存中存储未压缩版本，以便下次渲染速度更快。当我们自己解析它时，我们只请求文件，然后，在最好的情况下，我们只需要读取20字节的数据。内存中没有任何内容，对I/O的影响非常小。CheckMagicNumber是一个事件处理程序，仅当readAsArrayBuffer异步代码完成时才会执行。readAsArrayBuffer在我的版本中读取的是文件的一个4字节片段，而在另一个版本中，它读取整个文件。

function compressImage(e){

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