Need help with image processing

Easel App Development
1

Hi guys,
I’m currently developing an easel app where I have to get the pixel-data from an uploaded image. My problem is, that all common ways to get this are not working, because easel apps run as a web worker and this way have no access to the DOM.

The image vectorization app therefor runs an AWS Lamda function, but I have no experience with this and an AWS Lamda account does cost.

Does anyone know a solution for this?

Also I Thought that it might be helpful to integrate some image functions like getting the pixel-data into the app-development api, because I think I am not the only one that gets to this problem when trying to work with images in an easel-app.

2

I haven’t played with the easel API yet, but maybe this?

3

Try using something like this

//
// gets the file contents from the server after it has been uploaded
//
function loadFile(fileName) {
//console.log(fileName);
var xhr = new XMLHttpRequest(); // to get the file after it has uploaded
xhr.open(‘GET’, fileName, true);

xhr.onload = function(e) {
if (this.status == 200) {

    var str = this.responseText;
    processTextStringToSVG(str);
   }

};

xhr.send();

}

// Define an executor function that generates a valid SVG document string,
// and passes it to the provided success callback, or invokes the failure
// callback if unable to do so
var executor = function(args, success, failure) {
  var params = args[0];
  var selectedVolumes = args[1];
  successFunction=success;
  failureFunction=failure;
  
  var fileName;
  
  if ( typeof params["Offset File"] != 'undefined' ) 
   {
    fileName= params["Offset File"];
  
    if (fileName.length > 0 )
     {
      loadFile(fileName);
     }
   }

};

notice I cache the success and failure functions for use later.

I too had the issue with AWS etc, but then realised they were probably just running a program on the server that did the image processing, rather than running it on the web client.

Also realise that the data returned by the responseText would be a jpg file, not uncompressed image data etc, you’ll have to deal with getting it uncompressed etc.

4

Hi,
Without access to the DOM, there’s no way to take advantage of the browser capabilities to process an image and grab pixel data.

HOWEVER:
This past weekend, I began working on an Easel-app to create a halftone carve of an image using pixel data - and I have found a library (on GIT hub) which with a little modification, can decode a PNG in the Easel-app.

After a day of tinkering, I can successfully get all of the PNG properties as well as the pixel-array and create volumes representing different size holes.

Unfortunately, it ends up making thousand of volumes to represent the image. And although, it displays properly in the app, it crashes Easel because of the the huge number of volumes…

Now I’m looking for another good use to put to the PNG library.

Let me know if you are interested in the PNG decoder - I’ll be glad to let you in on what I’ve done.