我想使用Pixastic js进行图像处理,但是我一直收到此错误。
“ ReferenceError:未定义像素 在HTMLDocument。 (ceqeqirodu.js:8:16)“
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div>
<canvas id="can">
</canvas>
<input type="range" min='0' max="100" step="1" class="slider" />
</div>
<script type="text/javascript" src="pixastic.core.js"></script>
<script type="text/javascript" src="brightness.js"></script>
</body>
js代码:
document.addEventListener('DOMContentLoaded',function(){
var canvass = document.getElementById('can');
var ctx = canvass.getContext('2d');
var img = new Image();
img.crossOrigin = '';
img.src = "https://upload.wikimedia.org/wikipedia/commons/b/b5/800x600_Wallpaper_Blue_Sky.png";
ctx.drawImage(img, 0,0,100,100);
var newImg = new Pixastic(ctx)
function setBrightness(options) {
var newImg = Pixastic.process(canvass,'brightness',options)
}
var slider = document.querySelector('.slider').addEventListener('change',test);
function test(e){
var options =
{
"brightness" : parseFloat(e.target.value),
"contrast" : 0,
"rect" : {
"left" : 100,
"right" : 100,
"width" : 200,
"height" : 150
}
}
setBrightness(options);
}
});
我在这里到底缺少什么,有人可以在这里帮助我吗?