I have been attempting to integrate a simple JS library into Angular 2. The library in question is JIC.js.
var jic = {
/**
* This function takes an Image Object (JPG or PNG) and returns a compressed new Image Object
* @param {Image} source_img_obj The original Image Object
* @param {Integer} quality The quality of the output Image Object
* @param {String} output format. Can be jpg or png
* @return {Image} result_image_obj The compressed Image Object
*/
compress: function(source_img_obj, quality, output_format){
var mime_type = "image/jpeg";
if(typeof output_format !== "undefined" && output_format=="png"){
mime_type = "image/png";
}
var cvs = document.createElement('canvas');
cvs.width = source_img_obj.naturalWidth;
cvs.height = source_img_obj.naturalHeight;
var ctx = cvs.getContext("2d").drawImage(source_img_obj, 0, 0);
var newImageData = cvs.toDataURL(mime_type, quality/100);
var result_image_obj = new Image();
result_image_obj.src = newImageData;
return result_image_obj;
},
// Uploads an Image Object to the server via ajax
upload: function(compressed_img_obj, upload_url, file_input_name, filename, successCallback, errorCallback, duringCallback, customHeaders){
// Code for uploading image
}
};
I attempted installing this library using npm:
npm install j-i-c --save
In the TypeScript file where I intend to utilize it:
import * as jic from 'j-i-c';
In my app.component.ts:
declare var jic: any;.
Upon checking the global variable jic, I noticed that it was empty {}. My assumption is that a typings definition is required. Additionally, I considered modifying the JIC.js file by exporting the functions compress and upload individually without the jic object declaration.
// Modified export functions here
I am puzzled as to why the logged object remains empty. How can I correctly import this library? This endeavor stems from my search for a suitable Angular2/Ionic image compression package, as the ones I have encountered pose challenges such as missing type attributes on image files.