I installed ng2-img-max for the purpose of resizing images. I want each submitted image to be resized to a predefined width and length. I see that most people use ng2-img-max when developing with 2/4 angular. I tried to use with this lib and then I faced some errors one of them is this:
ReferenceError: EXIF is not defined
The error is very clear, I'm going through problems similar to that of the companion below;
I deleted the node_modules folder and the package-lock.json file and changed the version in the package.json file to "ng2-img-max": "2.1.9" , but I did not succeed I tried the same thing with the "ng2-img-max": "2.1.15", version but I still did not succeed, and then I tried to include this script in the app.component.html file, but I have not yet succeeded.
This type of problem happens when I load the image.
Has anyone ever had this problem that can help me?
This is my REPOSITORY
Modules that are installed;
{
"name": "meat",
"version": "1.0.0",
"license": "MIT",
"angular-cli": {},
"scripts": {
"ng": "ng",
"start": "ng serve",
"lint": "tslint \"src/**/*.ts\" --project src/tsconfig.json --type-check && tslint \"e2e/**/*.ts\" --project e2e/tsconfig.json --type-check",
"test": "ng test",
"pree2e": "webdriver-manager update --standalone false --gecko false",
"e2e": "protractor"
},
"private": true,
"dependencies": {
"@angular/animations": "4.0.0",
"@angular/common": "4.0.0",
"@angular/compiler": "4.0.0",
"@angular/core": "4.0.0",
"@angular/forms": "4.0.0",
"@angular/http": "4.0.0",
"@angular/platform-browser": "4.0.0",
"@angular/platform-browser-dynamic": "4.0.0",
"@angular/router": "4.0.0",
"admin-lte": "2.3.11",
"blueimp-canvas-to-blob": "^3.14.0",
"core-js": "2.4.1",
"font-awesome": "4.7.0",
"intl": "1.2.5",
"jquery": "3.1.1",
"ng2-img-max": "2.1.15",
"reflect-metadata": "0.1.9",
"rxjs": "5.1.0",
"ts-helpers": "1.1.2",
"web-animations-js": "^2.2.5",
"zone.js": "0.8.4"
},
"devDependencies": {
"@angular/cli": "1.2.7",
"@angular/compiler-cli": "4.0.0",
"@types/jasmine": "2.5.38",
"@types/node": "7.0.5",
"codelyzer": "2.0.0",
"jasmine-core": "2.5.2",
"jasmine-spec-reporter": "3.2.0",
"karma": "1.4.1",
"karma-chrome-launcher": "2.0.0",
"karma-cli": "1.0.1",
"karma-jasmine": "1.1.0",
"karma-remap-istanbul": "0.2.2",
"protractor": "5.1.0",
"ts-node": "2.1.0",
"tslint": "4.5.0",
"typescript": "2.2.0",
"webdriver-manager": "10.2.5"
}
}
This is the error message;
core.es5.js:1085 ERROR Error: Uncaught (in promise): ReferenceError: EXIF is not defined
ReferenceError: EXIF is not defined
at img-exif.service.js:9
at new ZoneAwarePromise (zone.js:776)
at ImgExifService.webpackJsonp.../../../../ng2-pica/dist/src/img-exif.service.js.ImgExifService.getOrientedImage (img-exif.service.js:7)
at Image.img.onload (img-maxpx-size.service.js:24)
at Image.wrapFn [as __zone_symbol___onload] (zone.js:1393)
at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:398)
at Object.onInvokeTask (core.es5.js:4136)
at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:397)
at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask (zone.js:165)
at Image.ZoneTask.invoke (zone.js:460)
at img-exif.service.js:9
at new ZoneAwarePromise (zone.js:776)
at ImgExifService.webpackJsonp.../../../../ng2-pica/dist/src/img-exif.service.js.ImgExifService.getOrientedImage (img-exif.service.js:7)
at Image.img.onload (img-maxpx-size.service.js:24)
at Image.wrapFn [as __zone_symbol___onload] (zone.js:1393)
at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:398)
at Object.onInvokeTask (core.es5.js:4136)
at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:397)
at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask (zone.js:165)
at Image.ZoneTask.invoke (zone.js:460)
at resolvePromise (zone.js:683) [angular]
at :4200/polyfills.bundle.js:6444:17 [angular]
at Object.onInvokeTask (core.es5.js:4136) [angular]
The file that is in error is in the node_modules folder in the path
_ node_modeles
_ ng2-img-max
_ dist
_src
_img-exif.service.js
and within that file.
import { Injectable } from '@angular/core';
import 'exif-js/exif';
var ImgExifService = (function () {
function ImgExifService() {
}
ImgExifService.prototype.getOrientedImage = function (image) {
var result = new Promise(function (resolve, reject) {
var img;
if (!EXIF) {
EXIF = {};
EXIF.getData = function (img, callback) {
callback.call(image);
return true;
};
EXIF.getTag = function () { return false; };
}
EXIF.getData(image, function () {
var orientation = EXIF.getTag(image, "Orientation");
if (orientation != 1) {
var canvas = document.createElement("canvas"), ctx = canvas.getContext("2d"), cw = image.width, ch = image.height, cx = 0, cy = 0, deg = 0;
switch (orientation) {
case 3:
case 4:
cx = -image.width;
cy = -image.height;
deg = 180;
break;
case 5:
case 6:
cw = image.height;
ch = image.width;
cy = -image.height;
deg = 90;
break;
case 7:
case 8:
cw = image.height;
ch = image.width;
cx = -image.width;
deg = 270;
break;
default:
break;
}
canvas.width = cw;
canvas.height = ch;
if ([2, 4, 5, 7].indexOf(orientation) > -1) {
//flip image
ctx.translate(cw, 0);
ctx.scale(-1, 1);
}
ctx.rotate(deg * Math.PI / 180);
ctx.drawImage(image, cx, cy);
img = document.createElement("img");
img.width = cw;
img.height = ch;
img.addEventListener('load', function () {
resolve(img);
});
img.src = canvas.toDataURL("image/png");
}
else {
resolve(image);
}
});
});
return result;
};
ImgExifService.decorators = [
{ type: Injectable },
];
/** @nocollapse */
ImgExifService.ctorParameters = function () { return []; };
return ImgExifService;
}());
export { ImgExifService };
//# sourceMappingURL=img-exif.service.js.map