首页 > 其他分享 >纯前端实现 JPG 图片压缩 | canvas

纯前端实现 JPG 图片压缩 | canvas

时间：2024-03-24 19:14:28浏览次数：31  
标签：canvas const img 前端 JPG height width file

在线 Demo 体验地址 →: https://demos.sugarat.top/pages/jpg-compress/

前言

在迭代图床应用时，需要用到图片压缩，在之前分享了使用 UPNG.js 压缩 PNG 图片，这里记录分享一下如何处理 JPG 图片。

搜罗调研了一圈，JPG 图片的处理，基本都是围绕 canvas 展开的。

如何判断图片是 JPG

同样第一步当然是判断图片类型，不然就没法正常的做后续处理了。

搜索了解了一下，JPG 图片的前三字节是固定的（16进制表示）：FF D8 FF。

下图是 VS Code 插件 Hex Editor 查看一个 JPG 图片的 16 进制表示信息。

于是可以根据这个特性判断，于是就有如下的判断代码。

function isJPG(file) {
  // 提取前3个字节
  const arraybuffer = await file.slice(0, 3).arrayBuffer()

  // JPG 的前3字节16进制表示
  const signature = [0xFF, 0xD8, 0xFF]
  // 转为 8位无符号整数数组 方便对比
  // https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array
  const source = new Uint8Array(arraybuffer)

  // 逐个字节对比
  return source.every((value, index) => value === signature[index])
}

当然社区也有现成的 is-jpg 库可以使用。

可看判断代码还是很简单的。

下面将先介绍一下上述两个开源库的简单用法与特色，最后再介绍一下直接使用 canvas API 压缩的方式以及注意事项。

Compressor.js

简介

JavaScript 图像压缩工具。使用浏览器原生的 canvas.toBlob API 实现压缩，有损压缩，异步，在不同的浏览器压缩效果有所出入。一般可以用来在上传之前在客户端预压缩图像。

官方示例站点：Compressor.js PlayGround

使用

支持 npm 和 cdn 两种引入方式。

npm 加载

# 安装依赖
npm install compressorjs

// 项目中引入使用
import Compressor from 'compressorjs'

cdn 加载

<!-- html head 中引入 -->
<script src='https://cdn.staticfile.net/compressorjs/1.2.1/compressor.min.js'></script>
<!-- 项目中直接使用 Compressor 即可 -->

简单使用方式如下

// file 是待压缩图片的文件对象
new Compressor(file, {
  quality: 0.8,
  success(result) {
    // result 是压缩后的图片内容
  }
})

其余的 option 选项可以参考官方文档，主要是尺寸大小，压缩质量效果，图片信息的保留等细节的调节。

简单封装

可以简单用 Promise 封装一下，使用更加方便。

async function compressJPGByCompressor(file, ops) {
  return new Promise((resolve, reject) => {
    new Compressor(file, {
      ...ops,
      success(result) {
        resolve(result)
      },
      error(err) {
        reject(err)
      }
    })
  })
}

当然这种不支持 Promise 的回调用法函数用 Promise.withResolvers 包装最合适不过了。

当然浏览器不支持这个API的话 需要引入 polyfill 才行（可以从 core-js 中引入，或自己简单实现一下）。

function compressJPGByCompressor(file, ops) {
  const { promise, resolve, reject } = Promise.withResolvers()
  new Compressor(file, {
    ...ops,
    success(result) {
      resolve(result)
    },
    error(err) {
      reject(err)
    }
  })
  return promise
}

browser-image-compression

简介

浏览器中实现图片压缩，通过降低分辨率或大小来压缩 jpeg、png、webp 和 bmp 图像；支持使用 Web Worker 实现多线程的非阻塞压缩。

官方示例站点：compression PlayGround

其中多线程压缩使用 OffscreenCanvas: 一个可以脱离屏幕渲染的 canvas 对象。在 web worker 环境也可工作。

使用

同样的也支持 npm 和 cdn 两种引入方式。

npm 加载

# 安装依赖
npm install browser-image-compression

// 项目中引入使用
import imageCompression from 'browser-image-compression'

cdn 加载

<!-- html head 中引入 -->
<script src="https://cdn.staticfile.net/browser-image-compression/2.0.2/browser-image-compression.min.js"></script>
<!-- 项目中直接使用 imageCompression 即可 -->

简单使用方式如下

imageCompression(file, {
  // 设置压缩后的最大大小，单位是 MB（会根据目标自动调整图片质量或者尺寸）
  maxSizeMB: 1,

  // 如果希望通过百分比控制质量，只需简单计算一下即可
  // maxSizeMB: Math.round(file.size / (1024 * 1024) * quality),

  // 也可设置压缩后最大的宽或者高 （自动应用于图片中较长的那一边）
  // maxWidthOrHeight: 1920,
}).then((result) => {
  // result 为压缩后的结果
})

可以看出来使用非常简单:

  • 调整尺寸就使用 maxWidthOrHeight;
  • 保持原尺寸就调整 maxSizeMB 的值。

简单封装

function compressImageByImageCompression(file, options = {}) {
  const { width, height, quality = 0.8, ...ops } = options
  return window.imageCompression(file, {
    maxSizeMB: Math.round(file.size / (1024 * 1024) * quality),
    maxWidthOrHeight: width || height || undefined,
    libURL: 'https://cdn.staticfile.net/browser-image-compression/2.0.2/browser-image-compression.js',
    ...ops
  })
}

这样调用起来更加方便灵活。

注意事项

默认是开启的多线程压缩，会从 https://cdn.jsdelivr.net 拉取 worker 脚本。

如果存在网络原因访问不通畅，可以通过 options.libURL 替换为自定义的脚本位置，比如使用 Staticfile CDN 资源。

imageCompression(file, {
  // ...省略其它配置
  libURL: 'https://cdn.staticfile.net/browser-image-compression/2.0.2/browser-image-compression.js'
})

canvas api

主流的 JPG 纯前端压缩方案，基本都是借助 canvas 实现的，区别就在于边界场景是否考虑周全，配套的特性能否满足将使用的场景。

使用

先创建 Image 对象，获取图片的基本信息

下面是使用 URL.createObjectURL 创建资源链接的方式：

const img = new Image()
// 图片完成加载
img.onload = () => {
  // 获取图片宽高
  const { width, height } = img
  // 后续就可以使用 canvas 进行进一步的压缩处理
}

img.src = URL.createObjectURL(file)

当然这里也可以用 FileReader，此时代码看上去多2行（hhh）

const reader = new FileReader()
reader.readAsDataURL(file)
reader.onload = function (event) {
  img.src = event.target.result
}

紧接着就可以使用 canvas 进行图像的绘制（img 完成加载后）

// 创建 canvas 元素
const canvas = document.createElement('canvas')
// 获取画布的2D渲染上下文
const ctx = canvas.getContext('2d')

// 设置 canvas 的宽高与图片一致
canvas.width = img.width
canvas.height = img.height

// 在 canvas 上绘制图片（待绘制的图片，画布上的起始坐标，绘制的宽高）
ctx.drawImage(img, 0, 0, canvas.width, canvas.height)

// 如果把元素插入到页面中，则可以看到 canvas 绘制的图片
// document.body.appendChild(canvas);

接下来最核心的就行调用 canvas.toDataURL(type, quality) 进行"压缩"了。

// 只需要设置图片格式，与图片质量 两个参数即可
const compressedDataUrl = canvas.toDataURL('image/jpeg', 0.8)

接下来就需要将 compressedDataUrl 转化为 blob 或者 file 对象。

DataUrl 格式如下。

data:image/jpeg;base64,XXXX
# 数据标识符：以"data:"开头
# MIME类型描述：指示数据的类型，"image/jpeg"表示JPEG图像
# 数据编码：以base64编码表示，"XXXX"是 base64 编码数据部分

咱们先把mimetype,decodedData 这 2 部分提取出来

const [dataDescription, base64Data] = compressedDataUrl.split(',')
// 文件类型
const mimetype = dataDescription.match(/:(.*?);/)[1]

// 解码 base64 数据
const decodedData = atob(base64Data)

最后将解码的 base64 数据转成 file 即可。

let n = decodedData.length
// 创建等字节大小的 Uint8Array
const u8arr = new Uint8Array(n)

// 遍历赋值
while (n--) {
  u8arr[n] = decodedData.charCodeAt(n)
}

// 通过 Uint8Array 创建 File 对象
const result = new File([u8arr], file.name, { type: mimetype })

简单封装

完整代码如下：

async function compressImageByCanvas(file, options = {}) {
  const { quality } = options
  let { width, height } = options

  let _resolve, _reject
  const promise = new Promise((resolve, reject) => {
    _resolve = resolve
    _reject = reject
  })

  const img = new Image()
  img.onload = function () {
    // 如果只指定了宽度或高度，则另一个按比例缩放
    if (width && !height) {
      height = Math.round(img.height * (width / img.width))
    }
    else if (!width && height) {
      width = Math.round(img.width * (height / img.height))
    }

    const canvas = document.createElement('canvas')
    const ctx = canvas.getContext('2d')
    canvas.width = width || img.width
    canvas.height = height || img.height
    ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
    const compressedDataUrl = canvas.toDataURL('image/jpeg', quality)
    _resolve(dataURItoFile(compressedDataUrl, file.name))
  }

  img.src = createObjectURL(file)
  return promise
}

function dataURItoFile(dataURI, fileName) {
  const [dataDescription, base64Data] = dataURI.split(',')
  const mimetype = dataDescription.match(/:(.*?);/)[1]
  const decodedData = atob(base64Data)

  let n = decodedData.length
  const u8arr = new Uint8Array(n)

  while (n--) {
    u8arr[n] = decodedData.charCodeAt(n)
  }

  return new File([u8arr], fileName, { type: mimetype })
}

兼容性问题

笔者并没有深入测试 canvas 压缩的兼容性问题，但从社区的几个前端处理 JPG 库里的 README 描述与 issues 等可以归纳出使用 canvas 处理时，需考虑下面几个方面的问题：

  1. 大小限制：详见 不同浏览器和设备上 canvas 大小限制；
  2. 信息保留：EXIF 信息，正确识别与处理图片方向；
  3. 设备兼容性：移动端设备浏览器定制内核相对多, 边界情况较多（相关 API 的支持程度，canvas 差异性表现）。

参考：browser-image-compression, Compressor.js, localResizeIMG

完整 demo

笔者将本节内容整理成了一个 Demo，可以直接在线体验。

在线 Demo 体验地址 →: https://demos.sugarat.top/pages/jpg-compress/

大概界面如下（可修改配置切换压缩方案，对比效果）：

纯血 HTML/CSS/JS，复制粘贴就能运行。

完整源码见：GitHub:ATQQ/demos - jpg-compress

最后

后续将继续学习&探索一下 GIF，MP4 转 GIF 等常用的动图前端处理实现的方式。

标签：canvas,const,img,前端,JPG,height,width,file
From： https://www.cnblogs.com/roseAT/p/18092832

相关文章

  • 前端框架之Bootstrap
    一、什么是BootstrapBootstrap是一个用于快速开发Web应用程序和网站的前端框架。Bootstrap是基于HTML、CSS、JAVASCRIPT的。Bootstrap是一个流行的开源前端框架，用于快速构建响应式和移动优先的网站和Web应用程序。它由Twitter的开发人员创建，旨在帮助开发人员快速搭建......
  • 前端Vue篇之Vue3响应式：Ref和Reactive
    目录Vue3响应式：Ref和ReactiveRef和Reactive概述用途Ref基本用法及在setup()中的使用基本用法在setup()中使用`<scriptsetup>`语法为何使用refReactive基本概念及在模板中的使用基本概念在模板中使用Reactive深层响应式与Ref区别为何使用ReactiveRef和Reactive比较和......
  • 前端学习-vue视频学习012-路由
    尚硅谷视频教程路由简介路由就是一组key-value的对应关系多个路由，需要经过路由器的管理怎样才能使用路由器安装路由器npmivue-router在src内新增文件夹router在router文件夹新增文件index.ts,在其中创建路由器并暴露出去//创建一个路由并暴露出去//引入createR......
  • WPF canvas draw lines via brush
    //xaml<Windowx:Class="WpfApp11.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d="http://schemas.mic......
  • 前端问题：Watchpack Error：too many open files
    近日在前端上偶遇WatchpackError：toomanyopenfiles这一奇葩问题，经过一番检索，先将修复过程记录.核心问题：WatchpackError(watcher):Error:EMFILE:toomanyopenfiles,watch'/home/bizuser/work/net-work/abp02/angular/node_modules/@babel/runtime/helpers'W......
  • web前端之node读取文件夹名称及html文件的标题、文件系统、路径处理、模块、正则、isD
    MENU代码解析代码constfs=require('fs');constpath=require('path');//文件夹路径//C:\mssj\web\web-case\case\nodeJs\index.js//C:\mssj\web\web-case\case\nodeJs\index.html//C:\mssj\web\web-case\case\ajaxProgressMoni......
  • 前端基础之jQuery重要补充
    一、阻止事件默认行为和阻止事件冒泡1、阻止事件默认行为阻止事件的默认行为是指阻止浏览器在特定事件发生时执行的默认操作。这对于定制用户交互体验非常有用，可以通过阻止默认行为来实现自定义行为或效果。<script>$('#d2').click(function(){$('#d1').text('......
  • c# 调用ImageMagick实现HEIC格式的图片转成jpg
    nuget安装Magick.NET-Q8-AnyCPU我项目Framework未4.5.1这安装的7.17.0版本的包：程序集引用：usingImageMagick;ConvertHeicToJpg方法转换代码如下：点击查看代码///<summary>///Heic转ToJpg///</summary>///<paramname="heicPath......
  • 前端报错 request to https://registry.npm.taobao.org/yorkie/download/yorkie-2.0.0
    前端npminstall报错：npmERR!requesttohttps://registry.npm.taobao.org/yorkie/download/yorkie-2.0.0.tgzfailed,reason:certificatehasexpired解决方式：//1.清空缓存npmcacheclean--force//2.切换新源:npmconfigsetregistry镜像源npmconfig......
  • 前端基础之jQuery引入
    一、jQuery介绍（1）JavaScript库JavaScript库：即library，是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show，比如获取元素等。简单理解：就是一个JS文件，里面对我们原生js代码进行了封......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99