图像处理

函数

图片压缩

const tool = {
  //base64转file
  dataURLtoFile (dataurl, filename) {
    let arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
      bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n)
    while (n--) {
      u8arr[n] = bstr.charCodeAt(n)
    }
    return new File([u8arr], filename, {type: mime})
  },

  // 压缩图片
  compress (img) {
    let originWidth = img.width, // 压缩后的宽
      originHeight = img.height,
      maxWidth = 600, maxHeight = 600,
      quality = 0.8, // 压缩质量
      canvas = document.createElement('canvas'),
      drawer = canvas.getContext('2d');
    // 目标尺寸
    let targetWidth = originWidth,
      targetHeight = originHeight
    // 图片尺寸超过300x300的限制
    if (originWidth > maxWidth || originHeight > maxHeight) {
      if (originWidth / originHeight > maxWidth / maxHeight) {
        // 更宽，按照宽度限定尺寸
        targetWidth = maxWidth
        targetHeight = Math.round(maxWidth * (originHeight / originWidth))
      } else {
        targetHeight = maxHeight
        targetWidth = Math.round(maxHeight * (originWidth / originHeight))
      }
    }
    canvas.width = targetWidth
    canvas.height = targetHeight
    drawer.clearRect(0, 0, canvas.width, canvas.height)
    drawer.drawImage(img, 0, 0, canvas.width, canvas.height)
    let base64 = canvas.toDataURL('image/jpeg', quality) // 压缩后的base64图片
    let file = this.dataURLtoFile(base64, Date.parse(Date()) + '.jpg')
    file = {content: base64, file: file}
    console.log(file)//压缩后的file
    return file
  },
}
export default tool

图片压缩、方向纠正、预览、上传

实现原理

• 用filereader读取用户上传的图片数据
• 将img绘制到canvas上，用EXIF.js对图片方向进行纠正，再调用canvas.toDataURL对图片进行压缩，获取到压缩后的base64格式图片数据，转成二进制

1. 可以直接把base64数据转为File对象，如下：
// dataUrl数据转为File对象，dataUrl表示图片的base64数据
dataURLtoFile (dataurl, filename) {
var arr = dataurl.split(',')
var mime = arr[0].match(/:(.*?);/)[1]
var bstr = atob(arr[1])
var n = bstr.length; var u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
return new File([u8arr], filename, { type: mime })
}
2. 或者你想把上文 方法返回的blob对象转为File对象，可以这样写：
/**
 * Blob对象转为File对象
 * @param {object} blob 二进制对象
 * @param {string} fileName 文件名称
 * @return {object} blob改造后的file文件对象。
 * 注意：file对象就是一个特殊的blob对象
 */
function blobToFile(blob, fileName){
  blob.lastModifiedDate =new Date();
  blob.name = fileName;
  return blob;
}

工具

• RECOMPRESSOR
  在线图片优化工具，在文件尺寸和质量之间选择完美平衡。

• 智图

在线高效优质图片优化，大图需要下载客户端。

库

• Pica
  减小大图像的上传大小，节省上传时间。
  在图像处理上节省服务器资源。
  在浏览器中生成缩略图。

注意。如果您需要调整File/Blob的大小（通过表单的文件输入），请考虑使用 image-blob-reduce。

• Lena.js
  用于图像处理的微型库，有 22 个图像滤镜。

• Compressor.js
  JavaScript图像压缩器。使用浏览器的本机canvas.toBlob API进行压缩工作，这意味着它是有损压缩。通常使用此方法在上载客户端映像文件之前对其进行预压缩。

• Fabric.js
  使用 canvas JavaScript 在网页上轻松创建简单的形状（如矩形，圆形，三角形和其他多边形）或由许多路径组成的更复杂的形状。Fabric.js将允许您使用鼠标来操纵这些对象的大小，位置和旋转。

• blurify
  用于模糊图片

• merge-images
  图像合并

• cropperjs
  JavaScript 图像裁剪，旋转，缩放。

• marvinj
  滤镜、裁剪

• grade
  提供图像中的前2种主要颜色生成的互补渐变

---

相关资料
最优图像优化√
智图√
手把手教你如何编写一个前端图片压缩、方向纠正、预览、上传插件√
图片压缩原理
图片懒加载从简单到复杂

高质量前端快照方案：来自页面的「自拍」
一个有趣的例子带你入门canvas
了解 JS 压缩图片，这一篇就够了

---

HTMLCanvasElement.toDataURL
CanvasRenderingContext2D.drawImage()
FileReader
在web应用程序中使用文件
FormData 对象的使用
Using XMLHttpRequest