JavaScript+Canvas实现彩色图片转换成黑白图片的方法分析


Posted in Javascript onJuly 31, 2018

本文实例讲述了JavaScript+Canvas实现彩色图片转换成黑白图片的方法。分享给大家供大家参考,具体如下:

1、convertToGray()

在主体代码中使用 canvas 元素的id来获取画布,并设置画布的宽和高为图片的宽和高,再将上下文初始化为2d画布;彩色图片加载完成后,使用 drawImage() 将图片加载到上下文,调用用于完成剩余绘制工作的 getColorData()putColorData();最后为myImage指定彩色图片的路径。

2、getColorData()

使用 getImageData()将图像复制到 myImage,然后按照以下方式处理图像:在图像数据数组中移动,并收集前三个字节(红色、绿色和蓝色,忽略 alpha)的值;然后,该图像将三个字节的值相加,并将总和除以3,计算结果将舍入为一个整数,并被写入到这三个字节的值中。此值对应于颜色的色调,但灰度值从0到255,得到外观与原始彩色图片相同的黑白图片。

3、putColorData()

putImageData() 将已更改的图像数据写回到画布,通常用于让另一个图片执行实际处理,并仅在处理完成时显示结果。

var canvas, ctx, myImage;
function convertToGray() {
  myImage = document.getElementById("img");
  canvas = document.getElementById("myCanvas");
  canvas.width = img.width;
  canvas.height = img.height;
  if (canvas.getContext) {
    ctx = canvas.getContext("2d");
    myImage.onload = function() {
      ctx.drawImage(myImage, 0, 0);
      getColorData();
      putColorData();
    }
    myImage.src = "images/img8.jpg";
  }
}
function getColorData() {
  var length = canvas.width * canvas.height;
  myImage = ctx.getImageData(0, 0, canvas.width, canvas.height);
  for (var i = 0; i < length * 4; i += 4) {
    var myRed = myImage.data[i];
    var myGreen = myImage.data[i + 1];
    var myBlue = myImage.data[i + 2];
    myGray = parseInt((myRed + myGreen + myBlue) / 3);
    myImage.data[i] = myGray;
    myImage.data[i + 1] = myGray;
    myImage.data[i + 2] = myGray;
  }
}
function putColorData() {
  ctx.putImageData(myImage, 0, 0);
}

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
使用SyntaxHighlighter实现HTML高亮显示代码的方法
Feb 04 Javascript
js动态添加删除,后台取数据(示例代码)
Nov 25 Javascript
jquery获取checkbox的值并post提交
Jan 14 Javascript
javascript引用类型指针的工作方式
Apr 13 Javascript
JavaScript过滤字符串中的中文与空格方法汇总
Mar 07 Javascript
JavaScript中数组Array方法详解
Feb 27 Javascript
一个简易时钟效果js实现代码
Mar 25 Javascript
Angular4.x通过路由守卫进行路由重定向实现根据条件跳转到相应的页面(推荐)
May 10 Javascript
大转盘抽奖小程序版 转盘抽奖网页版
Apr 16 Javascript
Element中的Cascader(级联列表)动态加载省\市\区数据的方法
Mar 27 Javascript
微信小程序与webview交互实现支付功能
Jun 07 Javascript
微信小程序后端无法保持session的原因及解决办法问题
Mar 20 Javascript
vue实现word,pdf文件的导出功能
Jul 31 #Javascript
在create-react-app中使用css modules的示例代码
Jul 31 #Javascript
详解使用create-react-app添加css modules、sasss和antd
Jul 31 #Javascript
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
Jul 31 #jQuery
Vue导出页面为PDF格式的实现思路
Jul 31 #Javascript
详解微信小程序实现WebSocket心跳重连
Jul 31 #Javascript
前端axios下载excel文件(二进制)的处理方法
Jul 31 #Javascript
You might like
php类中private属性继承问题分析
2012/11/01 PHP
php利用单例模式实现日志处理类库
2014/02/10 PHP
PHP基于curl post实现发送url及相关中文乱码问题解决方法
2017/11/25 PHP
php获取微信openid方法总结
2019/10/10 PHP
基于jquery的tab切换 js原理
2010/04/01 Javascript
JavaScript访问样式表代码
2010/10/15 Javascript
说说JSON和JSONP 也许你会豁然开朗
2012/09/02 Javascript
JQueryEasyUI datagrid框架的进阶使用
2013/04/08 Javascript
javascript实现焦点滚动图效果 具体方法
2013/06/24 Javascript
浅析showModalDialog数据缓存问题(用禁止浏览器缓存解决)
2013/07/09 Javascript
JS实现模仿微博发布效果实例代码
2013/12/16 Javascript
原生javaScript做得动态表格(注释写的很清楚)
2013/12/29 Javascript
JavaScript中的事件委托及好处
2016/07/12 Javascript
谈谈JavaScript中的几种借用方法
2016/08/09 Javascript
Vue组件通信实践记录(推荐)
2017/08/15 Javascript
vue element 生成无线级左侧菜单的实现代码
2019/08/21 Javascript
用原生JS实现爱奇艺首页导航栏代码实例
2019/09/19 Javascript
Python爬虫DNS解析缓存方法实例分析
2017/06/02 Python
python3之模块psutil系统性能信息使用
2018/05/30 Python
详解python3中zipfile模块用法
2018/06/18 Python
Python中的 enum 模块源码详析
2019/01/09 Python
Python使用selenium + headless chrome获取网页内容的方法示例
2019/10/16 Python
如何更改 pandas dataframe 中两列的位置
2019/12/27 Python
Django多数据库配置及逆向生成model教程
2020/03/28 Python
Python unittest单元测试框架及断言方法
2020/04/15 Python
Python Dict找出value大于某值或key大于某值的所有项方式
2020/06/05 Python
查看keras的默认backend实现方式
2020/06/19 Python
搭建pypi私有仓库实现过程详解
2020/11/25 Python
丝芙兰香港官网:Sephora香港
2018/03/13 全球购物
ProBikeKit德国:在线公路自行车专家
2018/06/03 全球购物
养牛场项目建议书
2014/05/13 职场文书
小学生节约用水倡议书
2014/05/15 职场文书
四风问题对照检查材料整改措施
2014/09/27 职场文书
工厂门卫岗位职责
2015/04/13 职场文书
2015年会计人员工作总结
2015/05/22 职场文书
优胜劣汰,强者为王——读《鲁滨逊漂流记》有感
2019/08/15 职场文书