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

TL; DR;

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

以下是我想要实现的完整场景:

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

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

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

根据html5please.com和caniuse.com ,支持这些浏览器是非常困难的(感谢IE),但可以使用像FlashCanvas和FileReader这样的polyfill来完成。

其实,目标是减less文件大小,所以我把图像压缩视为一个解决scheme。 但是,我知道上传的图像将在我的网站上显示,每次都在同一个地方,我知道这个显示区域的尺寸(例如200×400)。 所以,我可以调整图像大小来适应这些尺寸,从而减小文件大小。 我不知道这种技术的压缩比率是多less。

你怎么看 ? 你有什么build议可以告诉我吗? 你知道任何方式来压缩JavaScript的图像浏览器端? 感谢您的回复。

简而言之:

  • 使用.readAsArrayBuffer使用HTML5 FileReader API读取文件
  • 使用文件数据创builde Blob,并使用window.URL.createObjectURL(blob)获取其URL。
  • 创build新的图像元素,并将其src设置为文件blob url
  • 将图像发送到canvas。 canvas大小设置为所需的输出大小
  • 通过canvas.toDataURL(“image / jpeg”,0.7)从canvas获取缩小的数据(设置自己的输出格式和质量)
  • 将新的隐藏input附加到原始表单,并基本上以普通文本forms传输dataURI图像
  • 在后端读取dataURI,从Base64解码并保存

来源: 代码 。

@PsychoWoods'的答案是好的。 我想提供我自己的解决scheme。 这个Javascript函数获取图像数据的URL和宽度,将其缩放到新的宽度,并返回一个新的数据URL。

 // Take an image URL, downscale it to the given width, and return a new image URL. function downscaleImage(dataUrl, newWidth, imageType, imageArguments) { "use strict"; var image, oldWidth, oldHeight, newHeight, canvas, ctx, newDataUrl; // Provide default values imageType = imageType || "image/jpeg"; imageArguments = imageArguments || 0.7; // Create a temporary image so that we can compute the height of the downscaled image. image = new Image(); image.src = dataUrl; oldWidth = image.width; oldHeight = image.height; newHeight = Math.floor(oldHeight / oldWidth * newWidth) // Create a temporary canvas to draw the downscaled image on. canvas = document.createElement("canvas"); canvas.width = newWidth; canvas.height = newHeight; // Draw the downscaled image on the canvas and return the new data URL. ctx = canvas.getContext("2d"); ctx.drawImage(image, 0, 0, newWidth, newHeight); newDataUrl = canvas.toDataURL(imageType, imageArguments); return newDataUrl; } 

这个代码可以在任何有数据URL的地方使用,并且需要一个缩小图像的数据URL。

我看到其他答案中缺less两件事情:

  • canvas.toBlob (当可用时)比canvas.toDataURLcanvas.toDataURL ,也是asynchronous的。
  • 文件 – >图像 – >canvas – >文件转换丢失EXIF数据; 特别是现代手机/平板电脑通常设置的关于图像旋转的数据。

以下脚本处理这两点:

 // From https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob, needed for Safari: if (!HTMLCanvasElement.prototype.toBlob) { Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', { value: function(callback, type, quality) { var binStr = atob(this.toDataURL(type, quality).split(',')[1]), len = binStr.length, arr = new Uint8Array(len); for (var i = 0; i < len; i++) { arr[i] = binStr.charCodeAt(i); } callback(new Blob([arr], {type: type || 'image/png'})); } }); } window.URL = window.URL || window.webkitURL; // Modified from https://stackoverflow.com/a/32490603, cc by-sa 3.0 // -2 = not jpeg, -1 = no data, 1..8 = orientations function getExifOrientation(file, callback) { // Suggestion from http://code.flickr.net/2012/06/01/parsing-exif-client-side-using-javascript-2/: if (file.slice) { file = file.slice(0, 131072); } else if (file.webkitSlice) { file = file.webkitSlice(0, 131072); } var reader = new FileReader(); reader.onload = function(e) { var view = new DataView(e.target.result); if (view.getUint16(0, false) != 0xFFD8) { callback(-2); return; } var length = view.byteLength, offset = 2; while (offset < length) { var marker = view.getUint16(offset, false); offset += 2; if (marker == 0xFFE1) { if (view.getUint32(offset += 2, false) != 0x45786966) { callback(-1); return; } var little = view.getUint16(offset += 6, false) == 0x4949; offset += view.getUint32(offset + 4, little); var tags = view.getUint16(offset, little); offset += 2; for (var i = 0; i < tags; i++) if (view.getUint16(offset + (i * 12), little) == 0x0112) { callback(view.getUint16(offset + (i * 12) + 8, little)); return; } } else if ((marker & 0xFF00) != 0xFF00) break; else offset += view.getUint16(offset, false); } callback(-1); }; reader.readAsArrayBuffer(file); } // Derived from https://stackoverflow.com/a/40867559, cc by-sa function imgToCanvasWithOrientation(img, rawWidth, rawHeight, orientation) { var canvas = document.createElement('canvas'); if (orientation > 4) { canvas.width = rawHeight; canvas.height = rawWidth; } else { canvas.width = rawWidth; canvas.height = rawHeight; } if (orientation > 1) { console.log("EXIF orientation = " + orientation + ", rotating picture"); } var ctx = canvas.getContext('2d'); switch (orientation) { case 2: ctx.transform(-1, 0, 0, 1, rawWidth, 0); break; case 3: ctx.transform(-1, 0, 0, -1, rawWidth, rawHeight); break; case 4: ctx.transform(1, 0, 0, -1, 0, rawHeight); break; case 5: ctx.transform(0, 1, 1, 0, 0, 0); break; case 6: ctx.transform(0, 1, -1, 0, rawHeight, 0); break; case 7: ctx.transform(0, -1, -1, 0, rawHeight, rawWidth); break; case 8: ctx.transform(0, -1, 1, 0, 0, rawWidth); break; } ctx.drawImage(img, 0, 0, rawWidth, rawHeight); return canvas; } function reduceFileSize(file, acceptFileSize, maxWidth, maxHeight, quality, callback) { if (file.size <= acceptFileSize) { callback(file); return; } var img = new Image(); img.onerror = function() { URL.revokeObjectURL(this.src); callback(file); }; img.onload = function() { URL.revokeObjectURL(this.src); getExifOrientation(file, function(orientation) { var w = img.width, h = img.height; var scale = (orientation > 4 ? Math.min(maxHeight / w, maxWidth / h, 1) : Math.min(maxWidth / w, maxHeight / h, 1)); h = Math.round(h * scale); w = Math.round(w * scale); var canvas = imgToCanvasWithOrientation(img, w, h, orientation); canvas.toBlob(function(blob) { console.log("Resized image to " + w + "x" + h + ", " + (blob.size >> 10) + "kB"); callback(blob); }, 'image/jpeg', quality); }); }; img.src = URL.createObjectURL(file); } 

用法示例:

 inputfile.onchange = function() { // If file size > 500kB, resize such that width <= 1000, quality = 0.9 reduceFileSize(this.files[0], 500*1024, 1000, Infinity, 0.9, blob => { let body = new FormData(); body.set('file', blob, blob.name || "file.jpg"); fetch('/upload-image', {method: 'POST', body}).then(...); }); }; 

据我所知,你不能使用canvas压缩图像,相反,你可以调整它的大小。 使用canvas.toDataURL不会让你select使用的压缩比。 你可以看看canimage,它完全是你想要的: https : //github.com/nfroidure/CanImage/blob/master/chrome/canimage/content/canimage.js

实际上,调整图像的大小通常足以减小图像的大小,但如果您想进一步研究,则必须使用新引入的方法file.readAsArrayBuffer来获取包含图像数据的缓冲区。

然后,根据图像格式规范( http://en.wikipedia.org/wiki/JPEG或http://en.wikipedia.org/wiki/Portable_Network_Graphics )使用DataView来读取它的内容。

这将是很难处理图像数据压缩,但它是一个更糟糕的尝试。 另一方面,您可以尝试删除PNG标头或JPEG Exif数据,以使图像更小,这样做应该更容易。

您将不得不在另一个缓冲区上创build另一个DataWiew并将其填充过滤的图像内容。 然后,您只需要使用window.btoa将图像内容编码为DataURI。

让我知道,如果你实现类似的东西,将通过代码感兴趣。

对于JPG图像压缩,你可以使用最好的压缩技术称为JIC(Javascript图像压缩)这一定会帮助你 – > https://github.com/brunobar79/JIC