Skip to content

Instantly share code, notes, and snippets.

@dhilst

dhilst/index.html

Created April 13, 2019 18:30
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save dhilst/6ac9ecfb2b9d5b72d887e0a9567995d1 to your computer and use it in GitHub Desktop.
Save dhilst/6ac9ecfb2b9d5b72d887e0a9567995d1 to your computer and use it in GitHub Desktop.
Download ZIP
online photo filtering
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="author" content="">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>
<body>
<div>
<img id="image-id" src="/roupa.jpg">
</div>
<button onClick="reset()">Reset</button>
<div>
<label>Brightness
<input oninput="changeFilter('brightness', this)" type="range" min="-100" max="100" value="0" class="slider">
<span>0</span>
</label>
</div>
<div>
<label>Hue
<input oninput="changeFilter('hue', this)" type="range" min="0" max="100" value="0" class="slider">
<span>0</span>
</label>
</div>
<div>
<label>Noise
<input oninput="changeFilter('noise', this)" type="range" min="0" max="100" value="0" class="slider">
<span>0</span>
</label>
</div>
<div>
<label>Contrast
<input oninput="changeFilter('contrast', this)" type="range" min="-10" max="10" value="0" step="0.1" class="slider">
<span>0</span>
</label>
</div>
<div>
<label>Gamma
<input oninput="changeFilter('gamma', this)" type="range" min="0" max="5" value="0" step="0.01" class="slider">
<span>0</span>
</label>
</div>
<div>
<label>Saturation
<input oninput="changeFilter('saturation', this)" type="range" min="-100" max="100" value="0" class="slider">
<span>0</span>
</label>
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/camanjs/4.1.2/caman.full.min.js"></script>
<script>
var filters = {};
var trottle = false;
function render() {
if (trottle) {
return;
}
trottle = true;
setTimeout(() => { trottle = false }, 10);
Caman("#image-id", function () {
this.revert(false);
Object.entries(filters).forEach(([filter, value]) => {
console.log('applying ', filter, value);
this[filter](parseFloat(value));
});
this.render();
});
};
function changeFilter(filter, target) {
filters[filter] = target.value;
$(target).siblings().text(target.value);
render();
}
function reset() {
$('.slider').val(0);
Caman("#image-id", function () {
this.revert();
});
}
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment