Use in ChromeWorker

[Noitidart]

I was thinking of using this in ChromeWorker for firefox addon. My needs were very basic, I am XHR'ing a file in, its either png, jpeg, or tiff, maybe gif but probably not.

But after loading I need to get the byte data/imagedata.

Then with imagedata's of multiple files i need to:

• get height/width
• overlap some at various x/y within a base imagedata
• scale up/down some
• save as png

It seems this can handle all of that, but it has tons of other stuff which is awesome. But basically, i couldn't find how to pass in arraybuffer of png/jpeg/tiff and get back bytedata, is it possible with this?

Thanks

[manuels]

Well, did you checkout this file: https://github.com/manuels/unix-toolbox.js-imagemagick/blob/master/demo/test.html

[Noitidart]

Wow thanks so much for the fast reply! I did but I was super intimidated by the tons of files. I can't simply copy in interface.js, im not sure what all i have to copy and paste, is there some documentation on this stuff, im new to imagemagick :P

[Noitidart]

So I dropped it in, and it loaded without errors, but when i try to run the exxample code it throws:

TypeError: FS.root.contents[pseudo_name] is undefined convert-worker.js:49:0

This is the line getting the error var array = FS.root.contents[pseudo_name].contents;

These are the files I dropped into my addon:Noitidart/Icon-Container-Generator@d84bbb7

modules/unixToolbox/config/coder.xml
+122 −0 
modules/unixToolbox/config/delegates.xml
+1,592 −0 
modules/unixToolbox/config/english.xml
+47 −0 
modules/unixToolbox/config/locale.xml
+23 −0 
modules/unixToolbox/config/magic.xml
+59 −0 
modules/unixToolbox/config/policy.xml
+506,530 −0 
modules/unixToolbox/convert-worker.js
+230 −0 
modules/unixToolbox/interface.js

I had to modify interface.js so it loaded into my ChromeWorker global instead of worker:

So I unwrapped the anon: https://github.com/Noitidart/Icon-Container-Generator/blob/d84bbb719f1ae3fb2c81268705d1244b311d3e47/modules/unixToolbox/interface.js#L1

Then call it here:
https://github.com/Noitidart/Icon-Container-Generator/blob/d84bbb719f1ae3fb2c81268705d1244b311d3e47/modules/workers/ICGenWorker.js#L26-L28

I can import convert-worker fine too, on the lines below that. But the sample code throws:

https://github.com/Noitidart/Icon-Container-Generator/blob/d84bbb719f1ae3fb2c81268705d1244b311d3e47/modules/workers/ICGenWorker.js#L41-L47

the addUrl's dont thow

[Noitidart]

A user just reached out to me and gave me a great idea. I made this addon to take a screenshot of all monitors using native api's for all os's: https://addons.mozilla.org/en-US/firefox/addon/nativeshot/

he wants to extend that to a screen recorder. so for that what i need to do is diff two screenshots, and whatever is the same i need to delete it from the second. does imagemagick js have something that can like diff and keep only the differences in second file? its not hard to do i can just do the byte array comparison but because yours is asm.js i think it would be way way way faster.

thanks so much if you can help me get this working i can get this into the hands of a lot of people. with working examples in firefox addons and apps.

i also do a bunch of documentation so would love to doc this stuff.

[manuels]

You are passing the image url directly to convert.
Instead, you must execute a addUrl for it to add it to the 'virtual filesystem' and then invoke convert.run on that path in the virtual filesystem.
For more on comparing images with ImageMagick, checkout this page: http://www.imagemagick.org/Usage/compare/

[Noitidart]

Thanks checking right away!

[Noitidart]

I updated it:

https://github.com/Noitidart/Icon-Container-Generator/blob/trying-unixToolbox/modules/workers/ICGenWorker.js#L41

Im getting these errors now:

: NS_ERROR_UNKNOWN_PROTOCOL: convert-worker.js:30:0

[manuels]

change

 convert.run('-rotate', '90', OS.Path.join(OS.Constants.Path.desktopDir, 'Image-Box-64.png'), OS.Path.join(OS.Constants.Path.desktopDir, 'Image-Box-64-rot90.jpeg')).then(function() {

to

 convert.run('-rotate', '90', '/Image-Box-64.png', '/Image-Box-64-rot90.jpeg').then(function() {

[Noitidart]

Thanks man! I tried it but same thing :(
https://github.com/Noitidart/Icon-Container-Generator/blob/trying-unixToolbox/modules/workers/ICGenWorker.js#L44

: unreachable code after return statement convert-worker.js:36113:10
: NS_ERROR_UNKNOWN_PROTOCOL: convert-worker.js:30:0

I even tried adding a slash in front of the image in the getFile:

convert.getFile('Image-Box-64-rot90.jpeg').then(function(real_contents) {

to

convert.getFile('/Image-Box-64-rot90.jpeg').then(function(real_contents) {

didnt fix it :(

[manuels]

If the error is in this line, then probably this line is actually the problem (which is invoked by addUrl).
Are you sure you can run an XHR on an OS.Path.join(OS.Constants.Path.desktopDir, ...) URL?

[Noitidart]

Ahhh you know what, in ChromeWorker, xhr to local files returns a status of 0, which is failure code for non-http: http://stackoverflow.com/questions/25585359/how-to-xhr-local-files/25585841#25585841

I also think I might need to make the path a file uri before xhr'ing.

[Noitidart]

Holy hell!! It works!! it output this text file:

https://github.com/Noitidart/Icon-Container-Generator/blob/trying-unixToolbox/modules/workers/ICGenWorker.js#L41

data:image/jpeg;base64,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

Can you please point me in the direction of the docs, i want to see how i can write this with just OS.File.writeAtomic, as I was able to that in places like here:

http://stackoverflow.com/questions/25585359/how-to-xhr-local-files/25585841#25585841

With simply: var promised = OS.File.writeAtomic(file, new Uint8Array(data));

[Noitidart]

I was trying to write my own function like getFile, but I was trying to do getFileArrBuf but it seems all postMessage as JSON.stringify'ed is this true? is there anyway that I can transfer the byte array? As documented here on mdn: https://developer.mozilla.org/en-US/docs/Web/API/Worker/postMessage#Transfer_Example

[Noitidart]

This is my attempt to add a getFileArrBuff function: Noitidart/Icon-Container-Generator@d12f5e5

Still working on it, if you can help i would sooo appreciate it, my biggest goal is to try to get it to transfer the byte array rather then JSON serializing it, as transfering byte array is super good for memory.

[Noitidart]

Ok veryyy interesting, I think i got the arrbuf transfering, please see:

Noitidart/Icon-Container-Generator@9855dd4

However when I write conver the file to .png or to .jpeg i dont see a difference in the written file:
https://github.com/Noitidart/Icon-Container-Generator/blob/9855dd40fbc3b90ffb672c25d14dfdce2b14a806/modules/workers/ICGenWorker.js#L43-L46

i currently do:

  convert.allDone().then(function() {
    convert.run('-rotate', '90', '/Image-Box-64.png', '/Image-Box-64-rot90.png').then(function() {
      convert.getFileArrBuf('Image-Box-64-rot90.png').then(function(real_contents) {
          OS.File.writeAtomic(OS.Path.join(OS.Constants.Path.desktopDir, 'Image-Box-64-TAT.png'), new Uint8Array(real_contents.buf), { tmpPath: OS.Path.join(OS.Constants.Path.desktopDir, 'Image-Box-64-rot-jpeg.txt.tmp') });
      });

but if i change the occourances of Image-Box-64-rot90.png to Image-Box-64-rot90.jpeg and also the writeAtomic to .jpeg i see no difference in file size at all. Is it really a different file type? the chunked data shows PNG at the start no matter if its .jpeg or .png:

this is where i console.logged:

  convert.allDone().then(function() {
    convert.run('-rotate', '90', '/Image-Box-64.png', '/Image-Box-64-rot90.png').then(function() {
      convert.getFile('Image-Box-64-rot90.png').then(function(real_contents) {
          console.log('real_contents:', real_contents);
          OS.File.writeAtomic(OS.Path.join(OS.Constants.Path.desktopDir, 'Image-Box-64-TAT.png'), new Uint8Array(real_contents.buf), { tmpPath: OS.Path.join(OS.Constants.Path.desktopDir, 'Image-Box-64-rot-jpeg.txt.tmp') });
      });

[Noitidart]

Man so I'm shifting to production style: Noitidart/Icon-Container-Generator@f8fd62a

I do the on load here:

https://github.com/Noitidart/Icon-Container-Generator/blob/trying-unixToolbox/modules/workers/ICGenWorker.js#L96-L112

That triggers the allDone() correctly.

Then in my function later on:

allDone() is never triggering:

https://github.com/Noitidart/Icon-Container-Generator/blob/trying-unixToolbox/modules/workers/ICGenWorker.js#L208-L233

It did a

 gConvert.addUrl("file:///C:/Users/Vayeate/Desktop/disk.png", "/base0")

And I was hoping that allDone() would fire

Also is there somehwere to learn the syntax, like im not sure how to do identify width height, scale and overlap, im not sure what arguments to use etc.

[Noitidart]

I seem to get the allDone() to work. Every time in the allDone() what I am doing is doing gConvert.promises = [];

not sure if tahts the right thing to do.

Also is there a an opposite to addURL/addData like removeByPsuedoName?

Also its ok that i dont give my pseudoName's an extension right?

[Noitidart]

I also don't understand this pseudoName business

 gConvert.addUrl('myFilePathHere', '/', 'badge' + i);

I thought the 2nd arg was the path to the pseudoDirectory, and then final is the pseudoName? this way doesnt seem to work. are there any docs on this?

I also can't figure out how to use identify to get the file types and if image or not, and if image the height/width. Man sorry about this im real excited to use this but cant get it working with docs :(

This is what i tried:

gConvert.addUrl('file:///C:/Users/Vayeate/Desktop/disk.png', '/base0');

gConvert.allDone().then(function() {
        gConvert.run('-identify', 'base0').then(function() {
            console.error('args:', JSON.stringify(arguments));
        });
});

It tells me:

Magick: no images defined `/base0' @ error/convert.c/ConvertImageCommand/3066.

I also tried with full path:

Magick: no images defined `file:///C:/Users/Vayeate/Desktop/disk.png' @ error/convert.c/ConvertImageCommand/3066.

[Noitidart]

So this is my thoughts, because my need is to load an array of images then:

1. goal is to make output of png's square sizes: [x, y, z]
2. figure out the width and height of loaded images (use identify)
3. choose best image closest to x y z and scale them (use convert)
4. overlay a badge on these images (use composite)

so does this mean i have to put in identify-worker, convert-worker, and composite-worker? and then add the same urls to each one of them? is there anyway to just addUrl to a single one of them so i dont have to load them again in the other two?

Here is a screencast of what I am doing on the main thread right now: I want to move it into a worker: Youtube :: Icon Container Generator

[Noitidart]

Hey @manuels forgive the bother, but if you are not available to chat this much is there a community/forum or something where I can chat to the users about this? I was looking for the best way to use these 3 workers as a single worker, without adding them all as then im up to 60mb, or maybe if theres a way to minify to remove the functions I dont use (overlap, scale, size)?

[manuels]

maybe, gzipping the files is an option?