I'm converting the page to canvas and then canvas to the image. Function convertCanvasToImage returns image link as base64 encoded link. Looking for a solution to decode it cause I'll need that later and would be easier.
Encoded image starts with data:image/png;base64,longString.
I tried
var decodedData = window.atob(n); and http://www.webtoolkit.info/javascript-base64.html
But it returns chinese characters.
Also, I tried sending the encoded string to the server via ajax and then try with base64_decode. Still, I get odd output.
Any reference or solution how to decode base64 png image and get normal URL of the image? Is it possible for a canvas to return normal URL not encoded?
Related
I am currently working on a web extension that goes through all the images in the current webpage and blurs them. I have created a backend API that accepts a base64 encoded string of an image and returns the encoded string for the blurred image. My current issue is that I can't find a way to access all the images on the current webpage and get their base64 encoded string through javascript. How can I do this?
The intended architecture of the extension is as follows: the javascript file reads all the images on the webpage and encodes them into a base64 string, which is passed to the backend API. The API then blurs the image and returns a base64 encoded string of the blurred image. The javascript then decodes the string and replaces the original image with the blurred image.
Any help would be greatly appreciated.
I have tried going through all the image tags in the html of the webpage and fetching their urls, however this does not allow me to get the base64 encoding of the image(s). I would like to write a function that takes in the url to an image and returns the base64 encoding.
I am recieveing image URL from API, while displaying the image breaks sometime.
For this reason i am planing to get the url from the API and Convert the image into the Base64 format and then display the image.
As of for now i m displaying image from url obtained from the API.
Could anyone assist me on how i can download the image from the url. And then convert it to base 64 format.
API.URL is the url of the image obtained form API.
Tried with many alternatives but without success, now i have decided to convert the url into base 64 before assigning.
All you need to convert a variable to base 64 is use the btoa() javascript native function.
But this will not convert the image but the URL itself.
In order to convert the image itself, you must first load it into a HTML5 canvas element and then use toDataURL() and it will return a base64 representation of the image. see here for more "How to convert image into base64 string using javascript
"
const url = "http://google.com"
const base64url = btoa(url)
console.log(base64url)
I currently have a large base64 image uri (Received via external JS script) and want to embed it into the HTML page. I did this successfully locally but now that it pulls it from another place it seems to not work, it loads part of the image then says "Image corrupt or truncated. URI in this note truncated due to length." This occurs both just in the <img> tag and using <canvas>, is there any way to load large images from uri? Or another way to display images from a base64 string?
What doesn't make sense is it works fine if I specify the base64 string as a javascript variable, but when I include it as a variable in an external script, it gives this error. Would breaking up the string then putting it back together fix this?
You shouldn't use data-URLs for huge files.
You could try to convert your base64 URL into a blob object and the blob object into a temporary blob url using the following javascript function:
function dataurlToBlobUrl(url){
var parts = url.split(',',2);
var mime = parts[0].substr(5).split(';')[0];
var blob = b64toBlob(parts[1],mime);
return URL.createObjectURL(blob);
}
And the b64toBlob function from here:
https://stackoverflow.com/a/16245768/5406901
Just make sure to use "URL.revokeObjectURL" whenever you no longer need the blob url.
I am wanting to take a currently base64 encoded image and use a short hash say "84dskh" to "encrypt" the image into another perfectly valid base64 encoded image.
The original image does not have to be base64 encoded, ultimately I want a encrypted image of the original, but have it still be a valid image I could display in a img tag: <img src="myimage" />.
Preferably using javascript.
To encrypt the image, you would save it as a string (there may be limits there), and then when loading the image into the HTML document, use a decrypt method. Here is a related question. You may also find this library helpful (suggested within an answer).
Is EXIF metadata removed/deleted when an image is converted to DataURL form so it can be stored in a browsers local storage? Specifically Chrome if it makes a difference.
When you convert any image to a data URL, you're just base64 encoding the binary stream of the image file. So, in short, no.
Edit: If you are specifically drawing an image to an HTML5 Canvas and then converting its data to a data URL with its toDataUrl method, of course EXIF data of the original image would be removed, because a Canvas instance doesn't use anything but the pixel data it contains and its pixel dimensions to generate that data url (if it uses anything else its isn't obvious to me). Any data URL generated wouldn't even necessarily look like one generated from the original file as as the files could be compressed differently, even when generating lossless PNGs.
It depends how you are doing the conversion. As long as you are just base64 encoding the entire image file, then all of the metadata will be preserved. However, if you use the canvas method (https://gist.github.com/1875132) of converting an image element then I believe you will only be storing the raw image data.