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 相关文章推荐
jQuery 添加/移除CSS类实现代码
Feb 11 Javascript
25个非常棒的jQuery滑块插件和教程小结
Sep 02 Javascript
简短几句jquery代码的实现一个图片向上滚动切换
Sep 02 Javascript
基于jQuery.Validate验证库知识点的详解
Apr 26 Javascript
jQuery实现的简洁下拉菜单导航效果代码
Aug 26 Javascript
JS获取中文拼音首字母并通过拼音首字母快速查找页面内对应中文内容的方法【附demo源码】
Aug 19 Javascript
JS中this上下文对象使用方式
Oct 09 Javascript
详解react-router如何实现按需加载
Jun 15 Javascript
微信小程序实现折叠面板
Jan 31 Javascript
在vue项目中使用Jquery-contextmenu插件的步骤讲解
Jan 27 jQuery
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
May 04 jQuery
vue实现行列转换的一种方法
Aug 06 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 Google的translate API代码
2008/12/10 PHP
PHP file_exists问题杂谈
2012/05/07 PHP
PHP 基于Yii框架中使用smarty模板的方法详解
2013/06/13 PHP
PHP json_encode中文乱码问题的解决办法
2013/09/09 PHP
php计算整个目录大小的方法
2015/06/19 PHP
Yii2框架实现利用mpdf创建pdf文件功能示例
2019/02/08 PHP
php中Swoole的热更新实现代码实例
2021/03/04 PHP
用Javascript 和 CSS 实现脚注(Footnote)效果
2009/09/09 Javascript
javascript sudoku 数独智力游戏生成代码
2010/03/27 Javascript
对Web开发中前端框架与前端类库的一些思考
2015/03/27 Javascript
jQuery.Uploadify插件实现带进度条的批量上传功能
2016/06/08 Javascript
详解Angular 4.x NgTemplateOutlet
2017/05/24 Javascript
nodejs后台集成ueditor富文本编辑器的实例
2017/07/11 NodeJs
vue父组件通过props如何向子组件传递方法详解
2017/08/16 Javascript
JavaScript实现重力下落与弹性效果的方法分析
2017/12/20 Javascript
Vue.js组件间的循环引用方法示例
2017/12/27 Javascript
利用nodeJs anywhere搭建本地服务器环境的方法
2018/05/12 NodeJs
JavaScript设计模式之职责链模式应用示例
2018/08/07 Javascript
vue 插件的方法代码详解
2019/06/06 Javascript
js实现图片上传即时显示效果
2019/09/30 Javascript
[50:27]OG vs LGD 2018国际邀请赛淘汰赛BO3 第一场 8.26
2018/08/30 DOTA
Python异常处理总结
2014/08/15 Python
Python3实现发送QQ邮件功能(文本)
2017/12/15 Python
python实现聊天小程序
2018/03/13 Python
Django REST framework视图的用法
2019/01/16 Python
python aiohttp的使用详解
2019/06/20 Python
Python中调用其他程序的方式详解
2019/08/06 Python
Crocs卡骆驰洞洞鞋日本官方网站:Crocs日本
2016/08/25 全球购物
Clarisonic美国官网:科莱丽声波洁面仪
2017/10/12 全球购物
洛佩桑酒店官方网站:Lopesan Hotels
2019/04/15 全球购物
创业计划书如何吸引他人眼球
2014/01/10 职场文书
爱之链教学反思
2014/04/30 职场文书
委托代理人授权委托书范本
2014/09/24 职场文书
2014年小班保育员工作总结
2014/12/23 职场文书
2016年元旦致辞
2015/08/01 职场文书
nginx优化的六点方法
2021/03/31 Servers