Array of Bytes to an URL encoded in JavaScript for ImageJ - javascript

I need too convert my array of bytes (an image) to an URL encoded so it can be interpreted by my distant server then after treatment, will re-encode it and send back to the user.
This is for setting up a server (cloud) on which the hosted model of deep Learning will get the image treated by the user (using FiJi (imageJ) at laboratories). it will remove noises (Poisson and Gaussian) and user will receive his stack directly from server, avoiding them to install heavy stuff on their computer.
importClass(Packages.ij.IJ);
importClass(java.awt.image.BufferedImage);
importClass(java.io.ByteArrayOutputStream);
importClass(java.io.File);
importClass(javax.imageio.ImageIO);
importClass(java.util.Base64);
importClass(java.lang.StringBuffer);
imp = IJ.getImage();
var buffered = imp.getBufferedImage();
imp.draw();
imp.getCurrentSlice();
baos = new ByteArrayOutputStream();
ImageIO.write( buffered, "jpg", baos );
baos.flush();
imageInByte = baos.toByteArray();
baos.close();
IJ.log(imageInByte[18751]);
So at the moment (i'm kind of new with JS So sorry about the "IJ.log(imageInByte[])" line because it was the only way to see if my bytes encoding was working correcly.
I'm now struggling to find a way to have this "imageInByte" converted to an URL so my next step will be to setup the server so he can get this URL, decode it, having the 8-bit image, do his job to remove noises on the picture (microscopes stacks) , recode it into bytes then URL and resend it to the Customer via ImageJ Plugin and enjoy the clean image without installing the whole model on localhost ...
I have no idea how to proceed since everything I found are pure Java or Web programming and i'm writing a FiJi script
(excuse my lvl I'm not enough familiar for passing from a language to another since i've found solutions but for unsimilar problems and for PLSQL or C++)
I'd usually go with "btoa" then "atob" but my fiji console return me "not defined" i've imported many buffering class but it wont be "defined" for it...
Edit : alternate solution would be to get the same code (i don't know how to import these java libraries as Jython) so I can have same result (bytes array of the image) and making it an encoded URL seems much more easy in Python so i'll be open to any help about translating this into python too !

So after realizing things are getting harder with JS, I swapped my code to python (was easy thanks to Jython env)
I went further in my problem so I'll post in python
answer : it's impossible to convert a byte of array to an URL encoded or with a toString in JS.
thanks again for your precious help.

Related

Passing Value from C++ to Javascript

i have a c++ file which reads values from a sensor and I want to display those values on a website dynamically. So Im looking for a way to pass these values(integers) from my cpp file to an javascript which displays them on the site.
My first, simple try was to write the values into a js file as variables every second from my cpp script. The Js then uses this file as a source and displays its variables on the site:
cpp:
fprintf(file, "var mx=%d, my=%d, mz=%d, ax=%d, ay=%d, az=%d, gx=%d, gy=%d, gz=%d;\n",
imu.raw_m[0], imu.raw_m[1], imu.raw_m[2], // M = Magnetometer
imu.raw_a[0], imu.raw_a[1], imu.raw_a[2], // A = Accelerometer
imu.raw_g[0], imu.raw_g[1], imu.raw_g[2] // G = Gyroscope
);
html/js:
<script src="./imu.js" type="text/javascript"></script>
The Problem now is of course, that I need to refresh the page all the time, because the imu.js file is cached by the website.
I'd rather have a way to directly pass to integers from the cpp file to the js script. I read something about json or Googles V8 script. But I'd like to hear your suggestions first.
By the way, Im running this on a raspi, if this is important.
Thanks for your help
EDIT:
I'm goning to try it with a mysql database, in which my cpp file writes the data from the sensor with Connector/c++ from http://dev.mysql.com/doc/connector-cpp/en/ and my website reads them.
You could compile your C++ code into a Node.js plugin, you can then register a JavaScript function with your plugin which the C++ calls when it updates the value. That way you can pass values directly from C++ into Javascript in a managed and controlled way.
Node.js has the added benefit of being able to host your webpage and do all the Websocket and HTTP stuff that can be a pain in C++.
You do not have to refresh if your script is smart about how to access the data file! In case you do have a webserver at hand: Take care that your data file is accessible by your webserver and then let your script request the file via ajax (link to w3schools)
I'm doing something similar on a BeagleBone Black. With websocketd you can turn pretty much any program into a websocket endpoint and then send data via stdin and stdout commands. This would be a particularly good solution for you since websockets are designed to handle information that's constantly changing.

Encode/Decode a picture in Hex

A client (a job board) has asked me to do the following :
Create a form, gather informations and create an xml file containing all those informations everytime a user fills out the form, easy enough.
So the client sent me an xml model and within this xml file there is an encoded picture and an encoded CV, both are encoded (it seems in HEX), and i cannot understand how to decode (or even encode under the same format for that matter) the piece of HEX.
Here are pieces of the xml fiel, I cannot post it entirely, you'll surely understand why.
<photo>
FFD8FFE10A1845786966000049492A000800000008000F010200040000004854430010010200150000006E0000001201030001000000010[.............]EF6A57F5A8E41EE594D62075FF8F77CFF00B1FF00D7A7C17D13B7FA99157FE0269C60E22E4D4DAB38A09E24788F5FF80D5B5B5FEE9ACE32E518AB6DFEDAD1F653FC2D57700FB23FFB1F9D5DB64289B4
</photo>
<cv>
255044462D312E340D0A25C8C9CACB0D0A372030206F626A0D0A3C3C2F54797065202F506167652F506172656E742033203020522F436F6E74656E74.......
</cv>
<extensionCv>.pdf</extensionCv>
And just to make it harder here are several points to take into consideration :
This file is to be used to import informations into a software which has been developed especially for this company, I do not have access to it, and cannot get in touch with the company that designed it. The xml file has been created by this software as an export of a candidat file.
I cannot encode it in base64 (it'd be too easy), it needs to be the same encoding.
I need to be able to encode it in either js, or php (once im sure the software can decode if, i'll only need to encode, I won't need to decode anything).
Thank you.
You can use bin2hex PHP function to convert binary data into HEX string. Please check PHP documentation where you can find an example of bin2hex with reading a binary file

Fetching zipped text file and unzipping in client browsers, feasible in Javascript?

I am developing a web page containing Javascript. This js uses static string data (about 1-2 MB) which is stored in a flat file. I could compress it with gzip or any other algorithm to reduce the transfer load.
Would it be possible to fetch this binary file with Ajax and decompress it into a string (which I could split later) in the client browser. If yes, how can I achieve this? Does anyone have a code example?
And another library or site is this one, although it has few examples it has some thorough test cases that can be seen.
https://github.com/imaya/zlib.js
Here are some of the complex test cases
https://github.com/imaya/zlib.js/blob/master/test/browser-test.js
https://github.com/imaya/zlib.js/blob/master/test/browser-plain-test.js
The code example seems very compact. Just these two lines of code...
// compressed = Array.<number> or Uint8Array
var gunzip = new Zlib.Gunzip(compressed);
var plain = gunzip.decompress();
If you look here https://github.com/imaya/zlib.js/blob/master/bin/gunzip.min.js you see they have the packed js file you will need to include. You might need to include one or two of the others in https://github.com/imaya/zlib.js/blob/master/bin.
In any event get those files into your page and then feed the GUnzip objects your pre-gzipped data from the server and then it will be as expected.
You will need to download the data and get it into an array yourself using other functions. I do not think they include that support.
So try these examples of download from https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/Sending_and_Receiving_Binary_Data
function load_binary_resource(url) {
var req = new XMLHttpRequest();
req.open('GET', url, false);
req.overrideMimeType('text\/plain; charset=x-user-defined');
req.send(null);
if (req.status != 200) return '';
return req.responseText;
}
// Each byte is now encoded in a 2 byte string character. Just AND it with 0xFF to get the actual byte and then feed that to GUnzip...
var filestream = load_binary_resource(url);
var abyte = filestream.charCodeAt(x) & 0xff; // throw away high-order byte (f7)
=====================================
Also there is Node.js
Question is similar to
Simplest way to download and unzip files in Node.js cross-platform?
There is this example code at nodejs documentation. I do not know how much more specific it gets than that...
http://nodejs.org/api/zlib.html
Just enable the Gzip compression on your Apache and everything will be automatically done.
Probably you will have to store the string in a .js file as a json and enable gzip for js mime type.
I remember that I used js-deflate for off-linne JS app with large databases (needed due to limitations of local storage) and worked perfectly. It depends on js-base64.

javascript sendfile binary data to web service

At work we are trying to upload files from a web page to a web service using html 5/javascript in the browser end and C# in the web service. But have some trouble with encoding of some sort.
As for the javascript we get the file's binary data with help from a FileReader.
var file = ... // gets the file from an input
var fileReader = new FileReader();
fileReader.onload = dataRecieved;
fileReader.readAsBinaryString(file);
function dataRecieved() {
// Here we do a normal jquery ajax post with the file data (fileReader.result).
}
Wy we are posting the data manually and not with help from XmlHttpRequest (or similar) is for easier overall posting to our web service from different parts of the web page (it's wrapped in a function). But that doesn't seem to be the problem.
The code in the Web Service looks like this
[WebMethod]
public string SaveFileValueFieldValue(string value)
{
System.Text.UnicodeEncoding encoder = new UnicodeEncoding();
byte[] bytes = encoder.GetBytes(value);
// Saves file from bytes here...
}
All works well, and the data seems to be normal, but when trying to open a file (an image as example) it cannot be opened. Very basic text files seems to turn out okay. But if I upload a "binary" file like an image and then open both the original and the uploaded version in a normal text editor as notepad to see what differs, it seems to be wrong with only a few "invisible" characters and something that displays as a new line a few bytes in from from the start.
So basicly, the file seems to encode just a few bytes wrong somewhere in the conversions.
I've also tried to create an int array in javascript from the data, and then again transformed to a byte[] in the web service, with the exact same problem. If I try to convert with anything else than unicode (like UTF-8), the data turns out completly different from the original, so I think om on the right track here, but with something slightly wrong.
The request itself is text, so binary data is lost if you send the wrong enc-type.
What you can do is encode the binary to base64 and decode it on the other side.
To change the enc-type to multi-part/mixed and set boundaries (just like an e-mail or something) you'd have to assemble the request yourself.

Write non ASCII char with PhoneGap Javascript Image

Here is what I'm doing :
In javascript I ask for an image with AJAX.
The server php execute the following code :
readfile($pathfile);
Then the javascript receive the data, and with Phonegap I try to write it to a file :
var writer = new FileWriter();
writer.fileName = "./../Documents/" + nameFile;
writer.write(dataReceived);
In fact, it works with ASCII chars, but the function "write" fail with the content of the image received (png format). So I tried to encode the transferred data in Base64, in Hexadécimal and it works. But I don't want to store encoded data because I want to use it later in "img" tags (html tag). And make something like :
<img src='./../Documents/createdFile.png' />
Do you have any idea on how to write any characters in Phonegap to a file? Or what I'm doing wrong with the FileWriter of PhoneGap ? I know the way to do something like src='Image.php', but I have to store files on the device.
I've got the version 0.9x of Phonegap (included with Dreamweaver). Thanks in advance.
I finally found the explication. To begin I want to say that I just learned javascript ;) .So I asked the question to "macdonst" on github and he answered me :
"Sadly, you will be unable to write binary data with the FileWriter. JavaScript can't handle binary data very well and we can't pass binary data from the JavaScript side to the Native side so it is a limitation we have to live with.
However, once you've written you've gotten your base64 image data you can display it like this:
<img src="data:image/gif;base64,{this is where your base64 data goes}" />
"
Thanks to "macdonst", I posted his answer because I hope it will help beginners like me.

Categories

Resources