pica – 在浏览器中调整高质量图像的大小

在浏览器中调整图像大小而不会出现像素化且速度相当快。自动选择最好的可用技术：webworkers、webassembly、createImageBitmap、纯 JS。

演示

使用异食癖，您可以：

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

笔记。如果您需要文件/Blob 调整大小（来自表单的文件输入），请考虑使用
image-blob-reduce。它有额外的机制来处理方向、保留 EXIF 元数据等。

从 pica v6 迁移到 pica v7

乘以unsharpAmount2，除以unsharpThreshold2，例如：

pica@6： pica.resize(a, b, { unsharpAmount: 80, unsharpThreshold: 2 })
pica@7： pica.resize(a, b, { unsharpAmount: 160, unsharpThreshold: 1 })

使用前

以下是您可能面临的问题的简短列表：

加载图片：
- 由于 JS 安全限制，您只能处理来自同一域或本地文件的图像。如果您从远程域加载图像，请使用正确的Access-Control-Allow-Origin标头。
- iOS 对画布元素有内存限制，在某些情况下可能会导致问题，更多详细信息。
- 如果您的源数据是 jpeg 图像，则可以对其进行旋转。考虑使用
  image-blob-reduce。
保存图像：
- 一些古老的浏览器不支持canvas.toBlob()方法。使用pica.toBlob()，它包括所需的垫片。
- 对于 jpeg 源，最好保留exif数据。考虑使用
  image-blob-reduce。
质量
- JS 画布不支持访问有关伽马校正的信息。位图每个通道有 8 位。这会导致一些质量损失，因为伽马校正精度可能是每通道 12 位。
- 对于小猫、自拍等普通图像，精度损失不会很明显。但是我们不推荐使用这个库来调整专业质量的图像。

安装

npm install pica

利用

const pica = require('pica')();

// Resize from Canvas/Image to another Canvas
pica.resize(from, to)
  .then(result => console.log('resize done!'));

// Resize & convert to blob
pica.resize(from, to)
  .then(result => pica.toBlob(result, 'image/jpeg', 0.90))
  .then(blob => console.log('resized to canvas & created blob!'));

应用程序接口

新皮卡（配置）

使用给定的配置创建 resizer 实例（可选）：

瓷砖– 瓷砖的宽度/高度。图像按区域处理，以限制峰值内存使用。默认 1024。
features – 要使用的功能列表。默认为
[ 'js', 'wasm', 'ww' ]。可以是[ 'js', 'wasm', 'cib', 'ww' ]
或[ 'all' ]。请注意，cib在 Chrome 中有问题，不支持默认
mks2013过滤器。
空闲– 缓存超时，毫秒。网络工作者创建并不快。此选项允许有效地重用网络工作者。默认 2000。
并发– 最大网络工作者池大小。默认是自动检测的 CPU 计数，但不超过 4。
createCanvas – 返回一个新画布的函数，由 pica 内部使用。默认返回一个<canvas> 元素，但这个函数可以返回一个OffscreenCanvas
来代替（在 Service Worker 中运行 pica）。函数签名：createCanvas(width: number, height: number): Canvas

重要的！最新的浏览器可能支持通过createImageBitmap调整大小。支持 ( cib) 但默认禁用此功能，不建议使用。所以：

createImageBitmap() 用于非阻塞图像解码（如果可用，没有缩小）。
它的调整大小功能被默认 pica 配置阻止。只有您自己承担风险才能启用它。启用的结果cib将取决于您的浏览器。结果没有cib将是可预测的和好的。

.resize(from, to, options) -> Promise

将图像从一个画布（或图像）调整为另一个。大小取自源对象和目标对象。

从源，可以是Canvas，Image或ImageBitmap。
to – 目标画布，它的大小应该是非零的。
选项– 质量（数量）或对象：
- 质量（已弃用，.filter改为使用）- 0..3。
- filter – 过滤器名称（默认 – mks2013）。有关详细信息，请参阅resize_filter_info.js。mks2013调整大小和锐化，这是最佳的，不建议更改。
- unsharpAmount – >=0。默认 = 0（关闭）。通常 100 到 200 之间的值是好的。请注意，mks2013过滤器已经进行了最佳锐化。
- unsharpRadius – 0.5..2.0。默认情况下未设置。高斯模糊的半径。如果小于 0.5，则 Unsharp Mask 关闭。大值被限制为 2.0。
- unsharpThreshold – 0..255。默认值 = 0。应用非锐化蒙版的阈值。
- cancelToken – Promise 实例。如果定义，当前操作将在拒绝时终止。

结果是承诺，解决to成功。

(!)如果您需要处理多个图像，请按顺序执行以优化 CPU 和内存使用。Pica 已经知道如何使用多核（如果浏览器允许）。

.toBlob(canvas, mimeType [, quality]) -> Promise

便捷方法，类似于canvas.toBlob()，但具有适用于旧浏览器的承诺界面和 polyfill。

.resizeBuffer(options) -> Promise

补充方法，不推荐直接使用。使用原始 RGBA 位图调整 Uint8Array 的大小（不要与 jpeg / png / … 二进制文件混淆）。它不使用磁贴和网络工作者。当您确实需要处理原始二进制数据时（例如，如果您“手动”解码 jpeg 文件），则留给特殊情况。

选项：
- src – 带有源数据的 Uint8Array。
- 宽度– src 图像宽度。
- 高度– src 图像高度。
- toWidth – 输出宽度，>=0，以像素为单位。
- toHeight – 输出高度，>=0，以像素为单位。
- 质量（已弃用，.filter改为使用）- 0..3。
- filter – 过滤器名称（默认 – mks2013）。有关详细信息，请参阅resize_filter_info.js。mks2013调整大小和锐化，这是最佳的，不建议更改。
- unsharpAmount – >=0。默认 = 0（关闭）。通常 100 到 200 之间的值是好的。请注意，mks2013过滤器已经进行了最佳锐化。
- unsharpRadius – 0.5..2.0。高斯模糊的半径。如果小于 0.5，则 Unsharp Mask 关闭。大值被限制为 2.0。
- unsharpThreshold – 0..255。默认值 = 0。应用非锐化蒙版的阈值。
- dest – 可选。输出缓冲区写入数据，如果你不想pica创建一个新的。