JavaScript+Canvas实现彩色图片转换成黑白图片的方法分析
本文实例讲述了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+HTML5特效与技巧汇总》、《JavaScript图片操作技巧大全》、《JavaScript图形绘制技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
相关文章
ElementUI的Dialog弹窗实现拖拽移动功能示例代码
这篇文章主要介绍了ElementUI的Dialog弹窗实现拖拽移动功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-07-07
考试页面可以实现隐藏左边的考生信息部分，学了javascript后也能实现这个功能了，下面是实现思路、代码及解效果截图，喜欢的朋友们可以看看2014-10-10
这篇文章主要给大家介绍了关于JavaScript数组排序的六种常见算法，文中通过示例代码介绍的非常详细，对大家的学习或者使用JavaScript数组具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2020-08-08
这篇文章主要介绍了微信小程序传值以及获取值方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
JS,Jquery获取select,dropdownlist,checkbox下拉列表框的值(示例代码)
本篇文章主要是对JS,Jquery获取select,dropdownlist,checkbox下拉列表框的值(示例代码)进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-01-01
这篇文章主要介绍了JS简单实现数组去重的方法,涉及javascript数组的遍历、判断及赋值操作,代码非常简单易懂,具有一定参考借鉴价值,需要的朋友可以参考下2017-03-03
这篇文章主要为大家详细介绍了基于JavaScript实现全选、不选和反选效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
JavaScript中forEach和map方法的使用与区别
众所周知map和forEach是数组的操作方法,下面这篇文章主要给大家介绍了关于JavaScript中forEach和map方法的使用与区别,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-02-02
Hooks让我们为相同的功能编写更少的代码,我们需要编写的代码越少,我们就可以越快地启动应用程序,hooks需要在函数组件中使用,您不能在 React 类中使用 hooks,函数式的 React 组件更加现代,并支持有用的 hooks,现在流行把旧式的类组件转换为函数式组件2024-01-01
js实现点击注册按钮开始读秒倒计时的小例子，需要的朋友可以参考一下2013-05-05
最新评论