应用HTML5 Canvas做在线图象处理

发布时间:2017-03-22 21:37 来源:互联网 以后栏目:网页设计教程

HTML 5中的 canvas 元素是相当强大年夜的,应用他的 getImageData 办法可以对载入的图象直接停止位图操作。然则直接对位图停止操作比较费事,假设应用卷积矩阵这个对象的话,可以经过过程几个简单的参数完成复杂的后果。

所谓的矩阵的卷积,就是以下图显示的那样,当计算白色框中的数值的时辰,分别先提取四周绿框中8个数字,然后与施加的那个矩阵中对应地位相乘,然后把各个乘积加在一路,就取得了终究的值了。

convolution calculate 应用HTML5 Canvas做在线图象处理

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

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

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

  • 1、
  • 2、
  • 3、
  • 4、
  • 5、
  • 6、
  • 7、
  • 8、
  • 9、
  • 10、
  • 11、
  • 12、
  • 13、
  • 14、
  • 15、
  • 16、
  • 17、
  • 18、
  • 19、
  • 20、
  • 21、
  • 22、
  • 23、
  • 24、
  • 25、
  • 1、
  • 2、
  • 3、
  • 4、
  • 5、
  • 6、
  • 7、
  • 8、
  • 9、
  • 10、
  • 11、
  • 12、
  • 13、
  • 14、
  • 15、
  • 16、
  • 17、
  • 18、
  • 19、
  • 20、
  • 21、
  • 22、
  • 23、
  • 24、
  • 25、