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.
Related
I am working on an application that was created by a colleague that is no longer with the company. I am trying to open what I believe is a PDF in blob file format, but none of the tutorials is giving me the expected result.
I notice that I have some data preceding what I believe to be the blob file, leading me to wonder if I am understanding what I am working with correctly. The whole blob is too large to post here, but this is how it starts:
data:application/pdf;base64,JVBERi0xLjcNJeLjz9MNCjIxIDAgb2JqDTw8L0xpbmVhcml6ZWQgMS9MIDQyMTExNC9PIDIzL0UgMzc0MzIwL04gMi9UIDQyMDU3NC9IIFsgMjYxNiA0NDhdPj4NZW5kb2JqDSAgICAgICAgICAg
In the posts and tutorials I am reading, like this one for instance, they use code similar to this:
var file = new Blob([response], {type: 'application/pdf'});
Since my blob file includes the "application/pdf" portion as part of the string, I am starting to wonder if I misunderstood and that this is another kind of file instead of a blob. I have also seen other examples of blob files, and they also do not include the "data:application/pdf;base64,".
I am having issues opening the files in a browser if they are too large. I have outlined my problem in this post, but have yet to receive any advice, so I am trying to find a different way to approach this. The results are not as expected, which leads me to wonder if I am looking for the right thing.
Here is what I have tried and what the result is:
var file = new Blob([upload.split(',')[upload.split(',').length - 1]], { type: 'application/pdf' });
var fileURL = URL.createObjectURL(file);
I remove the "data:application/pdf;base64," portion of the string using "[upload.split(',')[upload.split(',').length - 1]]", thinking that this will leave me with only the blob data, but this invariably fails to open, giving me the below result:
So my question is this: Am I working with a blob file or not? If not, what kind of data file is this so I can start looking for more relevant tutorials?
"Blob files" aren't really a thing. You can think of the term "blob" as "just some binary data", or if you're a database vendor, call them "Binary Large OBject"s.
Your data:application/pdf;base64,JVBERi0xLjcNJeLjz9MNCjIxIDAgb2JqDTw8L... string is a data URL; a way to represent arbitrary binary data in an URL string. Since the URI has the base64 marker, you know the data is encoded as Base64 and you can use any Base64 decoder you can find (there are plenty online) to decode the data.
Your (truncated) data begins
%PDF-1.7
%
21 0 obj
<</Linearized 1/L 421114/O 23/E 374320/N 2/T 420574/H [ 2616 448]>>
endobj
so it is representing something like a valid PDF file.
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.
I have a string like in this link http://pastie.org/private/n7bu5qlknphtyyv5sqla.
I am trying to decode it using different methods
new Uint8Array(encodedString);
and also tried some octal decoders online but no success. Can anyone help me to understand encoding type and how to decode it.
Edit:
Progress: It is a file loaded from client side. Before I was using readAsBinaryString and now I changed it to reader.readAsArrayBuffer(blob); Now I am getting ArrayBuffer and converted it to new Uint8Array(arrayBuffer). It seems now I have some data zipped data.
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.
Using a web service, I was able to retrieve some data from a MySQL Database. The database has an image saved in it, which had the file type of BLOB. This is what my web service returns when it comes to the image:
<image>
/9j/4AAQSkZJRgABAQEAYABgAAD/7TaeUGhvd.....RRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQB//Z
</image>
Now I am having trouble making my JavaScript application convert this data and then display it as an image. I researched on it a bit and found a couple of tutorials online but somehow they did not work for me....can anyone please help me with this issue? What is the simplest way I can convert BLOB data to an image? Thanks in advance!
Assuming the blob has base64 encoded PNG data, you can use data-uri to set data directly to image e.g.
var imgdata = "iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="
$('#myimg').attr('src', "data:image/png;base64,"+imgdata)
Assumption here is that data returned from server is base64 encoded, but if that is not the case you can see various options but ultimately you may have to do proper conversion in server side, in that case why not just return the url to image and create a API on server side to return images from blob
Here is a jsfiddle in action http://jsfiddle.net/anuraguniyal/4DEtH/5/
Edit:
I am not sure what language you use server side but process will be same for each language e.g.
>>> s='\x89PNG\r\n\x1a\n\x00\x00\x00\rIHDR\x00\x00\x00\x05\x00\x00\x00\x05\x08\x06\x00\x00\x00\x8do&\xe5\x00\x00\x00\x1cIDAT\x08\xd7c\xf8\xff\xff?\xc3\x7f\x06 \x05\xc3 \x12\x84\xd01\xf1\x82X\xcd\x04\x00\x0e\xf55\xcb\xd1\x8e\x0e\x1f\x00\x00\x00\x00IEND\xaeB`\x82'
>>> import base64
>>> base64.b64encode(s)
'iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=='
i.e. take all data, as will be stored in file (not the png marker too), not just raw image data and encode it