Canvas像素调节—调节图片的明暗与对比度

前几周做了一个医疗展示CT图的项目，需要对DICOM文件进行解析展示并且在页面中对图像进行明暗和对比度的调节功能。费了许多精力将此功能做了出来（虽然使用的并不是DICOM文件中的窗宽/窗位，但也算是一种知识的学习），所以在此记录加深记忆及方便以后查阅。

canvas API及教程

由于要对图片进行操作（明暗及对比度的调节、反色）所以页面中使用img元素是不合适的，而HTML5中提供的canvas元素可以指定一块画布并在此之上进行绘图及处理，所以展示图片时使用canvas。canvas的使用教程在MDN中介绍的非常详细在此附上连接 Canvas API

图片明暗及对比度的调节

通过此教程了除了了解到canvas中如何画图及如何使用图片外了解的另外的知识就是，对图片明暗度的调节就是对像素颜色值的增减，255-当前像素的颜色值就能得到反色。但问中并没有对对比度调节的例子。所以将网上搜所到对比度调节的算法记录在此。

网上最常用的调整对比度的算法是根据图像的灰度进行调整

下面是算法：

1、计算平均亮度

2、每点与平均亮度比较，得到差值。

3、新的亮度 = 平均亮度 + 系数 * 差值

4、根据新的亮度，计算出新的rgb(保持色调不变)

原文地址：数字图像处理调整对比度的几种方法

通过鼠标滑动触发事件

在很多DICOM解析工具中，都会提供按住鼠标左右或上下滑动来调节图片明暗及对比度（即窗宽及窗位）的操作。所以在此我们也需要在用户操作时增加上此功能。这个问题相对好解决，只要在canvas元素中触发鼠标移动事件时判断鼠标是点击状态，再根据鼠标的横坐标及纵坐标的位移对像素进行对应操作即可，调节的时候可以适当缩小以下位移与像素值的调节，以防止移动鼠标的时候图片变化过大。

canvas的初始大小

canvas 标签只有两个属性—— width和height。这些都是可选的，并且同样利用 DOM properties 来设置。当没有设置宽度和高度的时候，canvas会初始化宽度为300像素和高度为150像素。而在用canvas加载图片时，知识在当前画布的内部绘制图片，所以canvas在定义之后不会自动的根据图片的大小来改变自身的宽高。所以如果想让canvas的宽高与图片相同，需要先知道图片的宽高，对应设置好canvas的宽高之后在进行图片的绘制。

总结

在此过程中，虽然花费了不少的时间与经历，但大部分都是用在了canvas的学习及鼠标事件的处理上，熟悉了这写大家基本就能很轻松的写出这个东西。而编写的过程中也遇到了一些思考不周导致的问题，像反色后在进行调节又回到了反色前的状态；鼠标按住划出canvas范围后按住不放在滑回会对图片的调节造成影响及最初时未保存基础的图像数据，导致在图像调节后无法恢复原来图像等等问题，相信在经过思考之后都能搞得定。
在此附上我demo的连接图像明暗及对比度调节DEMO