UnknownObject/quaggaJS
1
0
Fork 0
mirror of https://github.com/serratus/quaggaJS.git synced 2026-08-13 13:51:37 +08:00
Code Issues Packages Projects Releases Wiki Activity

Orientation works on iPhone and Android

Browse Source
This commit is contained in:
Christoph Oberhofer
2017-04-01 17:51:17 +02:00
parent 5f385d490d
commit 41b0d80207
7 changed files with 110 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/input/ImageSource.js
+84
View File
@@ -0,0 +1,84 @@
import {findTagsInObjectURL} from './exif_helper';
export function fromImage(input, constraints = {width: 800, height: 800, channels: 3}) {
var $image = null;
var src = null;
if (typeof input === 'string') {
// data or url, or queryString
$image = new Image();
src = input;
} 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) {
console.log('Adding eventlistener');
$image.addEventListener('load', function() {
resolve();
}, false);
$image.addEventListener('error', function(e) {
reject(e);
}, false);
if (src) {
console.log(`Setting src = ${src}`);
$image.src = src;
}
} else {
return resolve();
}
})
.then(() => findTagsInObjectURL(src, ['orientation']))
.then((tags) => {
let width = $image.naturalWidth;
let height = $image.naturalHeight;
if (tags && tags.orientation) {
switch (tags.orientation) {
case 6:
case 8:
width = $image.naturalHeight;
height = $image.naturalWidth;
}
}
const imageAR = width / height;
const calculatedWidth = imageAR > 1 ? constraints.width : Math.floor((imageAR) * constraints.width);
const calculatedHeight = imageAR > 1 ? Math.floor((1 / imageAR) * constraints.width) : constraints.width;
const colorChannels = constraints.channels || 3;
return {
type: "IMAGE",
colorChannels,
tags,
getDimensions() {
return {
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() {
return constraints;
},
applyConstraints: function() {
console.log('ImageSource.applyConstraints not implemented');
},
};
});
}
src/input/PixelCapture.js
+5 -3
View File
@@ -6,6 +6,8 @@ import {
import {sleep, getViewport} from '../common/utils';
import {aquire} from '../common/buffers';
const TO_RADIANS = Math.PI / 180;
function adjustCanvasSize(input, canvas) {
if (input instanceof HTMLVideoElement) {
if (canvas.height !== input.videoHeight || canvas.width !== input.videoWidth) {
@@ -45,9 +47,8 @@ function drawImage(
canvasSize,
ctx,
source,
type,
drawable,
...drawImageArgs,
...drawImageArgs
) {
let drawAngle = 0;
if (source.type === 'IMAGE') {
@@ -63,10 +64,11 @@ function drawImage(
}
}
const [,,,,,, dWidth, dHeight] = drawImageArgs;
if (drawAngle !== 0) {
ctx.translate(canvasSize.width / 2, canvasSize.height / 2);
ctx.rotate(drawAngle);
ctx.drawImage(drawable, -canvasSize.height / 2, -canvasSize.width / 2, canvasSize.height, canvasSize.width);
ctx.drawImage(drawable, -dHeight / 2, -dWidth / 2, dHeight, dWidth);
ctx.rotate(-drawAngle);
ctx.translate(-canvasSize.width / 2, -canvasSize.height / 2);
} else {
src/input/Source.js
+2 -74
View File
@@ -3,6 +3,8 @@ import {determineOrientation, PORTRAIT, LANDSCAPE, SQUARE} from '../common/devic
import CameraAccess from './camera_access';
import {getViewport} from '../common/utils';
export * from './ImageSource';
const ConstraintPresets = [
{
width: 720,
@@ -244,77 +246,3 @@ export function fromCanvas(input) {
}
});
}
export function fromImage(input, constraints = {width: 800, height: 800, channels: 3}) {
var $image = null;
var src = null;
if (typeof input === 'string') {
// data or url, or queryString
$image = new Image();
src = input;
} 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) {
console.log('Adding eventlistener');
$image.addEventListener('load', function() {
resolve();
}, false);
$image.addEventListener('error', function(e) {
reject(e);
}, false);
if (src) {
console.log(`Setting src = ${src}`);
$image.src = src;
}
} else {
return resolve();
}
})
.then(() => {
const width = $image.naturalWidth;
const height = $image.naturalHeight;
const imageAR = width / height;
const calculatedWidth = imageAR > 1 ? constraints.width : Math.floor((imageAR) * constraints.width);
const calculatedHeight = imageAR > 1 ? Math.floor((1 / imageAR) * constraints.width) : constraints.width;
const colorChannels = constraints.channels || 3;
return {
type: "IMAGE",
colorChannels,
getDimensions() {
return {
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() {
return constraints;
},
applyConstraints: function() {
console.log('ImageSource.applyConstraints not implemented');
},
};
});
}