小编典典

如何在浏览器中通过Javascript压缩图像?

javascript

TL; DR;

上传之前,有没有一种方法可以直接在浏览器端压缩图像(主要是jpeg,png和gif)?我很确定JavaScript可以做到这一点,但是我找不到实现它的方法。

这是我要实现的完整方案:

  • 用户访问我的网站,然后通过input type="file"元素选择图片,
  • 该图片是通过JavaScript检索的,我们进行了一些验证,例如正确的文件格式,最大文件大小等,
  • 如果一切正常,则会在页面上显示图像的预览,
  • 用户可以执行一些基本操作,例如将图像旋转90°/ -90°,按照预定义的比例进行裁剪等,或者用户可以上传其他图像并返回步骤1,
  • 当用户满意时,然后将编辑的图像压缩并本地“保存”(不保存到文件中,而是保存在浏览器的内存/页面中),-
  • 用户使用姓名,年龄等数据填写表单,
  • 用户单击“完成”按钮,然后将包含数据和压缩图像的表单发送到服务器(不使用AJAX),

直到最后一步的整个过程都应该在客户端完成,并且应该与最新的Chrome和Firefox,Safari 5+和 IE 8+
兼容。如果可能的话,应该只使用JavaScript(但是我很确定这是不可能的)。

我现在还没有编写任何代码,但是我已经考虑过了。可以通过FileAPI在本地读取文件,可以使用Canvas元素进行图像预览和编辑,但是
我找不到找到图像压缩部分的方法

根据html5please.com和caniuse.com的说法,要支持这些浏览器非常困难(由于IE),但是可以使用诸如FlashCanvas和FileReader之类的polyfill来实现。

实际上,目标是减小文件大小,因此我认为图像压缩是一种解决方案。但是,我知道上载的图像将每次都在同一位置显示在我的网站上,并且我知道该显示区域的尺寸(例如200x400)。因此,我可以调整图像大小以适合这些尺寸,从而减小文件大小。我不知道这种技术的压缩率是多少。

你怎么看 ?您有什么建议要告诉我吗?您知道在JavaScript中压缩图像浏览器端的任何方法吗?感谢您的答复。


阅读 452

收藏
2020-05-01

共1个答案

小编典典

简而言之:

  • 使用HTML5 FileReader API和.readAsArrayBuffer读取文件
  • 使用文件数据创建一个Blob,然后使用window.URL.createObjectURL(blob)获取其url。
  • 创建新的Image元素并将其src设置为文件blob url
  • 将图像发送到画布。画布尺寸设置为所需的输出尺寸
  • 通过canvas.toDataURL(“ image / jpeg”,0.7)从画布获取按比例缩小的数据(设置您自己的输出格式和质量)
  • 将新的隐藏输入附加到原始表单,并基本上以普通文本的形式传输dataURI图像
  • 在后端,读取dataURI,从Base64解码并保存
2020-05-01