Commit 6d1f7d18 authored by Matija Obreza's avatar Matija Obreza
Browse files

First app filter!

parent 9b70fa87
import * as React from 'react';
import { ProcessImage } from './ProcessImage';
import { withStyles } from '@material-ui/core/styles';
import ProcessImage from './ProcessImage';
const styles = {
root: {
......
import * as React from 'react';
import { withStyles } from '@material-ui/core/styles';
import { count } from '@gringlobal/counter/counter';
import { filterThinEdges, filterSum, filterSobel, filterSmooth } from '@gringlobal/counter/filters';
export class ProcessImage extends React.Component<any> {
const styles = {
thumbnail: {
width: '100px',
},
canvases: {
'flex-flow': 'row wrap',
'display': 'flex',
},
canvasBox: {
backgroundRepeat: 'no-repeat',
backgroundSize: 'contain',
margin: '5px',
border: 'solid 1px green',
},
originalContainer: {
position: 'relative' as 'relative',
},
original: {
width: '100%',
position: 'relative' as 'relative',
},
resultOverlay: {
width: '100%',
minHeight: '20px',
position: 'absolute' as 'absolute',
border: 'solid 1px red',
top: -1,
left: -1,
},
canvas: {
maxHeight: '200px',
minWidth: '100px',
minHeight: '100px',
},
originalGraphics: {
},
};
private MAX_PROCESSING_WIDTH: number = 300;
class ProcessImage extends React.Component<any> {
// private MAX_PROCESSING_WIDTH: number = 300;
private original: any;
private originalVideo: any;
private resultOverlay: any;
private canvasSource: any;
public constructor(props) {
super(props);
this.original = React.createRef();
this.originalVideo = React.createRef();
this.resultOverlay = React.createRef();
this.canvasSource = React.createRef();
}
public state = {
count: 0,
video: false,
};
private count = () => {
console.log(`Counting ${this.MAX_PROCESSING_WIDTH}`);
this.setState({ count: count(this.state.count) });
private resizeCanvases = () => {
const source = this.state.video ? this.originalVideo.current : this.original.current;
console.log(`${this.state.video ? 'Video' : 'Image'} size ${this.state.video ? source.videoWidth : source.width}x${this.state.video ? source.videoHeight : source.height}`);
// canvas.width = video.videoWidth;
const ratio = this.state.video ? source.videoWidth / source.videoHeight : source.width / source.height;
// original.height = original.width / ratio;
// this.resultOverlay.current.style.width = this.state.video ? source.videoWidth : source.width;
// this.resultOverlay.current.style.height = this.state.video ? source.videoHeight : source.height;
this.canvasSource.current.width = this.resultOverlay.current.width = 640;
this.canvasSource.current.height = this.resultOverlay.current.height = this.resultOverlay.current.width / ratio;
// for (const canvas2 of canvases) {
// canvas2.width = canvas.width;
// canvas2.height = canvas.height;
// }
this.captureImage();
}
private captureImage = () => {
const source = this.state.video ? this.originalVideo.current : this.original.current;
const contextSource = this.canvasSource.current.getContext('2d');
contextSource.drawImage(source, 0, 0, this.canvasSource.current.width, this.canvasSource.current.height);
const image = contextSource.getImageData(0, 0, this.canvasSource.current.width, this.canvasSource.current.height);
console.log(`Image data ${image.width}x${image.height}`);
const filtered = filterThinEdges(filterSum(filterSobel(filterSmooth(image))));
this.resultOverlay.current.getContext('2d').putImageData(filtered, 0, 0);
if (this.state.video) {
setTimeout(() => { this.captureImage(); }, 500);
}
}
private toggleCamera = () => {
console.log('Toggling camera');
// const supportedConstraints = navigator.mediaDevices.getSupportedConstraints();
// let constraintStr: string = '';
// for (const constraint in supportedConstraints) {
// if (supportedConstraints.hasOwnProperty(constraint)) {
// constraintStr += constraint + '\n';
// }
// }
// window.alert(`Media constraints:\n${constraintStr}`);
// this.captureImage();
const constraints = {
video: {
facingMode: 'environment',
width: { min: 400, ideal: 800, max: 2000 },
height: { min: 400, ideal: 600, max: 2000 },
},
};
// if (this.originalVideo.current && ! this.originalVideo.current.srcObject) {
// Get access to the camera!
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
// Not adding `{ audio: true }` since we only want video now
navigator.mediaDevices.getUserMedia(constraints).then((stream) => {
this.originalVideo.current.srcObject = stream;
this.originalVideo.current.play();
}).catch((err) => {
window.alert('Error' + JSON.stringify(err));
console.log('An error occurred: ', err);
});
}
// }
this.setState({ count: count(this.state.count), video: !this.state.video });
};
private fileChanged = (ev) => {
const files = ev.target.files;
// FileReader support
if (FileReader && files && files.length) {
const fr = new FileReader();
fr.onload = () => {
console.log('Original', this.original.current);
this.original.current.src = fr.result;
};
fr.readAsDataURL(files[0]);
}
};
public render(): React.ReactNode {
const { classes } = this.props;
return (
<div>
<div>
{ ! this.state.video && <div>
<form>
<input type="file" id="myfile" />
<input type="file" onChange={ this.fileChanged } id="myfile" />
<input type="reset" value="Clear" />
</form>
</div>
</div> }
<h1>Count: { this.state.count }</h1>
<img src="examples/G32 seed.jpg" />
<button onClick={ this.count }>Count</button>
<div className={ classes.originalContainer }>
<img ref={ this.original } onLoad={ this.resizeCanvases } className={ classes.original } src="examples/G32 seed.jpg" style={ { display: this.state.video ? 'none' : '' } } />
<video ref={ this.originalVideo } className={ classes.original } onPlaying={ this.resizeCanvases } style={ { display: this.state.video ? '' : 'none' } } ></video>
<canvas ref={ this.resultOverlay } className={ classes.resultOverlay }></canvas>
</div>
<button onClick={ this.toggleCamera }>Camera</button>
<h1>Debugger</h1>
<div id="canvases" />
<div id="canvases" className={ classes.canvases } />
<canvas ref={ this.canvasSource } className={ classes.originalGraphics }></canvas>
</div>
);
}
}
export default withStyles(styles)(ProcessImage);
This diff is collapsed.
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment