Png-Dom-Object in NodeJS Mode

[bunterWolf]

I would like to create a png preview of an psd in an Electron App.

But with toPng() I get this Object which isn't mountable to the DOM instead of a Browser Image Object :

If I unterstand it right, psd.js runs in NodeJS mode because Electron has NodeJS build in the Browser/Renderer too. Which isn't the normal use case of node.
I tried to load psd.js with requirejs, but that didn't change anything.

var requirejs = require('requirejs');
var PSD = requirejs('psd');

PSD.fromURL("/path/to/file.psd").then(function(psd) { 
  document.getElementById('ImageContainer').appendChild(psd.image.toPng());
});

The Usage - "NodeJS Example" works fine, the "Browser Example" don't

Can I load psd.js in Browser mode or get the Png Image Object somehow?

Thanks a lot!

[meltingice]

Ah yeah, so the compile step was designed such that the file at dist/psd.js includes the browser shims that replace the NodeJS equivalents. If you require lib/psd.js directly, you won't get these as that was intended for the NodeJS environment.

If you load dist/psd.js in the browser instead, you should get an <img> object back instead of the PNG object. Let me know if that doesn't make sense.

[bunterWolf]

ok I tried that, but I think I need little bit more help.. :)

What I did now:

git clone psd.js
npm i
cake compile

than I get the dist/psd.js
But when I require that, I get only an empty object. :(

[meltingice]

You shouldn't need to compile it yourself, there is already a built version in the dist folder. Are you saying that when you do var PSD = require('psd');, the PSD object is just a plain object or something?

[bunterWolf]

Oh yeah right, the github version has the dist folder already, the npm module don't.
I should look closer.. :)

var PSD = require('../../../../library/psd.js/dist/psd.js');
console.log(PSD) = {}
(i tried to require that with requirejs / node / es6)

[meltingice]

Maybe I'm a little confused on how this works inside an Electron environment. As long as the psd.js script is loaded on the page, you should be able to do var PSD = require('psd'); without having to put in the actual require path, since it's a Browserify compiled library.

[bunterWolf]

Well im confused too, about the different require and build possibilities in js.. :D

I'm not sure what you mean with:

As long as the psd.js script is loaded on the page

a script src tag?

npm i psd & PSD = require('psd')
Works, but only in NodeJS environment mode without the < img > object i need.

to load dist/psd.js I need to clone psdjs from github because the npm package does not include the dist folder.
And i have to write the full path, to be sure that file is loaded and not what is specified by the package.json

Is no Browserify a problem?

Electron is just a Chrome-Browser where you can use NodeJS in everywhere.
With Node require (which works the same as browserify require I think) and ES2015 is there no need to use Browserify or something similar.

[bunterWolf]

I found the browser example.. now I know what you mean.. :)
Thank you very much!
https://github.com/meltingice/psd.js/blob/master/examples/browser/image.html

The dist/psd.js defines require by itself:
https://github.com/meltingice/psd.js/blob/master/dist/psd.js#L1
Which is overwritten by the NodeJS require

when I load dist/psd.js by a script tag and change
require=(function e(t,n,.........
to
foo=(function e(t,n,......

and than use:
var PSD = foo('psd');
everything works fine.

But I don't understand why there ist this require = and not a module.export = or something similar ;)

[meltingice]

The require is added by Browserify, but I'm honestly not up to date enough with the latest JS module loaders to know what a good solution here would be.

[HaiNV266]

Hi @bunterWolf
Can you help me implement psd.js on browser, pls ? I tried Browserify but it didn't work ?