root.Image is not a constructor

[Inventsable]

Hello, I'd love to create a panel for Adobe Illustrator and Photoshop which uses this module internally, and in following the code found in image-core:

var Image = require('ascii-art-image');
 
var image = new Image({
    filepath: '~/Images/metropolis.jpg',
    alphabet:'variant4'
});
 
image.write(function(err, rendered){
    console.log(rendered);
})

Like so:

// within a Vue component's methods
    generateAscii(path) {
      let Image = require("ascii-art-image");
      let image = new Image({
        filepath: path,
        alphabet: "variant4"
      });

      image.write((err, rendered) => {
        console.log(rendered);
      });
    }

Or:

    generateAscii(path) {
      let ascii = require("ascii-art");
      let image = ascii.Image({
        filepath: path,
        alphabet: "variant4"
      });
    }

I get an error claiming root.Image is not a constructor:

webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:1887 TypeError: root.Image is not a constructor
    at imgLoadBrowser (webpack-internal:///./node_modules/ascii-art-image/image.js:3:19)
    at new AsciiArt.Image (webpack-internal:///./node_modules/ascii-art-image/image.js:82:13)
    at generateAscii$ (webpack-internal:///./node_modules/babel-loader/lib/index.js?!./node_modules/@quasar/app/lib/webpack/loader.auto-import.js?kebab!./node_modules/vue-loader/lib/index.js?!./src/pages/Index.vue?vue&type=script&lang=js&:126:23)
    at tryCatch (webpack-internal:///./node_modules/regenerator-runtime/runtime.js:45:40)
    at Generator.invoke [as _invoke] (webpack-internal:///./node_modules/regenerator-runtime/runtime.js:271:22)
    at Generator.prototype.(anonymous function) [as next] (webpack-internal:///./node_modules/regenerator-runtime/runtime.js:97:21)
    at tryCatch (webpack-internal:///./node_modules/regenerator-runtime/runtime.js:45:40)
    at invoke (webpack-internal:///./node_modules/regenerator-runtime/runtime.js:135:20)
    at eval (webpack-internal:///./node_modules/regenerator-runtime/runtime.js:170:11)
    at new Promise (<anonymous>)

I've tried making sure to install canvas and reinstall both ascii-art or ascii-art-image, but am unsure of what to do here. Can the documentation be updated or I be corrected on how to do this?

[khrome]

seems like the bundler is attempting to load root.Image first thing: run ./node_modules/mocha/bin/mocha from the root. If this is successful, the library works, but there is an issue with your bundler configuration. (I have not used it in Vue, but have used it with webpack)

The error is on this line: https://github.com/khrome/ascii-art-image/blob/master/image.js#L19

and in that context it expects root to be window from the passing of this at the root context

https://github.com/khrome/ascii-art-image/blob/master/image.js#L61

seems like your loader is recontexting the loading block so that this is something else than window

Please report back

Thanks!

[Inventsable]

Thanks for the prompt reply!

I'm not too experienced so I assumed you meant to run node ./node_modules/mocha/bin/mocha, but in looking I didn't have ./node_modules/mocha at all so I installed it via npm but in using node ./node_modules/mocha/bin/mocha I get this:

Error: No test files found: "test"

My setup is using Quasar-CLI which internally uses Webpack, and is something of a wrapper for merging Vue and Webpack as an alternative to Vue-CLI, though I'm able to manually configure Webpack in any way I'd need. I'm unsure if I missed an install step somewhere here, and with your mention of this -- within a .vue file, the scope of this is referring to the Vue component itself but I'm unsure if that's relevant here?

I can provide a demo repo for you with this setup on request, let me know if I can do anything else! I'd really love to put this kind of functionality inside of Adobe apps and allow graphic designers/illustrators to instantly convert their art to ASCII.

[khrome]

a demo repo would help.

[khrome]

please reopen if you continue work on this.