Develop Reference

Convert binary / unicode string to image

I am using a library to recieve attachments (image) from salesforce using OAuth and a proxy. Without the library (and the proxy) I am able to the same using XHR, but I have to use the library because I need the proxy.
In chrome debugger I can see image is downloaded fine, but I can't get it to work in my code. Data looks like:
So far methods I have tried:
btoa(unescape(encodeURIComponent(file.body)));- produces a base64 that does not work. decoding it using online tools gives me back the same string.
escape(file.body) - using this as base64 also does not work.
Converting to a blob.
var blob = new Blob([file.body], {type : "image/png"});
urlCreator.createObjectURL(blob);
The url it points to displays nothing, and if I remove {type : "image/png"} the url points to a page displaying same binary string.

Long story short this looks like someone read the image with readAsText() which mangles ("interprets") binary into utf8, instead of utf16. You need to get the server to return the data in arraybuffer or blob format ideally, or even base64, these preserve binary.
Long version with snippet. (those question marks symbols in the snippet show the lost information, compare it to the binary where they are not question marks in utf16):
https://stackoverflow.com/a/56523118/2962797

I would create an <img /> element, equal its src attribute to the image data you received. Now you have the image.
If you want to extract it or convert it to PNG, I would apply this another answer process.

Is file_get_contents in PHP the same as toDataUrl in Javascript?

I want to use an API to compress images. It says the input can as well be a buffer (string with binary), for example:
$sourceData = file_get_contents("unoptimized.jpg");
$resultData = \Tinify\fromBuffer($sourceData)->toBuffer();
In my understanding, they use file_get_contents to create that buffer from a file.
In my case, I already got an canvas image using a React application. To make the API call, I create a data URI, using .toDataURL() looking something like this:
data:image/png;base64,iVBORw0KGgoAAAANSUh... // lots of letters
So can I just use this data URI instead of file_get_contents, because both commands actually do the same in different languages, or is there a difference? Like:
$sourceData = 'data:image/png;base64,iVBORw0KGgoAAAANSUh...'
\Tinify\fromBuffer($sourceData)->toBuffer();
API Reference: https://tinypng.com/developers/reference/php

file_get_contents returns the content of a file as string, and that string exactly represents the content of the file.
.toDataURL() gives you a data url. The data:image/png;base64, part tells that the following data represents a png and that the data is base64 encoded.
To get the same data representation as you get with file_get_content you would need to decode the iVBORw0KGgoAAAANSUh...
So yes, both give you the content of a file, but they don't do that in the same way.
To toBlob on the other hand will return a Buffer containing the data in the same representation as file_get_contents would do.

Assuming you have a PNG file named input.png, the following two pieces of code produce the same result:
Read the image data from the PNG file:
$sourceData = file_get_contents('input.png');
Read the image data from a data: URL generated from the PNG file:
// Generate the 'data:' URL
$url = 'data:image/png;base64,'.base64_encode(file_get_contents('input.png'));
// Read the image data from the 'data:' URL
$sourceData = file_get_contents($url);
The second piece of code works only if fopen wrappers are enabled on the server where the file_get_contents() is executed.
It doesn't make much sense to use the second fragment of code in a single script (because it does a redundant encoding and decoding) but it makes a lot of sense if the encoding and restoring (decoding) happen in different scripts.
They can be part of the same application (the script that encodes the data stores it in the database, the other script loads from the database, restores the image data and uses it) or the decoding could happen in a remote application that sends the data URL over the Internet to be decoded and used by a different application.

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.

Is it possible to return a set of image binaries within a single JSON message to browser?

From the point of view of uploading, we can use MIME multipart to carry multiple files within a single request. I'm wondering if it is possible for a web server returning set of images (binaries) through a single JSON message to the browser at the client side? If so, is it able to be demuxed and rendered by the browser as retrieving multiple images by using tags?
Please advise.
Thanks & regards,
William

You can use base64 to encode the image and included in json. Then use data scheme URI to retrive the image.
More about data scheme URI.
http://en.wikipedia.org/wiki/Data_URI_scheme

How to display 'Base64' encoded image in Adobe AIR application using Javascript/HTML

I'm having some issues while displaying a 'Base64' encoded image in my AIR application.
I'm fetching an image, which is 'Base64' encoded string, in a XML through a web service. At application side I'm able to decode it, but its not been able to display the image on the fly. A little search on Google gave me various result, but not pertaining to my problem, because most of them are related to Flex.
My queries are:
1) After decoding the 'Base64' string, do I need to convert this to a PNG image using some PNG encoder? if so, then how can I use a PNGEncoder in my Adobe AIR HTML/Javascript application. is there any API or so?
2) Since the image I'm fetching from the web server is an icon, I'm setting it as a 'src' value for the element which I'm creating dynamically as follows:
var category_header_img = new Element('img',
{
'id': 'category_header_img' + this.SelectedCategoryID,
'class': 'category_header_img',
'src': 'data:image/png;base64,'+categoryIconBytes,
'cat_id': this.SelectedCategoryID
});
I'd found this solution,
'src': 'data:image/png;base64,'+categoryIconBytes
somewhere which tried to use but it didn't work.(where, categoryIconBytes is the 'Base64' encoded string)
Please, help to solve this issue. I'll be really grateful for any of your suggestions.
Thanks.

The data URL scheme isn't supported in AIR. What was the image before it was base64 encoded? If it is already a PNG, then all you need to do is reverse the base 64 encoding and save it locally to a temporary file. You should then be able to load it with an image tag.