开发者社区> 动感小前端> 正文

前端图像处理指南

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

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

canvas位图处理

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

图像基本处理

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

图片描述

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

只需要drawImage一个方法,就可以实现基本图形处理功能,再结合鼠标或滚轮事件,就可以实现更复杂的局部放大预览,缩放等功能了。

图像滤镜处理

现在的朋友圈发个图都要用滤镜美一下,复古清纯胶片LOMO各种风格应有尽有。canvas提供了getImageData方法来获取图像上每一个像素点的RGBA信息,这样我们就能对图片进行像素级处理了。通过特定算法来重写imageData中的像素信息,然后用setImageData方法把新的数据重新绘制在canvas上,这样就可以实现图像滤镜打码加特效等一系列功能。

比如我们现在要实现一个复古滤镜:

// 复古滤镜处理算法:获取每个像素的RGB信息,并按特定权重返回其加权平均值
let sepiaFilter = function(imgData) {
  let d = imgData.data
  for (let i = 0; i < d.length; i += 4) {
    let r = d[i]
    let g = d[i + 1]
    let b = d[i + 2]
    d[i] = (r * 0.393) + (g * 0.769) + (b * 0.189) // red
    d[i + 1] = (r * 0.349) + (g * 0.686) + (b * 0.168) // green
    d[i + 2] = (r * 0.272) + (g * 0.534) + (b * 0.131) // blue
  }
  return imgData
}
//图像地址必须和当前页面同域,否则会报cross-origin错误 
img.src = '/img/logo@2x.png' 
img.onload = () => {
  ctx.drawImage(img, 0, 0) // 绘制原图
  let imgData = ctx.getImageData(0, 0, img.width, img.height) // 获取图片信息
  ctx.putImageData(sepiaFilter(imgData), 100, 0) // 绘制处理后图片
}

图片描述

详细用法参考 getImageData()putImageData(),DEMO源码戳这里 JSFiddle.

滤镜处理关键在于滤镜算法,要想写出更高级的特效需要有计算机图形学基础,对卷积矩阵、拉普拉斯变换、傅里叶变换等数学知识也要了解,这个坑很大我就不挖了。

图像base64存储

加完特效后如果我们想把图像保存下来,就可以用toDataURL方法来对图片进行格式转换、压缩存储了。

// 支持三种文件类型:image/png(默认) | image/jpeg | image/webp(仅Chrome)
canvas.toDataURL() // 默认存储为png
// 仅jpeg/webp支持质量参数(0~1,默认0.92)
canvas.toDataURL("image/jpeg", 0.1) // 存储为质量为0.1的jpeg

由于存储形式是base64编码,原来图片的每三个字节都会被扩展成4字节,所以整体上编码后数据会比原来多约1/3。以下是通过toDataURL存储后的图片和原图大小相关对比数据(数据仅供参考,不具通用性):

图片描述

可见存储后图片体积并不是原来的4/3,实际上处理后的图片都会比原图大好几倍,并且不同的图片增大的体积也是不确定的。如果是要上传图片到服务器,可以把base64转化成Blob二进制数据压缩上传;如果要直接在前端显示或供用户下载,jpg还好可以设置质量参数,要是png就没法压缩了。

只是用toDataURL还不够,用户需要通过手动点击图片-右键图片存储为来保存图片,如果要实现点击下载按钮自动下载图片还需要修改图片类型为octet-stream,然后利用HTML5的download属性强制让浏览器下载。

详细用法参考toDataURL(). 自动下载图片DEMO源码快戳我 JSFiddle.

程序员的备胎

有了以上基础,再结合成熟的图形处理算法,我们可以完成日常工作中大部分图像处理需求,以下列出了一些相关轮子可做备胎。备胎这种东西多多益善,万一以后用到了呢?

注意:本人很专一。

html2canvas

将web页面通过canvas来实现截屏,其原理就是遍历DOM结构和样式,然后在canvas中绘制出来,通过toDataURL输出图片。但由于canvas图片的同源策略限制,如果图片和网站不同源的话会截取不出来的。另外在微信中测试时,即使用同源的图片截取出来的图片也有问题,所以要想将其用于生产环境,还是得看场景,有很多坑要踩。

code-to-image

代码转图片工具。有时候你在不同的平台写文章贴代码,由于不同平台代码格式化规范不一,所以经常会出现代码排版问题,通过这个工具将代码转成图片就可以避免排版问题了。

Cropper

一个专门用来做图片裁剪的应用。

tracking.js

这是一个专业的计算机视觉处理JS库,包含了大量图形处理算法,可用来做人脸识别,色彩追踪等酷炫功能。

qrcode2

用JS动态生成二维码,这个库还是很实用的,原理就是qrcode算法+canvas绘图,不支持canvas的用table兼容。

AlloyImage

腾讯出的基于HTML5的专业级图像处理开源引擎,功能很强大,简直就是Web版的PS。

以上列举部分,更多备胎在此: https://github.com/0326/canvas

SVG矢量图处理

讲完位图再说矢量图。矢量图在绘制图标、商业LOGO、动画元素上应用非常广范。Web最开始支持的矢量图形并不是现在的SVG,而是微软主推的VML,所以在低版本IE下面只支持VML而不支持SVG,直到后来SVG成为W3C标准并被普及,微软才在IE9中支持SVG。

SVG遵循XML规范,可以很好的集成在HTML里面,同时支持JS脚本控制,还有基于SMIL标准的动态内容支持,做起动画来也是非常方便。目前基于SVG的JS图形库轮子也是非常多,如svg.js, Snap.svg, Velocity.js, D3.js等等,目前暂无SVG应用需求,等用的时候再翻牌子吧。

CSS图像处理

如果你的图像特效只是用来给用户展示,并不需要存储的话,可以直接用CSS处理,基本的调整图片大小、拉伸、旋转、裁切等操作直接几个CSS属性width/height/skew/rotate/clip-path等就能搞定了。如果想加特效,使用CSS滤镜Duang的一下就出来了,不需要任何图形学基础和数学知识:

详细说明见 CSS filter - MDN, DEMO 源码见JS Bin.

总结

最后介绍个小工具TrimPNG。大家都知道TinyPNG可以压缩PNG, TrimPNG顾名思义就是去除图片空白和白边的,实现了自动抠图和切图的功能(logo我是直接抄的TinyPNG,都是熊猫,应该不要紧吧

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
14328 0
一起谈.NET技术,构建高性能ASP.NET站点之一 剖析页面的处理过程(前端)
  前言:在对ASP.NET网站进行优化的时候,往往不是只是懂得ASP.NET就足够了的。 在优化的过程中,一般先是找出问题可能存在的地方,然后证明找出的问题就是要解决的问题,确认之后,在进行一些措施。
817 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
30389 0
前端必备正则处理方法
前端必备正则处理方法
731 0
【技术揭秘】解决“鸡尾酒会问题”的利器-基于盲源分离的前端信号处理框架
盲源分离(Blind Source Separation, BSS)是解决“鸡尾酒会问题”的利器之一,其目的就是要将各个源信号,或后续问题中需要用到的某个或某些源信号从观测得到的混合信号中分离出来。所谓“盲源”,指的是源信号本身的波形、源信号的数目、信号源的位置等关于源信号的先验知识,以及观测点的位置、混合环境的信息等关于混合环境的先验知识未知,需要仅从观测信号中进行分离。
220 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,大概有三种登录方式:
14169 0
前端培训-初级阶段-场景实战(2019-05-30)-input 搜索如何防抖,如何处理中文输入
前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些。前端小课堂(HTML/CSS/JS),本着提升技术水平,打牢基础知识的中心思想,我们开课啦(每周四)。 场景实战这块内容每个人的内容都不一样。所以最近的更新基本都是我遇到并解决掉的问题。后期会把他们的内容贴地址。
21 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
21338 0
+关注
动感小前端
前端工程师
48
文章
12
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载