pica_使用js进行快速高品质图像缩放_前端开发者

前端开发者丨JavaScript

pica是paco作者的一个高速Javascript实验。

目标是在浏览器中以最快的速度进行高品质图像缩放。

遵循MIT开源协议发布。

Demo在现代浏览器中使用canvas进行图像缩放时默认会使用低质量差值算法。

这就是开发pica的动因。

尽管没有canvas那么快，但也可以说是相当快。

使用Lanczos过滤器和 window=3 巨幅图像缩放（5000x3000px），台式机大约需要1秒，移动设备需要约3秒。

巨幅图像缩放（5000x3000px），台式机大约需要1秒，移动设备需要约3秒。

如果浏览器支持Webworkers，会自动使用pica避免界面出现卡顿。

pica为什么管用：准备Pica是一个执行数学计算的底层开发库，尽可能地减少了封装带来的影响。

如果对二进制图像进行缩放，需要先加载到canvas（再保存为blob）。

下面是可能遇到的一些问题：图片加载： 由于js安全限制，只能在从同一个域或本地文件加载图片到canvas。

如果从远程加载图片，需要使用合适的 Access-Control-Allow-Origin 头部信息。

iOS 对canvas大小和图片大小有限制。

查看这里了解详细信息和解决方案。

加载后要在屏幕上展示图片，需要解析 exif 头信息获取图像定位。

图像可能会有旋转的情况。

图片保存： 一些早期版本的浏览器支持 .toBlob() 方法。

如果有需要，可以使用 https://github.com/blueimp/JavaScript-Canvas-to-Blob。

Look here for examples.保存 exif 时明智的做法。

这样可以避免调色和旋转信息丢失。

最简单的处理方法是将原始的头部信息剪切后附加在缩放结果的后面。

示例图片质量 js canvas不支持访问伽马校正信息，Bitmap每个通道存有8位信息。

这会造成品质损失，因为伽马校正精度每个通道要求12为信息。

对于猫咪、自拍这样的常见图片品质损失不会带来很大影响，但是不推荐用pica处理要求专业质量的图片。

安装node.js （可以通过browserify等工具构建）：npm install pica 1 npm install picabower：bower install pica 1 bower install pica浏览器支持虽然不能测试所有可能的组合，但通常支持：注意：尽管可以在 node.js 上直接使用， 但浏览器是pica开发针对的主要平台。

我们推荐在服务器端使用GraphicsMagick或ImageMagick，这样可以取得更佳的执行速度。

参考资源下面是一些有用的开发资源：

官方网站：http://nodeca.github.io/pica/demo/

开源地址：https://github.com/nodeca/pica

前端开发者丨JavaScript