Implemented applyConfig for ImageSource; Refactored ImageSource to fit into a class
Christoph Oberhofer
8 years ago
parent
b799a154b0
commit
d279971c46
@ -1,82 +1,102 @@
|
|||||||
import {findTagsInObjectURL} from './exif_helper';
|
import {findTagsInObjectURL} from './exif_helper';
|
||||||
import {generateSourceInterface} from './SourceInterface';
|
import {Source} from './SourceInterface';
|
||||||
|
|
||||||
export function fromImage(input, constraints = {width: 800, height: 800, channels: 3}) {
|
class ImageSource extends Source {
|
||||||
var $image = null;
|
constructor() {
|
||||||
var src = null;
|
super("IMAGE");
|
||||||
if (typeof input === 'string') {
|
this._$image = null;
|
||||||
// data or url, or queryString
|
this._src = null;
|
||||||
$image = new Image();
|
this.tags = null;
|
||||||
src = input;
|
this.colorChannels = 3;
|
||||||
} else if (input instanceof HTMLImageElement) {
|
|
||||||
$image = input;
|
|
||||||
} else if (input instanceof File) {
|
|
||||||
$image = new Image();
|
|
||||||
src = URL.createObjectURL(input);
|
|
||||||
} else {
|
|
||||||
return Promise.reject("fromImage needs a src, HTMLImageElement or File");
|
|
||||||
}
|
}
|
||||||
return new Promise(function(resolve, reject) {
|
|
||||||
if (src || !$image.complete) {
|
applyConstraints(newConstraints) {
|
||||||
console.log('Adding eventlistener');
|
this.constraints = newConstraints;
|
||||||
$image.addEventListener('load', function() {
|
this.colorChannels = this.constraints.channels || this.colorChannels;
|
||||||
resolve();
|
return this._applyInput(this.constraints.src)
|
||||||
}, false);
|
._loadResource()
|
||||||
$image.addEventListener('error', function(e) {
|
.then(() => findTagsInObjectURL(this._src, ['orientation']))
|
||||||
reject(e);
|
.then((tags) => {this.tags = tags;})
|
||||||
}, false);
|
.then(this._determineDimensions.bind(this))
|
||||||
if (src) {
|
.then(() => this);
|
||||||
console.log(`Setting src = ${src}`);
|
}
|
||||||
$image.src = src;
|
|
||||||
|
_loadResource() {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
if (this._src || !this._$image.complete) {
|
||||||
|
this._$image.addEventListener('load', resolve, false);
|
||||||
|
this._$image.addEventListener('error', reject, false);
|
||||||
|
if (this._src) {
|
||||||
|
console.log(`Setting src = ${this._src}`);
|
||||||
|
this._$image.src = this._src;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
return resolve();
|
||||||
}
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
_applyInput(input) {
|
||||||
|
if (typeof input === 'string') {
|
||||||
|
// data or url, or queryString
|
||||||
|
this._$image = new Image();
|
||||||
|
this._src = input;
|
||||||
|
} else if (input instanceof HTMLImageElement) {
|
||||||
|
this._$image = input;
|
||||||
|
} else if (input instanceof File) {
|
||||||
|
this._$image = new Image();
|
||||||
|
this._src = URL.createObjectURL(input);
|
||||||
} else {
|
} else {
|
||||||
return resolve();
|
throw new Error("fromImage needs a src, HTMLImageElement or File");
|
||||||
}
|
}
|
||||||
})
|
return this;
|
||||||
.then(() => findTagsInObjectURL(src, ['orientation']))
|
}
|
||||||
.then((tags) => {
|
|
||||||
let width = $image.naturalWidth;
|
_determineDimensions() {
|
||||||
let height = $image.naturalHeight;
|
let width = this._$image.naturalWidth;
|
||||||
if (tags && tags.orientation) {
|
let height = this._$image.naturalHeight;
|
||||||
switch (tags.orientation) {
|
let desiredWidth = this.constraints.width;
|
||||||
|
if (this.tags && this.tags.orientation) {
|
||||||
|
switch (this.tags.orientation) {
|
||||||
case 6:
|
case 6:
|
||||||
case 8:
|
case 8:
|
||||||
width = $image.naturalHeight;
|
width = this._$image.naturalHeight;
|
||||||
height = $image.naturalWidth;
|
height = this._$image.naturalWidth;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const imageAR = width / height;
|
const imageAR = width / height;
|
||||||
const calculatedWidth = imageAR > 1 ? constraints.width : Math.floor((imageAR) * constraints.width);
|
const calculatedWidth = imageAR > 1 ? desiredWidth : Math.floor((imageAR) * desiredWidth);
|
||||||
const calculatedHeight = imageAR > 1 ? Math.floor((1 / imageAR) * constraints.width) : constraints.width;
|
const calculatedHeight = imageAR > 1 ? Math.floor((1 / imageAR) * desiredWidth) : desiredWidth;
|
||||||
const colorChannels = constraints.channels || 3;
|
|
||||||
|
|
||||||
return Object.assign(generateSourceInterface(), {
|
this._dimensions = {
|
||||||
type: "IMAGE",
|
viewport: {
|
||||||
colorChannels,
|
width, // AR
|
||||||
tags,
|
height, // AR
|
||||||
getDimensions() {
|
x: 0, // AR
|
||||||
return {
|
y: 0, // AR
|
||||||
viewport: {
|
|
||||||
width: $image.naturalWidth, // AR
|
|
||||||
height: $image.naturalHeight, // AR
|
|
||||||
x: 0, // AR
|
|
||||||
y: 0, // AR
|
|
||||||
},
|
|
||||||
canvas: {
|
|
||||||
width: calculatedWidth, // AR
|
|
||||||
height: calculatedHeight, // AR
|
|
||||||
},
|
|
||||||
};
|
|
||||||
},
|
|
||||||
getDrawable: function() {
|
|
||||||
return $image;
|
|
||||||
},
|
|
||||||
getLabel: function() {
|
|
||||||
return $image.src;
|
|
||||||
},
|
},
|
||||||
getConstraints: function() {
|
canvas: {
|
||||||
return constraints;
|
width: calculatedWidth, // AR
|
||||||
|
height: calculatedHeight, // AR
|
||||||
},
|
},
|
||||||
});
|
};
|
||||||
});
|
}
|
||||||
|
|
||||||
|
getDimensions() {
|
||||||
|
return this._dimensions;
|
||||||
|
}
|
||||||
|
|
||||||
|
getDrawable() {
|
||||||
|
return this._$image;
|
||||||
|
}
|
||||||
|
|
||||||
|
getLabel() {
|
||||||
|
return this._$image.src;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function fromImage(constraints = {width: 800, height: 800, channels: 3}) {
|
||||||
|
const imageSource = new ImageSource();
|
||||||
|
return imageSource.applyConstraints(constraints);
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue