Importieren von JS-Datei in Ionic/Schräg 2

Question

Ich versuche Dies ist, was die Bibliothek sieht aus wie eine sehr einfache JS-Bibliothek zu Angular 2. zu importieren:

JIC.js

var jic = { 
     /** 
     * Receives an Image Object (can be JPG OR PNG) and returns a new Image Object compressed 
     * @param {Image} source_img_obj The source Image Object 
     * @param {Integer} quality The output quality of Image Object 
     * @param {String} output format. Possible values are jpg and 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; 
     }, 

     /** 
     * Receives an Image Object and upload it to the server via ajax 
     * @param {Image} compressed_img_obj The Compressed Image Object 
     * @param {String} The server side url to send the POST request 
     * @param {String} file_input_name The name of the input that the server will receive with the file 
     * @param {String} filename The name of the file that will be sent to the server 
     * @param {function} successCallback The callback to trigger when the upload is succesful. 
     * @param {function} (OPTIONAL) errorCallback The callback to trigger when the upload failed. 
     * @param {function} (OPTIONAL) duringCallback The callback called to be notified about the image's upload progress. 
     * @param {Object} (OPTIONAL) customHeaders An object representing key-value properties to inject to the request header. 
     */ 

     upload: function(compressed_img_obj, upload_url, file_input_name, filename, successCallback, errorCallback, duringCallback, customHeaders){ 

      //ADD sendAsBinary compatibilty to older browsers 
      if (XMLHttpRequest.prototype.sendAsBinary === undefined) { 
       XMLHttpRequest.prototype.sendAsBinary = function(string) { 
        var bytes = Array.prototype.map.call(string, function(c) { 
         return c.charCodeAt(0) & 0xff; 
        }); 
        this.send(new Uint8Array(bytes).buffer); 
       }; 
      } 

      var type = "image/jpeg"; 
      if(filename.substr(-4).toLowerCase()==".png"){ 
       type = "image/png"; 
      } 

      var data = compressed_img_obj.src; 
      data = data.replace('data:' + type + ';base64,', ''); 

      var xhr = new XMLHttpRequest(); 
      xhr.open('POST', upload_url, true); 
      var boundary = 'someboundary'; 

      xhr.setRequestHeader('Content-Type', 'multipart/form-data; boundary=' + boundary); 

     // Set custom request headers if customHeaders parameter is provided 
     if (customHeaders && typeof customHeaders === "object") { 
      for (var headerKey in customHeaders){ 
       xhr.setRequestHeader(headerKey, customHeaders[headerKey]); 
      } 
     } 

     // If a duringCallback function is set as a parameter, call that to notify about the upload progress 
     if (duringCallback && duringCallback instanceof Function) { 
      xhr.upload.onprogress = function (evt) { 
       if (evt.lengthComputable) { 
        duringCallback ((evt.loaded/evt.total)*100); 
       } 
      }; 
     } 

      xhr.sendAsBinary(['--' + boundary, 'Content-Disposition: form-data; name="' + file_input_name + '"; filename="' + filename + '"', 'Content-Type: ' + type, '', atob(data), '--' + boundary + '--'].join('\r\n')); 

      xhr.onreadystatechange = function() { 
      if (this.readyState == 4){ 
       if (this.status == 200) { 
        successCallback(this.responseText); 
       }else if (this.status >= 400) { 
        if (errorCallback && errorCallback instanceof Function) { 
         errorCallback(this.responseText); 
        } 
       } 
      } 
      }; 


     } 
}; 

I Bisher ich will es

npm install j-i-c --save

im Typoskript-Datei verwenden: diese haben versucht

import * as jic from 'j-i-c';

In meinem app.component.ts:

declare var jic: any;.

Wenn ich es ausführen und versuchen, die globale Variable jic zu protokollieren, ist es nur ein leeres Objekt {}. Ich nehme an, dies ist, weil ich eine Typdefinition brauche, und ich brauche Hilfe dabei - aber ich frage mich auch, ob JIC.js in sowieso umgeschrieben werden muss. Ich habe versucht, den Export die beiden Funktionen compress und upload und immer der jic Objektdeklaration wie folgt los:

 export function compress(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; 
     }; 

     /** 
     * Receives an Image Object and upload it to the server via ajax 
     * @param {Image} compressed_img_obj The Compressed Image Object 
     * @param {String} The server side url to send the POST request 
     * @param {String} file_input_name The name of the input that the server will receive with the file 
     * @param {String} filename The name of the file that will be sent to the server 
     * @param {function} successCallback The callback to trigger when the upload is succesful. 
     * @param {function} (OPTIONAL) errorCallback The callback to trigger when the upload failed. 
     * @param {function} (OPTIONAL) duringCallback The callback called to be notified about the image's upload progress. 
     * @param {Object} (OPTIONAL) customHeaders An object representing key-value properties to inject to the request header. 
     */ 

     export function upload(compressed_img_obj, upload_url, file_input_name, filename, successCallback, errorCallback, duringCallback, customHeaders){ 

      //ADD sendAsBinary compatibilty to older browsers 
      if (XMLHttpRequest.prototype.sendAsBinary === undefined) { 
       XMLHttpRequest.prototype.sendAsBinary = function(string) { 
        var bytes = Array.prototype.map.call(string, function(c) { 
         return c.charCodeAt(0) & 0xff; 
        }); 
        this.send(new Uint8Array(bytes).buffer); 
       }; 
      } 

      var type = "image/jpeg"; 
      if(filename.substr(-4).toLowerCase()==".png"){ 
       type = "image/png"; 
      } 

      var data = compressed_img_obj.src; 
      data = data.replace('data:' + type + ';base64,', ''); 

      var xhr = new XMLHttpRequest(); 
      xhr.open('POST', upload_url, true); 
      var boundary = 'someboundary'; 

      xhr.setRequestHeader('Content-Type', 'multipart/form-data; boundary=' + boundary); 

     // Set custom request headers if customHeaders parameter is provided 
     if (customHeaders && typeof customHeaders === "object") { 
      for (var headerKey in customHeaders){ 
       xhr.setRequestHeader(headerKey, customHeaders[headerKey]); 
      } 
     } 

     // If a duringCallback function is set as a parameter, call that to notify about the upload progress 
     if (duringCallback && duringCallback instanceof Function) { 
      xhr.upload.onprogress = function (evt) { 
       if (evt.lengthComputable) { 
        duringCallback ((evt.loaded/evt.total)*100); 
       } 
      }; 
     } 

     xhr.sendAsBinary(['--' + boundary, 'Content-Disposition: form-data; name="' + file_input_name + '"; filename="' + filename + '"', 'Content-Type: ' + type, '', atob(data), '--' + boundary + '--'].join('\r\n')); 

     xhr.onreadystatechange = function() { 
      if (this.readyState == 4){ 
       if (this.status == 200) { 
        successCallback(this.responseText); 
       }else if (this.status >= 400) { 
        if (errorCallback && errorCallback instanceof Function) { 
         errorCallback(this.responseText); 
        } 
       } 
      } 
     }; 

Also, warum ist das Objekt, das auf der Konsole leer angemeldet wird? Wie importiere ich diese Bibliothek korrekt? Ich versuche das auch, weil ich kein brauchbares angular2/ionic image compression Paket finde. Ich fand ng2-img-tools - aber es gab ein Problem -. Die Bilddatei ohne type-Attribut war (es war null statt image/jpeg und das machte es unmöglich, in Github

Answer 1

Nach dieser Ausgabe zu komprimieren
https://github.com/brunobar79/J-I-C/issues/47
Sie können ‚t importieren wie

Sie haben eine sehr einfache Änderung in der verkleinerten Version machen, um zu ermöglichen.‚require‘es als Modul:

in j-i-c/dist/JIC.min.js,
yo u kann
var jic =
von
module.exports =

Nach ändern, in Sie in der Komponentendatei importieren, können Sie

import * as jicLib from 'j-i-c/dist/JIC.min'; declare const jib:any = jicLib;';

schreiben und jib.compress() verwenden, wann immer Sie