Revert "optimized canvas handling"

This reverts commit 80d7133a8e.
pull/280/head
Vladimir Mandic 2020-11-02 17:31:37 -05:00
parent 80d7133a8e
commit 0d99113f77
1 changed files with 39 additions and 48 deletions

View File

@ -61,13 +61,10 @@ class Human {
this.version = app.version; this.version = app.version;
this.defaults = defaults; this.defaults = defaults;
this.config = defaults; this.config = defaults;
this.fx = null; this.fx = (tf.ENV.flags.IS_BROWSER && (typeof document !== 'undefined')) ? new fxImage.Canvas() : null;
this.state = 'idle'; this.state = 'idle';
this.numTensors = 0; this.numTensors = 0;
this.analyzeMemoryLeaks = false; this.analyzeMemoryLeaks = false;
// internal temp canvases
this.inCanvas = null;
this.outCanvas = null;
// object that contains all initialized models // object that contains all initialized models
this.models = { this.models = {
facemesh: null, facemesh: null,
@ -163,62 +160,56 @@ class Human {
} }
tfImage(input) { tfImage(input) {
let tensor; // let imageData;
if (input instanceof tf.Tensor) { let filtered;
tensor = tf.clone(input); const originalWidth = input.naturalWidth || input.videoWidth || input.width || (input.shape && (input.shape[1] > 0));
} else { const originalHeight = input.naturalHeight || input.videoHeight || input.height || (input.shape && (input.shape[2] > 0));
const originalWidth = input.naturalWidth || input.videoWidth || input.width || (input.shape && (input.shape[1] > 0)); let targetWidth = originalWidth;
const originalHeight = input.naturalHeight || input.videoHeight || input.height || (input.shape && (input.shape[2] > 0)); let targetHeight = originalHeight;
let targetWidth = originalWidth; if (this.fx && this.config.filter.enabled && !(input instanceof tf.Tensor)) {
let targetHeight = originalHeight;
if (this.config.filter.width > 0) targetWidth = this.config.filter.width; if (this.config.filter.width > 0) targetWidth = this.config.filter.width;
else if (this.config.filter.height > 0) targetWidth = originalWidth * (this.config.filter.height / originalHeight); else if (this.config.filter.height > 0) targetWidth = originalWidth * (this.config.filter.height / originalHeight);
if (this.config.filter.height > 0) targetHeight = this.config.filter.height; if (this.config.filter.height > 0) targetHeight = this.config.filter.height;
else if (this.config.filter.width > 0) targetHeight = originalHeight * (this.config.filter.width / originalWidth); else if (this.config.filter.width > 0) targetHeight = originalHeight * (this.config.filter.width / originalWidth);
if (!this.inCanvas || (this.inCanvas.width !== originalWidth) || (this.inCanvas.height !== originalHeight)) { const offscreenCanvas = (typeof OffscreenCanvas !== 'undefined') ? new OffscreenCanvas(targetWidth, targetHeight) : document.createElement('canvas');
this.inCanvas = (typeof OffscreenCanvas !== 'undefined') ? new OffscreenCanvas(targetWidth, targetHeight) : document.createElement('canvas'); if (offscreenCanvas.width !== targetWidth) offscreenCanvas.width = targetWidth;
if (this.inCanvas.width !== targetWidth) this.inCanvas.width = targetWidth; if (offscreenCanvas.height !== targetHeight) offscreenCanvas.height = targetHeight;
if (this.inCanvas.height !== targetHeight) this.inCanvas.height = targetHeight; const ctx = offscreenCanvas.getContext('2d');
}
const ctx = this.inCanvas.getContext('2d');
if (input instanceof ImageData) ctx.putImageData(input, 0, 0); if (input instanceof ImageData) ctx.putImageData(input, 0, 0);
else ctx.drawImage(input, 0, 0, originalWidth, originalHeight, 0, 0, this.inCanvas.width, this.inCanvas.height); else ctx.drawImage(input, 0, 0, originalWidth, originalHeight, 0, 0, offscreenCanvas.width, offscreenCanvas.height);
if (this.config.filter.enabled) { this.fx.reset();
if (!this.outCanvas || (this.inCanvas.width !== this.outCanvas.width) || (this.inCanvas.height !== this.outCanvas.height)) { this.fx.addFilter('brightness', this.config.filter.brightness); // must have at least one filter enabled
this.outCanvas = (typeof OffscreenCanvas !== 'undefined') ? new OffscreenCanvas(this.inCanvas.width, this.inCanvas.height) : document.createElement('canvas'); if (this.config.filter.contrast !== 0) this.fx.addFilter('contrast', this.config.filter.contrast);
if (this.outCanvas.width !== this.inCanvas.width) this.outCanvas.width = this.inCanvas.width; if (this.config.filter.sharpness !== 0) this.fx.addFilter('sharpen', this.config.filter.sharpness);
if (this.outCanvas.height !== this.inCanvas.height) this.outCanvas.height = this.inCanvas.height; if (this.config.filter.blur !== 0) this.fx.addFilter('blur', this.config.filter.blur);
} if (this.config.filter.saturation !== 0) this.fx.addFilter('saturation', this.config.filter.saturation);
if (!this.fx) this.fx = (tf.ENV.flags.IS_BROWSER && (typeof document !== 'undefined')) ? new fxImage.Canvas({ canvas: this.outCanvas }) : null; if (this.config.filter.hue !== 0) this.fx.addFilter('hue', this.config.filter.hue);
this.fx.reset(); if (this.config.filter.negative) this.fx.addFilter('negative');
this.fx.addFilter('brightness', this.config.filter.brightness); // must have at least one filter enabled if (this.config.filter.sepia) this.fx.addFilter('sepia');
if (this.config.filter.contrast !== 0) this.fx.addFilter('contrast', this.config.filter.contrast); if (this.config.filter.vintage) this.fx.addFilter('brownie');
if (this.config.filter.sharpness !== 0) this.fx.addFilter('sharpen', this.config.filter.sharpness); if (this.config.filter.sepia) this.fx.addFilter('sepia');
if (this.config.filter.blur !== 0) this.fx.addFilter('blur', this.config.filter.blur); if (this.config.filter.kodachrome) this.fx.addFilter('kodachrome');
if (this.config.filter.saturation !== 0) this.fx.addFilter('saturation', this.config.filter.saturation); if (this.config.filter.technicolor) this.fx.addFilter('technicolor');
if (this.config.filter.hue !== 0) this.fx.addFilter('hue', this.config.filter.hue); if (this.config.filter.polaroid) this.fx.addFilter('polaroid');
if (this.config.filter.negative) this.fx.addFilter('negative'); if (this.config.filter.pixelate !== 0) this.fx.addFilter('pixelate', this.config.filter.pixelate);
if (this.config.filter.sepia) this.fx.addFilter('sepia'); filtered = this.fx.apply(offscreenCanvas);
if (this.config.filter.vintage) this.fx.addFilter('brownie'); }
if (this.config.filter.sepia) this.fx.addFilter('sepia'); let tensor;
if (this.config.filter.kodachrome) this.fx.addFilter('kodachrome'); if (input instanceof tf.Tensor) {
if (this.config.filter.technicolor) this.fx.addFilter('technicolor'); tensor = tf.clone(input);
if (this.config.filter.polaroid) this.fx.addFilter('polaroid'); } else {
if (this.config.filter.pixelate !== 0) this.fx.addFilter('pixelate', this.config.filter.pixelate); const canvas = filtered || input;
this.outCanvas = this.fx.apply(this.inCanvas);
}
if (!this.outCanvas) this.outCanvas = this.inCanvas;
let pixels; let pixels;
if ((this.config.backend === 'webgl') || (this.outCanvas instanceof ImageData)) { if ((this.config.backend === 'webgl') || (canvas instanceof ImageData)) {
// tf kernel-optimized method to get imagedata, also if input is imagedata, just use it // tf kernel-optimized method to get imagedata, also if input is imagedata, just use it
pixels = tf.browser.fromPixels(this.outCanvas); pixels = tf.browser.fromPixels(canvas);
} else { } else {
// cpu and wasm kernel does not implement efficient fromPixels method nor we can use canvas as-is, so we do a silly one more canvas // cpu and wasm kernel does not implement efficient fromPixels method nor we can use canvas as-is, so we do a silly one more canvas
const tempCanvas = (typeof OffscreenCanvas !== 'undefined') ? new OffscreenCanvas(targetWidth, targetHeight) : document.createElement('canvas'); const tempCanvas = (typeof OffscreenCanvas !== 'undefined') ? new OffscreenCanvas(targetWidth, targetHeight) : document.createElement('canvas');
tempCanvas.width = targetWidth; tempCanvas.width = targetWidth;
tempCanvas.height = targetHeight; tempCanvas.height = targetHeight;
const tempCtx = tempCanvas.getContext('2d'); const tempCtx = tempCanvas.getContext('2d');
tempCtx.drawImage(this.outCanvas, 0, 0); tempCtx.drawImage(canvas, 0, 0);
const data = tempCtx.getImageData(0, 0, targetWidth, targetHeight); const data = tempCtx.getImageData(0, 0, targetWidth, targetHeight);
pixels = tf.browser.fromPixels(data); pixels = tf.browser.fromPixels(data);
} }
@ -227,7 +218,7 @@ class Human {
pixels.dispose(); pixels.dispose();
casted.dispose(); casted.dispose();
} }
return { tensor, canvas: this.config.filter.return ? this.outCanvas : null }; return { tensor, canvas: this.config.filter.return ? filtered : null };
} }
async detect(input, userConfig = {}) { async detect(input, userConfig = {}) {