关于javascript:Canvas-图像灰度处理

50次阅读

共计 1046 个字符,预计需要花费 3 分钟才能阅读完成。

引子

在玩游戏的时候,碰到一个交互成果:背景一张看起来黑白的图,而后用擦除的交互,让图像变的有色彩。也想试试做这个成果,首先想到的是那个黑白的图是怎么造成的,于是就查资料,找到了用 Canvas 转换的办法。

  • Origin
  • My GitHub

思路

看起来是黑白的图像,其实是灰度图像,进一步阐明见图像。这种图像的特点是像素的色彩重量取值都是一样的,而 Canvas 的办法 getImageData 能够获取到画布上的像素值数据,扭转数据后,应用办法 putImageData 将数据绘制到画布上。这样就能够达到灰度图像的成果。

实现

这是示例页面,挪动端拜访如下:

次要实现如下:

  /**
   * 图像灰度解决
   * @param {object} context canvas 上下文
   * @param {number} sx 提取图像数据矩形区域的左上角 x 坐标。* @param {number} sy 提取图像数据矩形区域的左上角 y 坐标。* @param {number} sw 提取图像数据矩形区域的宽度。这要留神一下,canvas 标签上 width 属性值,不是渲染后理论宽度值,否则在高清手机屏幕下且做了高清解决,只能获取到局部图像宽度。* @param {number} sh 提取图像数据矩形区域的高度。这要留神一下,canvas 标签上 height 属性值,不是渲染后理论高度值,否则在高清手机屏幕下且做了高清解决,只能获取到局部图像高度。*/
  function toGray(context,sx, sy, sw, sh) {var imageData = context.getImageData(sx, sy, sw, sh);
    var colorDataArr = imageData.data;
    var colorDataArrLen = colorDataArr.length;
    for(var i = 0; i < colorDataArrLen; i+=4) {
      // 计算形式之一
      var gray=(colorDataArr[i]+colorDataArr[i+1]+colorDataArr[i+2])/3;
      colorDataArr[i] = gray;
      colorDataArr[i+1] = gray;
      colorDataArr[i+2] = gray;
    }
    context.putImageData(imageData,0,0);
  }

参考资料

  • How do you convert a color image to black/white using Javascript?
  • Canvas MDN
  • getImageData MDN
  • putImageData MDN

正文完
 0