■ サンプル
例１：明るさ/コントラスト
スライダーで明るさ/コントラストを表示
<!DOCTYPE html>
<html lang="jp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Demo</title>
</head>
<body>
<div>
<canvas id="canvas"></canvas>
</div>
<div>
<label for="brightness">Brightness</label><br />
<input id="brightness" type="range" value="0" min="-100.0" max="100.0" step="0.1" />
<p id="brightnessValue">0.0</p>
</div>
<div>
<label for="contrast">Contrast</label><br />
<input id="contrast" type="range" value="0" min="-100.0" max="100.0" step="0.1" />
<p id="contrastValue">0.0</p>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.js" integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU=" crossorigin="anonymous"></script>
<script src="">https://cdnjs.cloudflare.com/ajax/libs/camanjs/4.1.2/caman.full.js">
<script type="text/javascript">
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var image = new Image();
image.crossOrigin = "";
image.src = "https://raw.githubusercontent.com/fengyuanchen/cropperjs/master/docs/images/picture.jpg";
image.onload = function() {
canvas.width = image.width;
canvas.height = image.height;
context.drawImage(image, 0, 0, image.width, image.height);
}
$(document).on('change', 'input[type=range]', function() {
var bright = parseInt($('#brightness').val());
var contrast = parseInt($('#contrast').val());
$('#brightnessValue').text(bright);
$('#contrastValue').text(contrast);
console.log("bright : " + bright + ", contrast : " + contrast);
Caman('#canvas', image, function() {
this.revert(false);
this.brightness(bright).contrast(contrast).render();
});
});
</script>
</body>
</html>
