Decoding custom base64 image - javascript

I'm trying to decode a custom base64 image in my web application but for some reason I'm facing some difficulties.
The server returns an image as custom base64 string:
//////////////////////////////////////////////////D/////////////////////////////////////////////////8P/////////////////////////////////////////////////w////wP////////////////////////////////////////////D////Af///////////////////////////////////////////8P///8A////////////////////////////////////////////w////wA////////////////////////////////////////////D////AB///////////////////////////////////////////8P///8AD///////////////////////////////////////////w////wAD///////////////////////////////////////////D////AAD//////////////////////////////////////////8P///8AAH//////////////////////////////////////////w////wMAH////////////////////////8AAAAAAAAAAAAAAP//D////A8AH////////////////////////wAAAAAAAAAAAAAA//8P///8D4AH////////////////////////H/////////////j//w////wPwAH///////////////////////8P////////////8P//D////A/wAH///////////////////////w/////////////w//8P///8D/wAD///////////////////////B////////////+D//w////wP/gAB//////////////////////8H////////////4P//D////A//gAA////////////8P////////wP////////////A//8P///8D//gAAP//////////+AH////////M////////////8z//w////wP//gAAA////////D/wAH///////8x////////////jP//D////A///gAAAP//////4P+AAP///////zj///////////8c//8P///8D///wAAA//////+A/wAAf///////OP///////////xz//w////wP///4AAD//////wD/AAB///////88f//////////+PP//D////A////8AAP//////AP4AAD///////z5///////////58//8P///8D/////AA//////4A/gPwP///////Pj///////////Hz//w////wP/////wD//////gP+B/gf//////8/P//////////8/P//D////A/////////////8B/wH+B///////z8f//////////j8//8P///8D/////////////wP/Af8H///////P4//////////8fz//w////wP/////////////B/8D/wf//////8/j//////////x/P//D////A/////////////8H/gP/A///////z/H/////////+P8//8P///8D/////////////wf+A/+D///////P8f/////////4/z//w////wP/////////////B/4H/4P//////8/4//////////H/P//D////A/////////////4H/gf/g///////z/z/////////8/8//8P//////////////////gf8B/+D///////P/H/////////j/z//w//////////////////+B/wH/wP//////8/+f////////+f/P//D//////////////////8H/A//A///////z/4/////////x/8//8P//////////////////wf4D/8H///////P/x////////+P/z//w///////////////////B/gP/gf//////8//H////////4//P//D//////////////////8D+B/+B///////z/+P////////H/8//8P//////////////////wHwH/wH///////P/8////////8//z//w///////////////////gMAf8A///////8//x////////j//P//D//////////////////+AAD+AD///////z//n///////+f/8//8P//////////////////8AAP4Af///////P/+P///////x//z//w///////////////////4AB/gD///////8//8////////P//P//D///////////////////wAP+Af///////z//x///////4//8//8P///////////////////gB/8D////////P//j///////H//z//w////////////////////w//w////////8//+P//////8f//P//D///////////////////////f////////z//8f//////j//8//8P////////////////////////////////P//5//////+f//z//w////////////////////////////////8///j//////x///P//D///+AAAAAAAAP///////////////////z///P//////P//8//8P///4AAAAAAAA////////////////////P//8f/////4///z//w////gAAAAAAAD///////////////////8///5//////H///P//D///+AAAAAAAAP///////////////////z///j/////8f//8//8P///8AAAAAAAA////////wAAAH///////P///H/////j///z//w////8AAAAAAAD///////AAAAAf//////8///8f////+P///P//D////4B/////////////wAAAAB///////z///4/////x///8//8P////wH////////////8AAAAAH///////P///z/////P///z//w/////gP////////////wAAAAAf//////8////H////4////P//D/////Af///////////+AAAAAB///////z///+f////n///8//8P////+A////////////wAAAAAH///////P///4////8f///z//w/////4D////////////AP///////////8////x////j////P//D/////wH///////////8B////////////z////H///+P///8//8P/////gf///////////wP////////////P///+P///x////z//w//////A///////////+B////////////8////4////P////P//D/////8D///////////4H////////////z////x///4////8//8P/////4H///////////gf////////////P////n///n////z//w//////gf///////////B////////////8////+P//8f////P//D//////////////////8H////////////z////8///z////8//8P//////////////////wf////////////P////x//+P////z//w///////////////////B////////////8/////j//x/////P//D//////////////////+D////////////z////+P//H////8//8P//////////////////4P////////////P////8f/4/////z//w///////////////////wf///////////8/////5//n/////P//D///////////////////g////////////z/////j/8f////8//8P///////////////////Af///////////P/////P/z/////z//w///////////////////+AAAAAf//////8/////8f+P/////P//D///////////////////4AAAAB///////z/////5/5/////8//8P//////////////////+AAAAAH///////P/////j/H/////z//w///////////////////wAAAAAf//////8//////H4//////P//D//////////////////+AAAAAB///////z/////8fj/////8//8P//////////////////4AAAAAH///////P/////48f/////z//w///////////////////AAf//////////8//////zz//////P//D//////////////////8A////////////z//////GP/////8//8P//////////////////wP////////////P/////+Z//////z//w///////////////////A////////////8//////4H//////P//D//////////////////4H////////////z//////w//////8//8P//////////////////gf////////////P//////D//////z//w//////////////////+B////////////8//////8P//////P//D//////////////////8H////////////z//////w//////8//8P//////////////////wf////////////P/////+B//////z//w///////////////////B////////////8//////5n//////P//D//////////////////8D////////////z//////GP/////8//8P//////////////////4P////////////P/////88//////z//w///////////////////gf///////////8//////jx//////P//D///////////////////A////////////z/////8fj/////8//8P//////////////////+B////////////P/////x+P/////z//w///////////////////8A///////////8/////+P8f/////P//D///////////////////4AAAAB///////z/////5/5/////8//8P//////////////////wAAAAAH///////P/////H/j/////z//w///////////////////AAAAAAf//////8/////8//P/////P//D//////////////////8AAAAAB///////z/////j/8f////8//8P//////////////////wAAAAAH///////P////+f/5/////z//w///////////////////AAAAAAf//////8/////x//j/////P//D////////////////////////////////z////+P//H////8//8P////////////////////////////////P////4//8f////z//w////////////////////////////////8/////H//4/////P//D////////////////////////////////z////8///z////8//8P////////////////////////////////P////j///H////z//w////////////////////////////////8////+f//+f////P//D////////////////////////////////z////x///4////8//8P////////////////////////////////P////P///z////z//w/////////////////////gP3////////8////4////H////P//D////////////////////gA/H////////z////H///+P///8//8P///////////////////4AD8H////////P///8f///4////z//w////////////////////AAPwH///////8////j////x////P//D///////////////////wAA+AP///////z///+f////n///8//8P///////////////////AAD4A////////P///x////+P///z//w///////////////////4AAPgB///////8////P////8////P//D///////////////////APg/gD///////z///4/////x///8//8P//////////////////4B+D/gP///////P///H/////j///z//w///////////////////gf4P/Af//////8///8f////+P///P//D//////////////////8D/g/+B///////z///j/////8f//8//8P//////////////////wP+D/8H///////P//+f/////x///z//w///////////////////B/4P/wf//////8///x//////j///P//D//////////////////8H/g//A///////z///P//////P//8//8P//////////////////wf+D/+D///////P//4//////8f//z//w//////////////////+B/4P/4P//////8///n//////5///P//D//////////////////4H/g//g///////z//8f//////j//8//8P//////////////////gf+D/+D///////P//j///////H//z//w///////////////////B/4P/wP//////8//+P//////8f//P//D//////////////////8H/g//A///////z//x///////4//8//8P//////////////////wf+D/8H///////P//P///////z//z//w///////////////////A/4P/gf//////8//4////////H//P//D//////////////////8D/g/+B///////z//n///////+f/8//8P//////////////////4H+D/wH///////P/8f///////4//z//w///////////////////gP4P+A///////8//z////////z//P//D///////////////////APg/gD///////z/+P////////H/8//8P//////////////////8AOD4Af///////P/x////////+P/z//w///////////////////4AAAAD///////8//H////////4//P//D///////////////////wAAAAf///////z/4/////////x/8//8P///////////4///////gAAAD////////P/n/////////n/z//w///////////+D///////gAAAf///////8/8f////////+P/P//D///////////AP///////AAAH////////z/z/////////8/8//8P//////////wA////////AAB/////////P+P/////////x/z//w//////////4AD////////4B/////////8/x//////////j/P//D/////////+AAP///////////////////z/H/////////+P8//8P/////////gAA////////////////////P4//////////8fz//w/////////wAAH///////////////////8/j//////////x/P//D////////8AAD////////////h///////z8f//////////j8//8P///////+AAA///////wf///4H///////Pz///////////Pz//w////////gAAf///////B////wf//////8+P//////////8fP//D///////wAAP///////8H////B///////z5///////////58//8P//////8AAD////////wf///8H///////PH///////////jz//w//////+AAAf////////B////gf//////84////////////HP//D//////gAAB////////8H///8B///////zj///////////8c//8P/////4AAAH//////wAAAAAAAH///////Mf///////////4z//w/////8AAHgf//////AAAAAAAAf//////8z////////////zP//D/////AAB+B//////+AAAAAAAB///////wP////////////A//8P////gAA/4H//////4AAAAAAAP///////B////////////+D//w////4AAf/gf//////wAAAAAAB///////8H////////////4P//D///+AAH/+B///////gAAAAAAP///////w/////////////w//8P///4AD//4H////////wf////////////D/////////////D//w////gB///gf////////B////////////8f////////////+P//D///+A///+B////////8H////////////wAAAAAAAAAAAAAA//8P///4B///4H////////wf////////////AAAAAAAAAAAAAAD//w////gAf//gf////////B//////////////////////////////D///+AAP/+B///////////////////////////////////////8P///8AAH/4H///////////////////////////////////////w////8AAH/gf///////////////////////////////////////D////+AAD+B///////////////////////////////////////8P////+AAB4H////////////gP/////////////////////////w//////AABgf/////////z/4AP/////////////////////////D//////gAAB/////////8P/AAf////////////////////////8P//////gAAH/////////A/4AA/////////////////////////w///////wAAP////////4D/AAB/////////////////////////D///////wAAP////////AP8AAD////////////////////////8P///////4AAH///////4A/gHAP////////////////////////w////////8AAD///////gD+A/A/////////////////////////D////////8AAB//////+B/wH+B////////////////////////8P////////+AAB//////wP/Af8H////////////////////////w/////////+AAD//////A/8D/wf////////////////////////D//////////AAP/////8H/wP/A////////////////////////8P//////////gA//////wf+A/+D////////////////////////w///////////gD//////B/4D/4P////////////////////////D///////////wP/////4H/gf/g////////////////////////8P///////////w//////gf8B/+D////////////////////////w////////////7/////+B/wH/4P////////////////////////D//////////////////8H/Af/A////////////////////////8P//////////////////wf8D/8D////////////////////////w///////////////////B/gP/wf////////////////////////D/////////+////////8H+A/+B////////////////////////8P////////8AH///////wPwH/wH////////////////////////w//////D//gAH///////geAf+A/////////////////////////D/////gP/4AAP//////+AAB/gD////////////////////////8P////4A//AAAf//////8AAP4Af////////////////////////w/////AD/4AAA///////wAB/gB/////////////////////////D////4AP/gAAB///////gAH+AP////////////////////////8P////AA/8APgD///////AB/8B/////////////////////////w////8AD/wD/gP///////AP/wf/////////////////////////D////gD/+Af/Af//////////H/////////////////////////8P///8A//4D/8B/////////////////////////////////////w////wH//AP/4D/////////////////////////////////////D////A//8B//wP////////////////////////////////////8P///4D//wH//A//////3//////////////////////////////w////gf/+Af/8D//////D//////////////////////////////D///+B//4D//wH/////8B/////////////////////////////8P///4H//gP//gf/////wB/////////////////////////////w////gf/+A//+B//////AA/////////////////////////////D///8D//wH//4H/////8AAf///////////////////////////8P///wP//Af//gf/////4AAf///////////////////////////w////A//8B//+B//////4AAP////////////////wP/////////D///8D//wH//4H//////8AAH////////////////Af////////8P///wP/+A///gf//////+AAH///////////////8A/////////w////A//4D//8B////////AAD///////////////wA/////////D///+B//gP//wP////////AAB///////////////AB////////8P///4H/+A///A/////////gAB//////////////8AD////////w////gf/wH//8D/////////wAA//////////////wAD////////D///+B//Af//gP/////////4AAf/////////////AAD///////8P///4D/8B//+A//////////8AB/////////////8AAH///////w////wP/gP//wH//////////+AH/////////////wMAH///////D////Af8A//+Af//////////wAf/////////////A8AH//////8P///+AfgH//wD//////////wAB/////////////8D4AH//////w////4AAAf/+AP/////////4AAH/////////////wPwAH//////D////wAAD//gB/////////+AAH//////////////A/wAH/////8P////gAAP/gAH/////////AAB//////////////8D/wAD/////w/////AAB/+AA/////////gAA///////////////wP/gAB/////D////+AAf/4AH////////wAAf///////////////A//gAA////8P////+AD//gB////////4AAH///////////////8D//gAAP///w/////+B//+AP///////+AAD////////////////wP//gAAA///D/////////8D////////AAB/////////////////A///gAAAP/8P/////////x////////wAAf////////////////8D///wAAA//w///////////////////AAP/////////////////wP///4AAD//D//////////////////8AD//////////////////A////8AAP/8P//////////////////wB//////////////////8D/////AA//w///////////////////A///////////////////wP/////wD//D//////////////////8P///////////////////A/////////8P//////////////////3///////////////////8D/////////w///////////////////////////////////////wP/////////D///////////////////////////////////////A/////////8P//////////////////////////////////////8D/////////w////gAAAAAAAD//////////////////////////wP/////////D///+AAAAAAAAP//////////////////////////A/////////8P///4AAAAAAAA/////////wB//////////////////////////w////gAAAAAAAD/////8f/8AB//////////////////////////D///+AAAAAAAAP////+B//AAB/////////////////////////8P///4AAAAAAAA/////gH/4AAD/////////////////////////w///////8D////////4Af/gAAH/////////////////////////D///////wP////////AB/8AAAP////////////////////////8P///////A////////4AH/gB8Af////////////////////////w///////8D////////gAf+Af4B/////////////////////////D///////wP///////8Af/wD/wD////////////////////////8P///////A////////wD//Af/gP////////////////////////w///////8D///////+A//4B//Af////////////////////////D///////wP///////4H//gP/8B////////////////////////8P///////A////////Af/+A//4H////////////////////////w///////8D///////8D//4D//gf////////////////////////D///////wP///////wP//Af/+A////////////////////////8P///////A////////A//8B//8D////////////////////////w///////8D///////8D//wH//wP////////////////////////D///////wP///////gf//A///A/////////////+AAAAAAAAP/8P///////A///////+B//4D//8D/////////////4AAAAAAAA//w///////8D///////4H//gP//wP/////////////gAAAAAAAD//D///////wP///////gf/+A///A/////////////+AAAAAAAAP/8P///////A///////+B//wH//8D/////////////8AAAAAAAA//w///////8D///////4H//Af//gP/////////////8AAAAAAAD//D///////wP///////wP/8B//+B//////////////4B////////8P///////A////////A//wH//4H//////////////wH////////w///////8D///////8D/+A///gf//////////////gP////////D///////wP///////wP/4D//8B///////////////Af///////8P///////A////////Af/gP//wH//////////////+A////////w///////8D///////+B/8B//+A///////////////4D////////D///////wP///////4D/gH//4D///////////////wH///////8P///////A////////wH8Af//AP///////////////gf///////w////gAAAAAAAD////ADAD//wB////////////////A////////D///+AAAAAAAAP///+AAAf/8AP///////////////8D///////8P///4AAAAAAAA////8AAB/+AA////////////////4H///////w////gAAAAAAAD////wAAP/wAH////////////////gf///////D///+AAAAAAAAP////wAB//AA/////////////////////////8P///4AAAAAAAA/////gAf/8AH/////////////////////////w////gAAAAAAAD/////wH//wB//////////////////////////D//////////////////////gf/////////////////////////8P/////////////////////+P//////////////////////////w//////////////////////////////////////////////////D/////////////////////////////////////////////////8P/////////////////////////////////////////////////w//////////////////////////////////////////////////D/////////////////////////////////////////////////8P/////////////////////////////////////////////////w//////////////////////////////////////////////////D/////////////////////////////////////////////////8P/////////////////////////////////////////////////w//////////////////////////////////////////////////D/////////////////////////////////////////////////8P/////////////////////////////////////////////////w//////////////////////////////////////////////////D/////////////////////////////////////////////////8P/////////////////////////////////////////////////w
I do also get information about width, height, bytesize & and format. The format in this case is "Mono 8 bit".
Is there anyway that this string can be decoded to the image?
Edit #1
Here is a simple code. Iam just trying to append it to the src of the element. Like this, which of course wont work:
const imgData = "base64 string from above";
const image = document.getElementById('testImage');
image.src = "data:image/jpeg;charset=utf-8;base64, + " imgData;

Related

React JS Base64 image returned but cannot be decoded

So I have an image cropper and its allowing the user to set the size of the image. The image returned after it is cropped is in this form:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAtwAAALcCAYAAADUqWdpAAAgAElEQVR4Xux9...
However, when I try to decode this, i'm told that it is not in the correct format... What is going on here?
EDIT: I'm using var base64 = require('base-64'); base64.decode(string);
EDIT: Full return value: https://pastebin.com/vsHBq3pR

Using Phonegap download image and want to convert it into base64 in iOS

I am stuck in problem regarding base64.
The situation is - I download image in iPad and getting path of that download image like this :-
{"isFile":true,"isDirectory":false,"name":"testImage.png","fullPath":"/testImage.png","filesystem":"","nativeURL":"file:///var/mobile/Containers/Data/Application/4048F634-D44A-40F8-ACA0-32BC9F401F56/Documents/testImage.png"}
In the above object ,nativeURl from which I am getting image and I am able to append on HTML page, but I want convert it into base64 ,& I am not been able to get till now.
I know somewhere it is possible. I am just making a mistake.
So anybody,expert please help me sort out that issue, if provide example that will be help full in any online editor.
Thanks
Shivam
<div id='mainPostDiv'></div>
//hello, you need to convert into base64
// set your data first in localStorage
var imageData = localStorage.getItem("ImageData");
var imgPost = document.createElement('img');
imgPost.setAttribute('id', "imgPost");
imgPost.src = "data:image/jpeg;base64," + imageData;
$('#mainPostDiv').append(imgPost);

LocalStorage phonegap camera image

i'm trying to use localStorage to save an image, or multiple images for retrieval at a later date to upload to a server.
The current camera code is as follows:
function capturePhoto() {
navigator.camera.getPicture(onCameraSuccess, onCameraFail, {quality: 70, destinationType : Camera.DestinationType.DATA_URL});
}
function onCameraSuccess(imageData) {
//In our success call we want to first process the image to save in our image box on the screen.
var image = document.getElementById('image');
image.src = "data:image/jpeg;base64," + imageData;
//Create a new canvas for our image holder
var imgCanvas = document.createElement("canvas"),
imgContext = imgCanvas.getContext("2d");
// Make sure canvas is as big as the picture
imgCanvas.width = image.width;
imgCanvas.height = image.height;
// Draw image into canvas element
imgContext.drawImage(image, 0, 0, image.width, image.height);
// Get canvas contents as a data URL
var imgAsDataURL = imgCanvas.toDataURL("image/png");
// Save image into localStorage
try {
// localStorage.setItem(“savedImage”, imgAsDataURL);
localStorage.setItem("savedImage", imageData);
alert('Image Saved');
}
catch (e) {
alert("Storage failed: " + e);
}
var imageStorage = localStorage.getItem("savedImage");
// myCardHolder= document.getElementById(“m1-cardStorage-image1″);
// Reuse existing Data URL from localStorage
var imageInfo = document.getElementById('image');
imageInfo.src = "data:image/jpeg;base64," + imageStorage;
}
This triggers the camera, and the image captured is displayed into
<img id="image" src=""></img>
It also draws a canvas to output the image into. What i'm really trying to achieve is to capture the images base64 data to be able to store it into an array so that it may be uploaded/downloaded from a server.
Ideally i'd like to completely avoid having to display the image to the user, and simply store the images data
I may have misunderstood the localStorage/camera api a little, so any pointers would be great.
Does the image HAVE to be output into an element before the data can be stored? If i could just output it into the canvas that may never have to be shown, and extract the data from the canvas element?
Does the image HAVE to be output into an element before the data can be stored?
Not at all, in this case anyways. You are already receiving the image as base64 data so just store that directly.
Problems:
datauris can be chopped by the browser if too long
if not chopped by browser on string level, the data can be chopped by localstorage itself which has a size limit (i think it's currently around 5 mb for most browsers but there is no standard here)
a string uses two bytes per char so the storage is in effect the half
A better local storage is to use indexedDB.
When you read the base64 data, then you have to use an Image to show the data. Just prefix as you do with data:... etc. and remember to use correct file type.
Last year I was trying to solve the same problem, I don't have the code right now but I followed kind of the approach taken on this answer:
How to convert image into base64 string using javascript
Remember that localStorage has a limit of 5 MB, so if you save a lot of images in b64 you can reach that limit easily. (which was my case), so I had to move my storage to somewhere else, like a sqlite or something like that.

How to Process a Byte Array Image in Javascript Produced by ASP.NET Response.BinaryWrite

I'm attempting to consume server-side code that is owned by another team and that I can't easily change. It is processing an image and returning it via Response.BinaryWrite:
MemoryStream ms = new MemoryStream();
image.Save(ms, System.Drawing.Imaging.ImageFormat.Jpeg);
var imageToReturn = ms.ToArray();
Response.ContentType = "image/jpg";
Response.BinaryWrite(imageToReturn);
However, when I attempt to do standard client-side processing of the result, like using Javascript's btoa() to convert it from a byte array to an ArrayBuffer, I get messages like "'btoa' failed: The string to be encoded contains characters outside of the Latin1 range".
I really just want to be able to display and work with this image - so any approach that would get it to appear in a canvas, or convert it to a data URL, etc., would help me out. Am I missing something?
If you just want to display the image, why don't you just src attribute of img tag to the url of the ASP.Net page, which is writing the JPG in the in the response.
If you want to display the image in canvas, you can do it in following way
myimage = new Image();
myimage.onload = function () {
var canvas = document.getElementById('canv');
var ctx = canvas.getContext('2d');
ctx.drawImage(myimage, x, y);
}
myimage.src = '<url to the asp.net page>';

Base64 encode and image in Adobe Air

I am writing an Adobe Air app in HTML/JavaScript and I am trying to base64 encode an image so I can add it to and XML RPC request. I have tried many methods and nothing seems to work.
I see that actionscript has a Base64Encoder class that look like it would work, is there any way to utilize this in JavaScript?
Thanks #some for the link.
I used the btoa() function to base64 encode image data like this:
var loader = new air.URLLoader();
loader.dataFormat = air.URLLoaderDataFormat.BINARY;
loader.addEventListener(air.Event.COMPLETE,function(e){
var base64image = btoa(loader.data);
});
var req = new air.URLRequest('file://your_path_here');
loader.load(req);
I was trying to upload an image using metaWeblog.newMediaObject, but it turns out that the data doesn't need to be base64 encoded, so the binary value was all that was needed.

Categories

Resources