canvas 基础之图像处理的使用


Posted in HTML / CSS onApril 10, 2020

前些日子,前辈推荐了一个有趣的项目 —— Real-Time-Person-Removal ,这个项目使用了 TensorFlow.js ,以及 canvas 中的图像处理实现视频中的人物消失。借此机会,复习下 canvas 基础中的图像处理。

基础 API

canvas 的图像处理能力通过 ImageData 对象来处理像素数据。主要的 API 如下:

  • createImageData():创建一个空白的 ImageData 对象
  • getImageData():获取画布像素数据,每一个像素点有 4 个值 —— rgba
  • putImageData():将像素数据写入画布

 

imageData = {
  width: Number,
  height: Number,
  data: Uint8ClampedArray
}

width 是 canvas 画布的宽或者说 x 轴的像素数量;height 是画布的高或者说 y 轴的像素数量;data 是画布的像素数据数组,总长度 w * h * 4,每 4 个值(rgba)代表一个像素。

对图片的处理

下面,我们通过几个例子来看下 canvas 基础的图片处理能力。

原图效果:

canvas 基础之图像处理的使用

const cvs = document.getElementById("canvas");
const ctx = cvs.getContext("2d");
const img = new Image();
img.src="图片 URL";
img.onload = function () {
  ctx.drawImage(img, 0, 0, w, h);
}

底片/负片效果

算法:将 255 与像素点的 rgb 的差,作为当前值。

function negative(x) {
  let y = 255 - x;
  return y;
}

效果图:

canvas 基础之图像处理的使用

const imageData =  ctx.getImageData(0, 0, w, h);
const { data } = imageData;
let l = data.length;
for(let i = 0; i < l; i+=4) {
  const r = data[i];
  const g = data[i + 1];
  const b = data[i + 2];
  data[i] = negative(r);
  data[i + 1] = negative(g);
  data[i + 2] = negative(b);
}
ctx.putImageData(imageData, 0, 0);

单色效果

单色效果就是保留当前像素的 rgb 3个值中的一个,去除其他色值。

for(let i = 0; i < l; i+=4) { // 去除了 r 、g 的值
  data[i] = 0;
  data[i + 1] = 0;
}

效果图:

canvas 基础之图像处理的使用 

灰度图

灰度图:每个像素只有一个色值的图像。0 到 255 的色值,颜色由黑变白。

for(let i = 0; i < l; i+=4) {
  const r = data[i];
  const g = data[i + 1];
  const b = data[i + 2];
  const gray = grayFn(r, g, b);
  data[i] = gray;
  data[i + 1] = gray;
  data[i + 2] = gray;
}

算法1——平均法:

const gray = (r + g + b) / 3;

效果图:

canvas 基础之图像处理的使用 

算法2——人眼感知:根据人眼对红绿蓝三色的感知程度:绿 > 红 > 蓝,给定权重划分

const gray = r * 0.3 + g * 0.59 + b * 0.11

效果图:

canvas 基础之图像处理的使用

除此以外,还有:

取最大值或最小值。

const grayMax = Math.max(r, g, b); // 值偏大,较亮
const grayMin = Math.min(r, g, b); // 值偏小,较暗

取单一通道,即 rgb 3个值中的一个。

 二值图

算法:确定一个色值,比较当前的 rgb 值,大于这个值显示黑色,否则显示白色。

for(let i = 0; i < l; i+=4) {
  const r = data[i];
  const g = data[i + 1];
  const b = data[i + 2];
  const gray = gray1(r, g, b);
  const binary = gray > 126 ? 255 : 0;
  data[i] = binary;
  data[i + 1] = binary;
  data[i + 2] = binary;
}

效果图:

canvas 基础之图像处理的使用 

高斯模糊

高斯模糊是“模糊”算法中的一种,每个像素的值都是周围相邻像素值的加权平均。原始像素的值有最大的高斯分布值(有最大的权重),相邻像素随着距离原始像素越来越远,权重也越来越小。

一阶公式:

canvas 基础之图像处理的使用

(使用一阶公式是因为一阶公式的算法比较简单)

const radius = 5; // 模糊半径
const weightMatrix = generateWeightMatrix(radius); // 权重矩阵
for(let y = 0; y < h; y++) {
  for(let x = 0; x < w; x++) {
    let [r, g, b] = [0, 0, 0];
    let sum = 0;
    let k = (y * w + x) * 4;
    for(let i = -radius; i <= radius; i++) {
      let x1 = x + i;
      if(x1 >= 0 && x1 < w) {
      let j = (y * w + x1) * 4;
      r += data[j] * weightMatrix[i + radius];
      g += data[j + 1] * weightMatrix[i + radius];
      b += data[j + 2] * weightMatrix[i + radius];
      sum += weightMatrix[i + radius];
      }
    }
    data[k] = r / sum;
    data[k + 1] = g / sum;
    data[k + 2] = b / sum;
  }
}
for(let x = 0; x < w; x++) {
  for(let y = 0; y < h; y++) {
    let [r, g, b] = [0, 0, 0];
    let sum = 0;
    let k = (y * w + x) * 4;
    for(let i = -radius; i <= radius; i++) {
      let y1 = y + i;
      if(y1 >= 0 && y1 < h) {
        let j = (y1 * w + x) * 4;
        r += data[j] * weightMatrix[i + radius];
        g += data[j + 1] * weightMatrix[i + radius];
        b += data[j + 2] * weightMatrix[i + radius];
        sum += weightMatrix[i + radius];
      }
    }
    data[k] = r / sum;
    data[k + 1] = g / sum;
    data[k + 2] = b / sum;
  }
}
function generateWeightMatrix(radius = 1, sigma) { // sigma 正态分布的标准偏差
  const a = 1 / (Math.sqrt(2 * Math.PI) * sigma);
  const b = - 1 / (2 * Math.pow(sigma, 2));
  let weight, weightSum = 0, weightMatrix = [];
  for (let i = -radius; i <= radius; i++){
    weight = a * Math.exp(b * Math.pow(i, 2));
    weightMatrix.push(weight);
    weightSum += weight;
  }
  return weightMatrix.map(item => item / weightSum); // 归一处理
}

效果图:

canvas 基础之图像处理的使用 

其他效果

这里再简单介绍下其他的图像效果处理,因为例子简单重复,所以不再给出代码和效果图。

  • 亮度调整:将 rgb 值,分别加上一个给定值。
  • 透明化处理:改变 rgba 值中的 a 值。
  • 对比度增强:将 rgb 值分别乘以 2,然后再减去一个给定值。

总结

好了,上面就是一些基础的图像处理算法。

参考资料

高斯模糊的算法
高斯模糊

到此这篇关于canvas 基础之图像处理的使用的文章就介绍到这了,更多相关canvas 图像处理内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
CSS3 开发工具收集
Apr 17 HTML / CSS
css3 矩阵的使用详解
Mar 20 HTML / CSS
css3实现3D文本悬停改变效果的示例代码
Jan 16 HTML / CSS
解决CSS3 transition-delay 属性默认值0不带单位失效的问题
Oct 29 HTML / CSS
HTML5实现锚点时请使用id取代name
Sep 06 HTML / CSS
HTML5标签大全
Nov 23 HTML / CSS
amaze ui 的使用详细教程
Aug 19 HTML / CSS
HTML5来实现本地文件读取和写入的实现方法
May 25 HTML / CSS
html实现弹窗的实例
Jun 09 HTML / CSS
html+css实现滚动到元素位置显示加载动画效果
Aug 02 HTML / CSS
el-form每行显示两列底部按钮居中效果的实现
Aug 05 HTML / CSS
使用 CSS 构建强大且酷炫的粒子动画效果
Aug 14 HTML / CSS
用canvas显示验证码的实现
Apr 10 #HTML / CSS
HTML5给汉字加拼音收起展开组件的实现代码
Apr 08 #HTML / CSS
iPhoneX安全区域(Safe Area)底部小黑条在微信小程序和H5的屏幕适配
Apr 08 #HTML / CSS
HTML5 textarea高度自适应的两种方案
Apr 08 #HTML / CSS
html5给汉字加拼音加进度条的实现代码
Apr 07 #HTML / CSS
详解HTML5如何使用可选样式表为网站或应用添加黑暗模式
Apr 07 #HTML / CSS
HTML5拖放API实现自动生成相框功能
Apr 07 #HTML / CSS
You might like
dede3.1分页文字采集过滤规则详说(图文教程)续四
2007/04/03 PHP
PHP 存储文本换行实现方法
2010/01/05 PHP
PHP基础学习小结
2011/04/17 PHP
非常好用的Zend Framework分页类
2014/06/25 PHP
php使用fputcsv()函数csv文件读写数据的方法
2015/01/06 PHP
jquery提升性能最佳实践小结
2010/12/06 Javascript
Javascript实现视频轮播在pc端与移动端均可
2013/09/29 Javascript
node.js中的fs.symlinkSync方法使用说明
2014/12/15 Javascript
第一次接触JS require.js模块化工具
2016/04/17 Javascript
nodejs学习笔记之路由
2017/03/27 NodeJs
input输入框内容实时监测(附代码)
2017/08/15 Javascript
vue使用$emit时,父组件无法监听到子组件的事件实例
2018/02/26 Javascript
vuex与组件联合使用的方法
2018/05/10 Javascript
vue实现权限控制路由(vue-router 动态添加路由)
2019/11/04 Javascript
vue 实现购物车总价计算
2019/11/06 Javascript
浅析Vue下的components模板使用及应用
2019/11/27 Javascript
vue使用openlayers实现移动点动画
2020/09/24 Javascript
[03:01]2014DOTA2国际邀请赛 DC:我是核弹粉,为Burning和国土祝福
2014/07/13 DOTA
Python实现的彩票机选器实例
2015/06/17 Python
PYTHON 中使用 GLOBAL引发的一系列问题
2016/10/12 Python
利用Python中unittest实现简单的单元测试实例详解
2017/01/09 Python
windows系统下Python环境的搭建(Aptana Studio)
2017/03/06 Python
python操作excel的包(openpyxl、xlsxwriter)
2018/06/11 Python
浅谈django三种缓存模式的使用及注意点
2018/09/30 Python
在python中,使用scatter绘制散点图的实例
2019/07/03 Python
python列表返回重复数据的下标
2020/02/10 Python
Python DataFrame使用drop_duplicates()函数去重(保留重复值,取重复值)
2020/07/20 Python
有750多个顶级品牌的瑞士时尚在线:ABOUT YOU
2017/01/04 全球购物
销售人员中英文自荐信
2013/09/22 职场文书
写好自荐信的要点
2013/11/06 职场文书
机械化及自动化毕业生的自我评价分享
2013/11/06 职场文书
获奖的大学生创业计划书
2014/01/05 职场文书
人事部专员岗位职责
2014/03/04 职场文书
2014政府领导班子对照检查材料思想汇报(3篇)
2014/09/26 职场文书
安全第一课观后感
2015/06/18 职场文书
PyCharm 配置SSH和SFTP连接远程服务器
2022/05/11 Python