JavaScript调整亮度
起因
最近在Web项目,有一个需求调整图片的亮度,想起Canvas可以的,就简单做一个测试.Html和JavaScript代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>图片亮度测试</title>
</head>
<body>
<input type="range" name="points" min="0" max="255" id="my_progress" onprogress="" />
<img src="1.bmp" width="100" id="currentSrc" />
<img src="" width="100" id="newSrc" />
<canvas id="container" style="width:100px;border:1px solid red;display:none;"></canvas>
<script type="text/javascript">
var my_progress = document.querySelector('#my_progress');
my_progress.value = 0;
my_progress.addEventListener('change', function () {
var val = this.value;
var current_val = parseInt(val, 10);
if (current_val > 0) {
image_light(current_val);
}
});
function image_light(val) {
var img = new Image();
img.src = '1.bmp';
var width = img.width;
var height = img.height;
var src = document.querySelector('#currentSrc');
var container = document.querySelector('#container');
var newSrc = document.querySelector('#newSrc');
container.width = width;
container.height = height;
var ctx = container.getContext('2d');
ctx.drawImage(src, 0, 0);
var img_data = ctx.getImageData(1, 1, width, height);
var data = img_data.data;
var img_width = img_data.data.width;
var img_height = img_data.data.height;
for (var i = 0; i < data.length; i += 4) {
var blue = data[i];
var green = data[i + 1];
var red = data[i + 2];
data[i] += val;
data[i + 1] += val;
data[i + 2] += val;
}
ctx.putImageData(img_data, 0, 0);
var data_url = container.toDataURL('image/bmp');
newSrc.src = data_url;
}
</script>
</body>
</html>效果
单纯调整图片rgb的值,效果不是很好,因为图片少则几十张,多着上百张.最终还是放在客户端处理.
秋风
2019-03-13