Skip to content

Commit f33437c

Browse files
ericnogralesEric "Danger" Nograles
and
Eric "Danger" Nograles
authored
Removes exifreader Dependency (#70)
* #34 removes ExifReader - See https://aws.amazon.com/blogs/machine-learning/how-an-important-change-in-web-standards-impacts-your-image-annotation-jobs/ - Browsers now rotate images based on exif by default * readme.md update * updated dist for next release Co-authored-by: Eric "Danger" Nograles <[email protected]>
1 parent 89c9eb1 commit f33437c

File tree

8 files changed

+9
-125
lines changed

8 files changed

+9
-125
lines changed

README.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
# browser-image-resizer
22

3+
A tiny (~7kb ) browser-based library to downscale and/or resize images using `<canvas>`.
4+
35
## Introduction
46

5-
This library allows for cross-browser image downscaling and resizing utilizing `<canvas>`. The code was part of Ross Turner's [HTML5-ImageUploader](https://github.com/rossturner/HTML5-ImageUploader). Note that this is meant to be a browser-only utility and will not work in Node.js.
7+
The code was part of Ross Turner's [HTML5-ImageUploader](https://github.com/rossturner/HTML5-ImageUploader). Note that this is meant to be a browser-only utility and will not work in Node.js.
68

79
## Demo
810

@@ -35,7 +37,6 @@ const config = {
3537
quality: 0.5,
3638
maxWidth: 800,
3739
maxHeight: 600,
38-
autoRotate: true,
3940
debug: true
4041
};
4142

@@ -104,7 +105,6 @@ const config = {
104105
quality: 0.5,
105106
maxWidth: 800,
106107
maxHeight: 600,
107-
autoRotate: true,
108108
debug: true
109109
};
110110

dist/index.js

+1-8
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

package-lock.json

-35
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

package.json

+1-4
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,5 @@
1717
"build": "NODE_ENV=production webpack --mode=production",
1818
"dev": "webpack --watch --mode=development"
1919
},
20-
"repository": "https://github.com/ericnograles/browser-image-resizer.git",
21-
"dependencies": {
22-
"exifreader": "^4.5.1"
23-
}
20+
"repository": "https://github.com/ericnograles/browser-image-resizer.git"
2421
}

src/index.js

-26
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import ExifReader from 'exifreader';
21
import { initializeOrGetImg } from './browser_operations';
32
import { scaleImage } from './scaling_operations';
43

@@ -23,31 +22,6 @@ export function readAndCompressImage(file, userConfig) {
2322
}
2423
img.onload = function() {
2524
let scaleImageOptions = { img, config }
26-
if (config.autoRotate) {
27-
if (config.debug)
28-
console.log(
29-
'browser-image-resizer: detecting image orientation...'
30-
);
31-
let Orientation = {};
32-
try {
33-
const Result = ExifReader.load(file);
34-
Orientation = Result.Orientation || {};
35-
} catch (err) {
36-
console.error('browser-image-resizer: Error getting orientation')
37-
console.error(err)
38-
}
39-
if (config.debug) {
40-
console.log(
41-
'browser-image-resizer: image orientation from EXIF tag = ' +
42-
Orientation
43-
);
44-
}
45-
scaleImageOptions.orientation = Orientation.value
46-
} else if (config.debug) {
47-
console.log(
48-
'browser-image-resizer: ignoring EXIF orientation tag because autoRotate is false...'
49-
);
50-
}
5125
try {
5226
let blob = scaleImage(scaleImageOptions);
5327
resolve(blob)

src/scaling_operations.js

+2-47
Original file line numberDiff line numberDiff line change
@@ -44,52 +44,6 @@ function findMaxWidth(config, canvas) {
4444
return mWidth;
4545
}
4646

47-
function exifApplied(canvas, ctx, orientation, img) {
48-
let width = canvas.width;
49-
let styleWidth = canvas.style.width;
50-
let height = canvas.height;
51-
let styleHeight = canvas.style.height;
52-
if (orientation > 4) {
53-
canvas.width = height;
54-
canvas.style.width = styleHeight;
55-
canvas.height = width;
56-
canvas.style.height = styleWidth;
57-
}
58-
switch (orientation) {
59-
case 2:
60-
ctx.translate(width, 0);
61-
ctx.scale(-1, 1);
62-
break;
63-
case 3:
64-
ctx.translate(width, height);
65-
ctx.rotate(Math.PI);
66-
break;
67-
case 4:
68-
ctx.translate(0, height);
69-
ctx.scale(1, -1);
70-
break;
71-
case 5:
72-
ctx.rotate(0.5 * Math.PI);
73-
ctx.scale(1, -1);
74-
break;
75-
case 6:
76-
ctx.rotate(0.5 * Math.PI);
77-
ctx.translate(0, -height);
78-
break;
79-
case 7:
80-
ctx.rotate(0.5 * Math.PI);
81-
ctx.translate(width, -height);
82-
ctx.scale(-1, 1);
83-
break;
84-
case 8:
85-
ctx.rotate(-0.5 * Math.PI);
86-
ctx.translate(-width, 0);
87-
break;
88-
}
89-
ctx.drawImage(img, 0, 0);
90-
ctx.restore();
91-
}
92-
9347
function scaleCanvasWithAlgorithm(canvas, config) {
9448
let scaledCanvas = document.createElement('canvas');
9549

@@ -217,7 +171,8 @@ export function scaleImage({ img, config, orientation = 1 } = {}) {
217171
}
218172

219173
// EXIF
220-
exifApplied(canvas, ctx, orientation, img);
174+
ctx.drawImage(img, 0, 0);
175+
ctx.restore();
221176

222177
let maxWidth = findMaxWidth(config, canvas);
223178

tests/bir-react/src/App.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ export default class App extends Component {
99
};
1010

1111
onChange = async event => {
12-
let image = await readAndCompressImage(event.target.files[0], { mimeType: 'image/jpeg'});
12+
let image = await readAndCompressImage(event.target.files[0], { mimeType: 'image/jpeg', debug: true });
1313
let base64Image = await this.convertToBase64(image);
1414
this.setState({ image: base64Image });
1515
};

tests/bir-vue/src/App.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ export default {
2525
this.images = images
2626
},
2727
async readImageAndConvertToBase64(file) {
28-
let image = await readAndCompressImage(file, { mimeType: 'image/jpeg'} );
28+
let image = await readAndCompressImage(file, { mimeType: 'image/png', debug: true } );
2929
let base64Image = await this.convertToBase64(image);
3030
return base64Image
3131
},

0 commit comments

Comments
 (0)