I am trying to use one of the javascript package of image compression i.e. compressorjs in React Native Expo App. It is giving me following ReferenceError:
Unhandled promise rejection: ReferenceError: Can't find variable: Image]
at node_modules/compressorjs/dist/compressor.js:680:19 in Compressor
at components/places/Image-Picker.js:49:29 in CompressionHandler
The documentation link of this compressorjs: https://github.com/fengyuanchen/compressorjs Here is my code where image compression function is carried out:
const CompressionHandler = (pic) => {
console.log("PIC Type: ", typeof (pic));
console.log("object Pic: ", pic)
const returnResult = new Compressor(pic.uri, { // line #49
quality: 0.6,
beforeDraw(context, canvas) {
context.fillStyle = '#fff';
context.fillRect(0, 0, canvas.width, canvas.height);
context.filter = 'grayscale(100%)';
},
drew(context, canvas) {
context.fillStyle = '#fff';
context.font = '2rem serif';
context.fillText('watermark', 20, canvas.height - 20);
},
success(result) {
console.log("Result-----", result);
console.log("Result URL-----", result.uri);
setCompressedImage(result)
},
error(err) {
console.log("Error occurred - ", err);
}
})
return returnResult;
}
Output I received:
PIC Type: object
object Pic: Object {
"cancelled": false,
"height": 1756,
"type": "image",
"uri": "file:///data/user/0/host.exp.exponent/cache/ExperienceData/%2540anonymous%252Ffavourite-places-6b9227ff-cdbe-4575-87fb-93a41260822c/ImagePicker/4e0d89c3-d4c1-4443-8dd9-98e400fc4af1.jpg",
"width": 3120,
}
[Unhandled promise rejection: ReferenceError: Can't find variable: Image]
at node_modules/compressorjs/dist/compressor.js:680:19 in Compressor
at components/places/Image-Picker.js:49:29 in CompressionHandler
Following some lines from node_modules/compressorjs/dist/compressor.js:
function Compressor(file, options) {
_classCallCheck(this, Compressor);
this.file = file;
this.image = new Image(); // line #680 >> ReferenceError at this line
this.options = _objectSpread2(_objectSpread2({}, DEFAULTS), options);
this.aborted = false;
this.result = null;
this.init();
}
If anyone know how to solve this, please let me know. Thanks in advance.