I have a use case to convert images to base64 using the url. But the website loads the image only once. I cannot convert to canvas since it requires a network call and is forbidden for second time.
But I am able to achieve the conversion using the sources panel in chrome which has an option to convert already loaded images to data URI. Ex: https://developers.google.com/web/updates/2015/05/copy-image-as-data-uri
I would like to do this programatically using javascript.
Either I inject a module while the image loads to convert to base64 and store it or access the sources panel in chrome to convert to data URI as it does.
I would like to know if there are any extensions to achieve this.
Thank you
Related
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.
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'm trying to transfer a jpeg from Flash to JavaScript. Is this even possible?
What I mean by that is: Flash is supplied an image from the user and performs some image manipulation. I then need to display that modified image in HTML. Do I need to post the image from the flash to the server and load it in html through a URL, or can I pass it directly from the flash into a javascript Image object through flash's external interface somehow?
What's the best way to do this?
Thanks.
One possible way is to encode your image to base64 and send the string via externalInterface call to JavaScript. On the JavaScript side you will need to decode the received string from base64 back to the original jpeg format.
Here a collection of tutorials to do all the bits needed:
Convert image to base64 in Actionscript: http://swati61.blogspot.de/2011/07/convert-image-to-base64-string-and-vice.html
Convert base64 to image in javascript : Base64 encoding and decoding in client-side Javascript
Communication between Actionscript and JavaScript: http://www.hariscusto.com/programming/communication-between-javascript-and-actionscript-as3-and-vice-versa/
I hope this answers your question.
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
What is the best way to generate image data from the contents of an HTML canvas element?
I'd like to create the image data such that it can be transmitted to a server (it's not necessary for the user to be able to directly save to a file). The image data should be in a common format such as PNG or JPEG.
Solutions that work correctly in multiple browsers are preferred, but if every solution depends on the browser, recent versions of Firefox should be targeted.
Firefox and Opera have a toDataURL() method that returns a data-URL formatted PNG. You can assign the result to a form field to submit it to the server.
The data URL is base-64 encoded, so you will have to decode it on the server side. You would also need to strip off the "data:image/png;" part of course.
I think a lib you can use is Canvas2Image, it uses native features from Canvas, but it won't work on any browser. I have an optimized version of this lib, if you want to, I'll share it with you.
Then you could get the generated Data URI and send it using Ajax to the server.