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

前端之家收集整理的这篇文章主要介绍了JavaScript+Canvas实现彩色图片转换成黑白图片的方法分析前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

1、convertToGray()

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

2、getColorData()

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

3、putColorData()

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

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《》、《》、《》、《》、《》、《》及《用法总结》

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

猜你在找的JavaScript相关文章