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 ?