Need an example for the postMessage API

[titlestad]

Hey!

The documentation for the postMessage API is very minimal. I've been trying to use it to push binary data to load an image, but haven't been successful.

I'd appreciate an example that loads the binary data of a JPEG and then loads it in an iframe using this new API. Is this possible?

[photopea]

I think the postMessage API is very simple and there is no need for any deeper explanation.

Can you show us what you have so far? Maybe the problem is in something different than you think.

[titlestad]

As I understood it from the latest communication here, I was just to send the ArrayBuffer.
I take the binary data and just push it.

I get nothing back from onMessage with an error message.

The iframe which holds Photopea is referenced in the "pea" variable.

var ext = msg.Filename.split( '.' );
ext = ext.pop();

if( msg.Path.indexOf( '.' ) > 0 )
{
var p = msg.Path;
var f = new File( p );
f.onLoad = function( data )
{
var ab = new ArrayBuffer( data );
pea.postMessage( ab.buffer, '*' );
}
f.load();
}

[titlestad]

Could be my binary data is erroneous, but I don't get a message back or console log that tells me what is happening.

[photopea]

are you sure the onLoad function is executed? What exactly new ArrayBuffer(data) means? You have to learn Typed Arrays e.g. here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays

[photopea]

And ArrayBuffer has no property ".buffer" ... do you really see no errors in the console? Maybe because onLoad function is never executed.

[titlestad]

Onload is executed, for sure - I've tested that. I've tried pushing the ab object directly too, and I've tried pushing the data directly, and other combinations - that's why I'd like to see a working example. I can't from only the docs see how this should be performed.

[photopea]

I am not familiar with the File object. What exactly the "data" parameter is in onLoad? I load everything with XmlHttpRequest.

This is not related to Photopea at all. I have to teach you, how to load files as ArrayBuffers in Javascript :D

[photopea]

BTW. when I call new File(string), I see an error: Failed to construct 'File': 2 arguments required, but only 1 present.

What kind of Javascript are you using?

[titlestad]

We have our own framework - I think this is kind of the thing I'm looking for; a working example. I will give it another try - but if I had a working example, it would be easier to reverse engineer.

[titlestad]

Only thing I get back while testing is:

Uncaught TypeError: H.data.charAt is not a function
at Mw. (pp.js:6323)
(anonymous) @ pp.js:6323
pp.js:37 Uncaught TypeError: s.data.charAt is not a function
at MJ.mX (pp.js:37)

[titlestad]

Just getting this: Uncaught TypeError: H.data.charAt is not a function
at Mw. (pp.js:6323)
(anonymous) @ pp.js:6323
pp.js:37 Uncaught TypeError: s.data.charAt is not a function
at MJ.mX (pp.js:37)

Shouldn't I get a message like: The binary data is not in the right format - or something like that?

[photopea]

Ok I added another demo to https://www.photopea.com/api/live . It shows how to load a JPEG as ArrayBuffer and send it to Photopea. Hope it helps! Let me know if you still have any problems.

[titlestad]

Hey! Before closing, I see in your example that the file comes up as file.psd - any chance of supplying a filename? Way to go by the way! Highly appreciated!

[photopea]

Photopea converts each file that you open into PSD, and then from PSD to any other format, as you save it. If a user adds new layers, text layers, adjustment layers ... the name "file.jpg" in the top would make no sense (JPG can have just one layer).

We can still discuss it even after I close it :)