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 相关文章推荐
xml和web特殊字符
Apr 28 Javascript
Javascript延迟执行实现方法(setTimeout)
Dec 30 Javascript
javascript加号&quot;+&quot;的二义性说明
Mar 04 Javascript
JS简单的轮播的图片滚动实例
Jun 17 Javascript
页面载入结束自动调用js函数示例
Sep 23 Javascript
编写简单的jQuery提示插件
Dec 21 Javascript
jQuery属性选择器用法示例
Sep 09 Javascript
通过Ajax使用FormData对象无刷新上传文件方法
Dec 08 Javascript
Nginx 配置多站点vhost 的方法
Jan 07 Javascript
微信小程序城市选择及搜索功能的方法
Mar 22 Javascript
vue中uni-app 实现小程序登录注册功能
Oct 12 Javascript
JS操作字符串转数字的常见方法示例
Oct 29 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去除数组中重复的元素并按键名排序函数
2008/08/18 PHP
PHP生成Flash动画的实现代码
2010/03/12 PHP
PHP框架Laravel的小技巧两则
2015/02/10 PHP
使用Appcan客户端自动更新PHP版本号(全)
2015/07/31 PHP
php 计算两个时间相差的天数、小时数、分钟数、秒数详解及实例代码
2016/11/09 PHP
PHP设计模式之观察者模式定义与用法分析
2019/04/04 PHP
PHP goto语句用法实例
2019/08/06 PHP
prettify 代码高亮着色器google出品
2010/12/28 Javascript
javascript面向对象编程代码
2011/12/19 Javascript
给事件响应函数传参数的四种方式小结
2013/12/05 Javascript
JavaScript indexOf方法入门实例(计算指定字符在字符串中首次出现的位置)
2014/10/17 Javascript
Javascript核心读书有感之词法结构
2015/02/01 Javascript
nodejs事件的监听与触发的理解分析
2015/02/12 NodeJs
js控制文本框只输入数字和小数点的方法
2015/03/10 Javascript
jquery实现的点击翻书效果代码
2015/11/04 Javascript
Jquery遍历select option和添加移除option的实现方法
2016/08/26 Javascript
vue移动端UI框架实现QQ侧边菜单组件
2018/03/09 Javascript
JavaScript动态检测密码强度原理及实现方法详解
2019/06/11 Javascript
layui实现三级联动效果
2019/07/26 Javascript
使用typescript构建Vue应用的实现
2019/08/26 Javascript
聊聊Vue中provide/inject的应用详解
2019/11/10 Javascript
NodeJS实现一个聊天室功能
2019/11/25 NodeJs
Javascript数组及类数组相关原理详解
2020/10/29 Javascript
Python3写入文件常用方法实例分析
2015/05/22 Python
简单了解python的一些位运算技巧
2019/07/13 Python
Python使用Opencv实现图像特征检测与匹配的方法
2019/10/30 Python
用python拟合等角螺线的实现示例
2019/12/27 Python
python opencv圆、椭圆与任意多边形的绘制实例详解
2020/02/06 Python
Python字典dict常用方法函数实例
2020/11/09 Python
Django自带的用户验证系统实现
2020/12/18 Python
使用HTML5进行SVG矢量图形绘制的入门教程
2016/02/19 HTML / CSS
个人简历中自我评价
2014/02/11 职场文书
优秀中职教师事迹材料
2014/08/26 职场文书
Python办公自动化之教你如何用Python将任意文件转为PDF格式
2021/06/28 Python
TV动画《八十龟酱观察日记》第四季宣传PV公布
2022/04/06 日漫
MySql统计函数COUNT的具体使用详解
2022/08/14 MySQL