前端图像处理指南

  1. 云栖社区>
  2. 博客>
  3. 正文

前端图像处理指南

动感小前端 2017-01-10 11:56:13 浏览7581
展开阅读全文

计算机图像处理是一门很成熟的技术,任何一门可操作系统接口的语言都能很轻易的实现各种处理操作。但是前端限于浏览器环境和接口限制,处理起来会有诸多不便,这里所说的前端图像处理,是真的指不借助任何后端服务纯前端实现的图像处理。本文会介绍canvas位图处理,SVG矢量图和CSS3图像处理,重点是canvas,并且最后会附上一个小应用

canvas位图处理

HTML5 canvas为我们提供了一块画布,让前端也有了操作位图的功能:图片旋转、缩放、滤镜、压缩等都可以通过JS来实现。

图像基本处理

通过设置drawImage参数可以实现图片绘制、缩放、拉伸和裁剪等操作(注意canvas无法绘制体积过大图片,否则会卡甚至崩掉,大图可以分块读取绘制):

图片描述

详细用法参考 drawImage(),DEMO源码戳这里 JS Bin.

只需要drawImag

网友评论

登录后评论
0/500
评论
动感小前端
+ 关注