Add Dither Effect to Example Image

This commit is contained in:
Unknown 2018-02-14 18:00:57 +01:00
parent c5a68ea94b
commit 763512a3b1
2 changed files with 9 additions and 5 deletions

View File

@ -14,8 +14,8 @@
</head>
<body>
<canvas id="input" width="712" height="470"></canvas>
<canvas id="input"></canvas>
<canvas id="output" width="712" height="470"></canvas>
<canvas id="output"></canvas>
</body>
</html>

View File

@ -8,11 +8,15 @@ ImageElement inputImg;
ImageElement outputImg;
void main() {
inputImg = new ImageElement(src: 'kitten.jpg', width: 712, height: 470);
inputImg = new ImageElement(src: 'kitten.jpg');
input = document.querySelector('#input');
output = document.querySelector('#output');
input.width = inputImg.width;
input.height = inputImg.height;
output.width = inputImg.width;
output.height = inputImg.height;
inputImg.onLoad.listen(imgLoaded);
}
@ -20,9 +24,9 @@ void imgLoaded(Event e) {
print("image loaded");
input.context2D.drawImage(inputImg, 0, 0);
PixelArray px = new PixelArray.fromImageData(getImageData(input), 712);
PixelArray px = new PixelArray.fromImageData(getImageData(input), input.width);
px = Pixed.greyscale(px);
px = Pixed.dither(px);
output.context2D.putImageData(px.toImageData(), 0, 0);
}