Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

root.Image is not a constructor #21

Closed
Inventsable opened this issue Dec 15, 2019 · 4 comments
Closed

root.Image is not a constructor #21

Inventsable opened this issue Dec 15, 2019 · 4 comments

Comments

@Inventsable
Copy link

@Inventsable Inventsable commented Dec 15, 2019

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

This comment has been minimized.

Copy link
Owner

@khrome khrome commented Dec 15, 2019

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

This comment has been minimized.

Copy link
Author

@Inventsable Inventsable commented Dec 15, 2019

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

This comment has been minimized.

Copy link
Owner

@khrome khrome commented Dec 17, 2019

a demo repo would help.

@khrome

This comment has been minimized.

Copy link
Owner

@khrome khrome commented Jan 7, 2020

please reopen if you continue work on this.

@khrome khrome closed this Jan 7, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants
You can’t perform that action at this time.