pica:使用JS进行快速高品质图像缩放

pica是paco作者的一个高速Javascript实验。目标是在浏览器中以最快的速度进行高品质图像缩放。遵循MIT开源协议发布。Demo

pica

在现代浏览器中使用canvas进行图像缩放时默认会使用低质量差值算法。这就是开发pica的动因。

  • 尽管没有canvas那么快,但也可以说是相当快。使用Lanczos过滤器和 window=3 巨幅图像缩放(5000x3000px),台式机大约需要1秒,移动设备需要约3秒。
  • 如果浏览器支持Webworkers,会自动使用pica避免界面出现卡顿。

pica为什么管用:

  • 在浏览器中进行预处理,减小了大图的上传大小,节省时间和带宽。
  • 在图像处理方面节省了服务器资源。
  • HiDPI图像技术支持响应式处理和retina。
  • 对缩略图和详细视图使用同一张图片。

准备

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等工具构建):

bower:

浏览器支持

虽然不能测试所有可能的组合,但通常支持:

  • 顶层API可以在所有浏览器中工作,支持canvastyped arrays
  • Webworkers不是必须的条件,但如果提供了Webworker会直接使用。
  • 如果只需要使用纯数学核心库(math core),那么typed arrays支持即可满足要求。

注意:尽管可以在node.js上直接使用, 但浏览器是pica开发针对的主要平台。我们推荐在服务器端使用GraphicsMagick或ImageMagick,这样可以取得更佳的执行速度。

参考资源

下面是一些有用的开发资源:

官方网站:http://nodeca.github.io/pica/demo/
开源地址:https://github.com/nodeca/pica

打赏支持我整理更多优质资源,谢谢!

打赏编辑

打赏支持我整理更多优质资源,谢谢!

任选一种支付方式

2 3 收藏

资源整理者简介:唐尤华

唐尤华:我喜欢程序员,他们单纯、固执、容易体会到成就感;面对压力,能够挑灯夜战不眠不休;面对困难,能够迎难而上挑战自我。他们也会感到困惑与傍徨,但每个程序员的心中都有一个比尔盖茨或是乔布斯的梦想“用智慧开创属于自己的事业”。我想说的是,其实我是一个程序员。 个人主页 · 贡献了108个资源 · 18 ·    


直接登录

推荐关注

按分类快速查找

关于资源导航
  • 伯乐在线资源导航收录优秀的工具资源。内容覆盖开发、设计、产品和管理等IT互联网行业相关的领域。目前已经收录 1439 项工具资源。
    推送伯乐头条热点内容微信号:jobbole 分享干货的技术类微信号:iProgrammer