1
I installed ng2-img-max in order to resize images. I want each image sent 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 faced some mistakes one of them is this:
ReferenceError: EXIF is not defined
The mistake is very clear, I am going through problems similar to the one of the companion below;
I delete the node_modules folder and the file package-lock.json and changed the version in the file package json. for "ng2-img-max": "2.1.9", but I was unsuccessful, then I tried the same thing with the version "ng2-img-max": "2.1.15", but I haven’t succeeded yet, and then tried to include this script in the file app.component.html, but I have not yet succeeded.
This kind of problem happens when I upload the image.
Someone’s been through this trouble 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 wrong file is in the node_modules folder in the path
_ node_modeles
_ ng2-img-max
_ dist
_src
_img-exif.service.js
and within that archive.
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
For the error message you wrote
EXIF, is that the right is notExif, After all Javascript (Typescript is converted into this) is case-sensitive.– Guilherme Nascimento
@Guilhermenascimento actually this error is coming from a file that is in the folder
node_modeles, then it is a file created by lib itself, I am following this tutorial https://alligator.io/angular/resizing-images-in-browser-ng2-img-max/ so there is no possibility that I have written this code because it is self-generated by lib itself, and also do not dare to modify the file that was auto generated by lib.– wladyband
And in Packages.json which modules are informed and installed?
– Guilherme Nascimento
please see my post again, I just updated.
– wladyband
It can put the complete message, including source?
– Guilherme Nascimento
i did not understand the question, but if you want to have access to my project, I updated my post and put there the link of my repository, but I will put here also <<< https://github.com/wladyband/angular-sistema-vendas/tree/master/src/appadmin/edit-restaurant >>>>>
– wladyband
Open the browser console with F12, press F5 on your application screen, then look at the console screen, copy the full error and paste here. Sorry dear @wladyband, but I will not download a whole system to test the problem, there is something that can give yourself advance to us if you look at the log or debug calmly. So this way we can go straight to the problem and help you find the solution. Thank you for understanding.
– Guilherme Nascimento
I put the complete error message in the post update and also put the file path which is with error and the file code which is with error. , take a look there please.
– wladyband
Could be a bug, trying to upgrade to version
2.1.17(current version). In the node_modules folder you can see if the module existsexif-js.– Guilherme Nascimento
I just updated and continue with the same error, and the module
exif-jsis in the project.– wladyband
I will create a simple project here and let you know if the same error occurs.
– Guilherme Nascimento
@Guilhermenascimento thank you very much, if you succeed in your project, I wish you could provide me your project if it’s not bother.
– wladyband