Skip to content

Commit

Permalink
update filter_lab to use package:web
Browse files Browse the repository at this point in the history
  • Loading branch information
brendan-duncan committed Dec 14, 2024
1 parent c6f2c4e commit 984f20a
Show file tree
Hide file tree
Showing 3 changed files with 150 additions and 149 deletions.
3 changes: 2 additions & 1 deletion pubspec.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ homepage: https://github.com/brendan-duncan/image
documentation: https://github.com/brendan-duncan/image/blob/main/doc/README.md

environment:
sdk: '>=2.15.0 <4.0.0'
sdk: '>=3.2.0 <4.0.0'

dependencies:
archive: ^4.0.1
Expand All @@ -20,3 +20,4 @@ dev_dependencies:
http: ^1.1.0
lints: ^2.0.1
test: ^1.16.0
web: ^1.1.0
206 changes: 92 additions & 114 deletions web/filter_lab.dart
Original file line number Diff line number Diff line change
@@ -1,55 +1,61 @@
import 'dart:html';
import 'dart:js_interop';
import 'dart:typed_data';

import 'package:image/image.dart' as img;
import 'package:web/web.dart';

late ImageData filterImageData;
late CanvasElement canvas;
late DivElement logDiv;
late HTMLCanvasElement canvas;
late HTMLDivElement logDiv;
late img.Image origImage;

void _addControl(String label, String value, DivElement parent,
void _addControl(String label, String value, HTMLDivElement parent,
void Function(double) callback) {
final amountLabel = LabelElement()..text = '$label:';
final amountEdit = InputElement()
final amountLabel = HTMLLabelElement()..text = '$label:';
final amountEdit = HTMLInputElement()
..value = value
..id = '${label}_edit';
amountEdit.onChange.listen((e) {
try {
final d = double.parse(amountEdit.value!);
final d = double.parse(amountEdit.value);
callback(d);
} catch (e) {
//print(e);
}
});
amountLabel.htmlFor = '${label}_edit';
parent.append(amountLabel)
parent
..append(amountLabel)
..append(amountEdit)
..append(ParagraphElement());
..append(HTMLParagraphElement());
}

HTMLDivElement _getSidebar() {
final sidebar = document.querySelector('#sidebar') as HTMLDivElement;
while (sidebar.children.length > 0) {
sidebar.removeChild(sidebar.lastChild!);
}
return sidebar;
}

void testSepia() {
final sidebar = document.querySelector('#sidebar') as DivElement;
sidebar.children.clear();
final sidebar = _getSidebar();

final label = Element.tag('h1')..text = 'Sepia';
sidebar.children.add(label);
final label = HTMLHeadingElement.h1()..text = 'Sepia';
sidebar.appendChild(label);

num amount = 1.0;

void apply() {
final t = Stopwatch()..start();
var image = img.Image.from(origImage);
image = img.sepia(image, amount: amount);

// Fill the buffer with our image data.
filterImageData.data
.setRange(0, filterImageData.data.length, image.toUint8List());

// Draw the buffer onto the canvas.
canvas.context2D.clearRect(0, 0, canvas.width!, canvas.height!);
canvas.context2D.putImageData(filterImageData, 0, 0);
logDiv.text = 'TIME: ${t.elapsedMilliseconds / 1000.0}';
//print(t.elapsedMilliseconds / 1000.0);
final imageBytes = Uint8ClampedList.view(image.toUint8List().buffer);
final imageData =
ImageData(imageBytes.toJS, image.width, image.height.toJS);
// Draw the buffer onto the canvas.
canvas.context2D.clearRect(0, 0, canvas.width, canvas.height);
canvas.context2D.putImageData(imageData, 0, 0);
}

_addControl('Amount', amount.toString(), sidebar, (num v) {
Expand All @@ -61,27 +67,24 @@ void testSepia() {
}

void testSobel() {
final sidebar = document.querySelector('#sidebar') as DivElement;
sidebar.children.clear();
final sidebar = _getSidebar();

final label = Element.tag('h1')..text = 'Sepia';
sidebar.children.add(label);
final label = HTMLHeadingElement.h1()..text = 'Sobel';
sidebar.appendChild(label);

num amount = 1.0;

void apply() {
final t = Stopwatch()..start();
var image = img.Image.from(origImage);
image = img.sobel(image, amount: amount);

// Fill the buffer with our image data.
filterImageData.data
.setRange(0, filterImageData.data.length, image.toUint8List());
// Draw the buffer onto the canvas.
canvas.context2D.clearRect(0, 0, canvas.width!, canvas.height!);
canvas.context2D.putImageData(filterImageData, 0, 0);
logDiv.text = 'TIME: ${t.elapsedMilliseconds / 1000.0}';
//print(t.elapsedMilliseconds / 1000.0);
final imageBytes = Uint8ClampedList.view(image.toUint8List().buffer);
final imageData =
ImageData(imageBytes.toJS, image.width, image.height.toJS);
// Draw the buffer onto the canvas.
canvas.context2D.clearRect(0, 0, canvas.width, canvas.height);
canvas.context2D.putImageData(imageData, 0, 0);
}

_addControl('Amount', amount.toString(), sidebar, (num v) {
Expand All @@ -93,27 +96,23 @@ void testSobel() {
}

void testGaussian() {
final sidebar = document.querySelector('#sidebar') as DivElement;
sidebar.children.clear();

final label = Element.tag('h1')..text = 'Gaussian Blur';
sidebar.children.add(label);
final sidebar = _getSidebar();
final label = HTMLHeadingElement.h1()..text = 'Gaussian Blur';
sidebar.appendChild(label);

var radius = 5;

void apply() {
final t = Stopwatch()..start();
var image = img.Image.from(origImage);
image = img.gaussianBlur(image, radius: radius);

// Fill the buffer with our image data.
filterImageData.data
.setRange(0, filterImageData.data.length, image.toUint8List());
// Draw the buffer onto the canvas.
canvas.context2D.clearRect(0, 0, canvas.width!, canvas.height!);
canvas.context2D.putImageData(filterImageData, 0, 0);
logDiv.text = 'TIME: ${t.elapsedMilliseconds / 1000.0}';
//print(t.elapsedMilliseconds / 1000.0);
final imageBytes = Uint8ClampedList.view(image.toUint8List().buffer);
final imageData =
ImageData(imageBytes.toJS, image.width, image.height.toJS);
// Draw the buffer onto the canvas.
canvas.context2D.clearRect(0, 0, canvas.width, canvas.height);
canvas.context2D.putImageData(imageData, 0, 0);
}

_addControl('Radius', radius.toString(), sidebar, (num v) {
Expand All @@ -125,11 +124,9 @@ void testGaussian() {
}

void testVignette() {
final sidebar = document.querySelector('#sidebar') as DivElement;
sidebar.children.clear();

final label = Element.tag('h1')..text = 'Vignette';
sidebar.children.add(label);
final sidebar = _getSidebar();
final label = HTMLHeadingElement.h1()..text = 'Vignette';
sidebar.appendChild(label);

num start = 0.3;
num end = 0.75;
Expand All @@ -139,15 +136,13 @@ void testVignette() {
final t = Stopwatch()..start();
var image = img.Image.from(origImage);
image = img.vignette(image, start: start, end: end, amount: amount);

// Fill the buffer with our image data.
filterImageData.data
.setRange(0, filterImageData.data.length, image.toUint8List());
// Draw the buffer onto the canvas.
canvas.context2D.clearRect(0, 0, canvas.width!, canvas.height!);
canvas.context2D.putImageData(filterImageData, 0, 0);
logDiv.text = 'TIME: ${t.elapsedMilliseconds / 1000.0}';
//print(t.elapsedMilliseconds / 1000.0);
final imageBytes = Uint8ClampedList.view(image.toUint8List().buffer);
final imageData =
ImageData(imageBytes.toJS, image.width, image.height.toJS);
// Draw the buffer onto the canvas.
canvas.context2D.clearRect(0, 0, canvas.width, canvas.height);
canvas.context2D.putImageData(imageData, 0, 0);
}

_addControl('Start', start.toString(), sidebar, (num v) {
Expand All @@ -169,27 +164,23 @@ void testVignette() {
}

void testPixelate() {
final sidebar = document.querySelector('#sidebar') as DivElement;
sidebar.children.clear();

final label = Element.tag('h1')..text = 'Pixelate';
sidebar.children.add(label);
final sidebar = _getSidebar();
final label = HTMLHeadingElement.h1()..text = 'Pixelate';
sidebar.appendChild(label);

var blockSize = 5;

void apply() {
final t = Stopwatch()..start();
var image = img.Image.from(origImage);
image = img.pixelate(image, size: blockSize);

// Fill the buffer with our image data.
filterImageData.data
.setRange(0, filterImageData.data.length, image.toUint8List());
// Draw the buffer onto the canvas.
canvas.context2D.clearRect(0, 0, canvas.width!, canvas.height!);
canvas.context2D.putImageData(filterImageData, 0, 0);
logDiv.text = 'TIME: ${t.elapsedMilliseconds / 1000.0}';
//print(t.elapsedMilliseconds / 1000.0);
final imageBytes = Uint8ClampedList.view(image.toUint8List().buffer);
final imageData =
ImageData(imageBytes.toJS, image.width, image.height.toJS);
// Draw the buffer onto the canvas.
canvas.context2D.clearRect(0, 0, canvas.width, canvas.height);
canvas.context2D.putImageData(imageData, 0, 0);
}

_addControl('blockSize', blockSize.toString(), sidebar, (num v) {
Expand All @@ -201,11 +192,9 @@ void testPixelate() {
}

void testColorOffset() {
final sidebar = document.querySelector('#sidebar') as DivElement;
sidebar.children.clear();

final label = Element.tag('h1')..text = 'Pixelate';
sidebar.children.add(label);
final sidebar = _getSidebar();
final label = HTMLHeadingElement.h1()..text = 'Color Offset';
sidebar.appendChild(label);

var red = 0;
var green = 0;
Expand All @@ -217,15 +206,13 @@ void testColorOffset() {
var image = img.Image.from(origImage);
image = img.colorOffset(image,
red: red, green: green, blue: blue, alpha: alpha);

// Fill the buffer with our image data.
filterImageData.data
.setRange(0, filterImageData.data.length, image.toUint8List());
// Draw the buffer onto the canvas.
canvas.context2D.clearRect(0, 0, canvas.width!, canvas.height!);
canvas.context2D.putImageData(filterImageData, 0, 0);
logDiv.text = 'TIME: ${t.elapsedMilliseconds / 1000.0}';
//print(t.elapsedMilliseconds / 1000.0);
final imageBytes = Uint8ClampedList.view(image.toUint8List().buffer);
final imageData =
ImageData(imageBytes.toJS, image.width, image.height.toJS);
// Draw the buffer onto the canvas.
canvas.context2D.clearRect(0, 0, canvas.width, canvas.height);
canvas.context2D.putImageData(imageData, 0, 0);
}

_addControl('red', red.toString(), sidebar, (num v) {
Expand All @@ -252,11 +239,9 @@ void testColorOffset() {
}

void testAdjustColor() {
final sidebar = document.querySelector('#sidebar') as DivElement;
sidebar.children.clear();

final label = Element.tag('h1')..text = 'Adjust Color';
sidebar.children.add(label);
final sidebar = _getSidebar();
final label = HTMLHeadingElement.h1()..text = 'Adjust Color';
sidebar.appendChild(label);

num contrast = 1.0;
num saturation = 1.0;
Expand All @@ -269,7 +254,6 @@ void testAdjustColor() {
void apply() {
final t = Stopwatch()..start();
var image = img.Image.from(origImage);

image = img.adjustColor(image,
contrast: contrast,
saturation: saturation,
Expand All @@ -278,16 +262,13 @@ void testAdjustColor() {
exposure: exposure,
hue: hue,
amount: amount);

// Fill the buffer with our image data.
filterImageData.data
.setRange(0, filterImageData.data.length, image.toUint8List());
// Draw the buffer onto the canvas.
canvas.context2D.clearRect(0, 0, canvas.width!, canvas.height!);
canvas.context2D.putImageData(filterImageData, 0, 0);

logDiv.text = 'TIME: ${t.elapsedMilliseconds / 1000.0}';
//print(t.elapsedMilliseconds / 1000.0);
final imageBytes = Uint8ClampedList.view(image.toUint8List().buffer);
final imageData =
ImageData(imageBytes.toJS, image.width, image.height.toJS);
// Draw the buffer onto the canvas.
canvas.context2D.clearRect(0, 0, canvas.width, canvas.height);
canvas.context2D.putImageData(imageData, 0, 0);
}

_addControl('Contrast', contrast.toString(), sidebar, (num v) {
Expand Down Expand Up @@ -329,10 +310,10 @@ void testAdjustColor() {
}

void main() {
canvas = document.querySelector('#filter_canvas') as CanvasElement;
logDiv = document.querySelector('#log') as DivElement;
canvas = document.querySelector('#filter_canvas') as HTMLCanvasElement;
logDiv = document.querySelector('#log') as HTMLDivElement;

final menu = document.querySelector('#FilterType') as SelectElement;
final menu = document.querySelector('#FilterType') as HTMLSelectElement;
menu.onChange.listen((e) {
if (menu.value == 'Pixelate') {
testPixelate();
Expand All @@ -351,26 +332,23 @@ void main() {
}
});

final image = ImageElement(src: 'res/big_buck_bunny.jpg');
final image = HTMLImageElement()..src = 'res/big_buck_bunny.jpg';
image.onLoad.listen((e) {
final c = CanvasElement()
final c = HTMLCanvasElement()
..width = image.width
..height = image.height
..context2D.drawImage(image, 0, 0);

final imageData =
c.context2D.getImageData(0, 0, image.width!, image.height!);
final imageData = c.context2D.getImageData(0, 0, image.width, image.height);

origImage = img.Image.fromBytes(
width: image.width!,
height: image.height!,
bytes: imageData.data.buffer,
width: image.width,
height: image.height,
bytes: imageData.data.toDart.buffer,
numChannels: 4);

canvas.width = image.width;
canvas.height = image.height;
filterImageData =
canvas.context2D.createImageData(image.width, image.height);

testSepia();
});
Expand Down
Loading

0 comments on commit 984f20a

Please sign in to comment.