Installation with Angular CLI Project

[SilasNiewierra]

I would like to use MarvinJ in my Angular application. But the installation documentation from http://marvinj.org/en/tutorials/getting_started_ionic.html doesnt work, or is not 100% understandable.

1. I downloaded the marvinj-1.0.js raw file as .js file and put it into my app directory "my-app/marvin.js"
2. Then I ran the command "npm install marvin --save"
3. Then I imported MarvinImage in the service which should use the library import '..services/my-service.service.ts'

import { MarvinImage } from "marvin.js";
import { Marvin } from "marvin.js";
....
myFunction(canvas, previewImg){
    var image = new MarvinImage();
    image.load("https://i.imgur.com/4O8VFQY.jpg", function(){
      var imageOut = new MarvinImage(image.getWidth(), image.getHeight());
      Marvin.blackAndWhite(image, imageOut, 10);
      imageOut.draw(canvas);
      previewImg.src = canvas.toDataURL();
      previewImg.onload = () => {
        console.log('IMage FIlter applied')
      }
    });
  }

In the Chrome Developer Console the following statement gets printed: core.js:4352 ERROR TypeError: marvin_js__WEBPACK_IMPORTED_MODULE_1__.MarvinImage is not a constructor

Could you please explain what I did wrong or how to install and use MarvinJ in an Angular CLI project?

Thank you

[gabrielarchanjo]

Hi Silas,

I've never used MarvinJ in an Angular project. I don't know if it can help you in some way, but here is a list of live examples: https://jsfiddle.net/user/leirbag_arc/fiddles/

[JoeMeeks]

@SilasNiewierra @gabrielarchanjo I published a TypeScript compatible version of this library. In short, the MarvinImage class had no constructor but this version does:

https://www.npmjs.com/package/@rarebearsoft/marvinj

tl;dr from readme:

1. run npm i @rarebearsoft/marvinj
2. import like so:

import MarvinImage from '@rarebearsoft/marvinj';

let canvas = document.getElementById("canvas"),
    image = new MarvinImage();

image.load("https://i.imgur.com/4O8VFQY.jpg", () =>{
    image.draw(canvas);
});