建站学习网,专业提供各类建站教程,网页素材,SEO资讯等建站资源!

网站模板_网站源码_网站素材_建站教程_建站学习网

当前位置:建站学习网 > 网页设计 > HTML5教程 >

利用HTML5 Canvas做在线图像处理

更新时间:2017-04-12整理编辑:建站学习网阅读:0

HTML 5中的 canvas 元素是相当强大的,利用他的 getImageData 方法可以对载入的图像直接进行位图操作。但是直接对位图进行操作比较麻烦,如果利用卷积矩阵这个工具的话,可以通过几个简单的参数实现复杂的效果。

所谓的矩阵的卷积,就是如下图显示的那样,当计算红色框中的数值的时候,分别先提取周围绿框中8个数字,然后与施加的那个矩阵中对应位置相乘,然后把各个乘积加在一起,就得到了最终的值了。

比如上图中的42是这么来的:

  (40*0)+(42*1)+(46*0) 
+ (46*0)+(50*0)+(55*0) 
+ (52*0)+(56*0)+(58*0) 
= 42

这就是卷积了。然后,所谓的对图像的卷积操作,就是指对图像上的每一点的像素值,用这个矩阵进行运算,得到一个新的值。

比如下面这张图

利用下面这个矩阵 
-6 -3 0 
-3 -1 3 
0 3 6 
就立刻能够得到浮雕效果。

然后为了使用更方便,通常还会给最终值除以一个系数以及加上一个偏移。 
比如下面这个矩阵。 
0 0 0 
0 1 0 
0 0 0 
这个矩阵(实际上这个矩阵本身不对图像进行任何操作),然后设置系数为-1,偏移为255的话,就能实现反色效果了,真是相当的神奇。

为了简化操作,我写了个简单的函数来对图像数据进行操作。 
函数第一个参数是 canvas上的 imageData 对象 
第二个参数是传入矩阵所对应的数组,如果是下面这样的矩阵 
a b c 
d e f 
g h i 
则传入第二个的参数应为 [a,b,c,d,e,f,g,h,i] 
第三个参数是除数因子。 
第四个参数就是偏移量。

// 计算卷积矩阵的函数function ConvolutionMatrix(input, matrix, divisor, offset){    // 创建一个输出的 imageData 对象    var output = document.createElement("canvas")                         .getContext('2d').createImageData(input);    var w = input.width, h = input.height;    var iD = input.data, oD = output.data;    var m = matrix;    // 对除了边缘的点之外的内部点的 RGB 进行操作,透明度在最后都设为 255    for (var y = 1; y < h-1; y += 1) {        for (var x = 1; x < w-1; x += 1) {            for (var c = 0; c < 3; c += 1) {                var i = (y*w + x)*4 + c;                oD[i] = offset                    +(m[0]*iD[i-w*4-4] + m[1]*iD[i-w*4] + m[2]*iD[i-w*4+4]                    + m[3]*iD[i-4]     + m[4]*iD[i]     + m[5]*iD[i+4]                    + m[6]*iD[i+w*4-4] + m[7]*iD[i+w*4] + m[8]*iD[i+w*4+4])                    / divisor;            oD[(y*w + x)*4 + 3] = 255; // 设置透明度    return output;

我这里只写了个3阶的卷积矩阵。如果觉得不够high还可以自己实现一个5阶的。

本文网址:https://www.dedexuexi.com/wysj/html5/2829.html

本站部分文章搜集与网络,如有侵权请联系本站,转载请说明出处。

标签:前端
收藏此文 赞一下!() 打赏本站

如本文对您有帮助,就请建站学习网抽根烟吧!

支付宝打赏
微信打赏
HTMl5的存储方式sessionStorage和localStorage详解
« 上一篇2017年04月12日
HTML网页基本组成概述
2017年04月12日下一篇 »
  • CSS代码鼠标经过图片变换图片的几种方法
    0阅读
    CSS代码鼠标经过图片变换图片方法如下:方法一:在css中,可以利用“:hover”选择器和“background-image”属性实现鼠标滑过改变图片效果,只需要给图片元素添加“图片元素:hover{background-image:url(新的图片路径);”样式即可。
  • 如何利用html+css设置菜单栏缓慢下拉效果?
    0阅读
    如何利用html+css设置菜单栏缓慢下拉效果?解决方法和相关代码分享如下:方法一:过渡(transition)对forum_box开启绝对定位(absolute),让里面的li从其父元素中脱离出去,不然会把之后的内容往右挤,并且设置overflow:hidden,设置高度为0,鼠标移入后再设置相应...
  • 纯css3实现下拉箭头、关闭按钮旋转效果
    0阅读
    说起css3的旋转效果,那就要说为什么不用js去实现,CSS3的动画效果,能够减少对JavaScript和Flash文件的HTTP请求这是原因之一。但是css3可能要求浏览器执行很多的工作来完成这个动画效果的渲染,这有可能导致浏览器响应缓慢,因此,在使用一些复杂的特效时,大家需要考虑清楚。不过这样的...
  • 使用HTML5的Canvas绘制曲线的简单方法
    0阅读
    Canvas2D自带的曲线方法 最近在研究3D柔体的计算,所以在狂补一些知识。经常会涉及到一些数值分析方面的东西,主要是曲线的各种插值算法。突然想起了Canvas2D本身也是可以绘制曲线的,使用
  • html两个文字之间有一个空格的解决办法
    0阅读
    碰到过这样一位朋友,在编写的html代码里面出现两个文字间有空格的情况,两个文字之间他没有加空格符,也没有代码。 这个情况在html编码使用不太多或不太熟练的情况下,很难找出问题。
 
QQ在线咨询
×
欢迎您登陆建站学习网
QQ一键登陆 建站学习网账号登录