通过HTML与JavaScript实现一个互动式图片调色工具，用户可以实时调整图片的RGB颜色值，体验色彩变化带来的视觉效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="canvas" width="750" height="420"></canvas></br>
<input type="range" name="" id="r" value="0" />
<input type="range" name="" id="g" value="0" />
<input type="range" name="" id="b" value="0" />
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var inputs = document.querySelectorAll("input");
var img = new Image();
img.src = "img/a11.jpg";
img.onload = function() {
ctx.drawImage(img, 0, 0);
var imageData = ctx.getImageData(0,0,750,420);
var pxs = imageData.data;
for(var i = 0; i < inputs.length; i++) {
inputs[i].onchange = (function(i) {
return function() {
for(var j = 0; j < pxs.length; j += 4) {
pxs[j + i] = inputs[i].value;
}
ctx.putImageData(imageData,0,0);
}
})(i);
}
}
</script>
</body>
</html>
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
