这篇文章主要介绍了怎么在JavaScript中利用Canvas将彩色图片转换成黑白图片，亿速云小编觉得不错，现在分享给大家，也给大家做个参考，一起跟随亿速云小编来看看吧！
1.JavaScript主要用来向HTML页面添加交互行为。 2.JavaScript可以直接嵌入到HTML页面，但写成单独的js文件有利于结构和行为的分离。 3.JavaScript具有跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行。
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中利用Canvas将彩色图片转换成黑白图片，如何觉得亿速云网站的内容还不错，欢迎将亿速云网站推荐给身边好友。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
