Convert base 64 string to image file

Question

1.00/5 (1 vote)

See more:

how to convert base 64 string to image file and save it using javascript or jquery
i am converting the image, which is getting uploaded from fileupload control
i am refreeing this article
https://developer.mozilla.org/en-US/docs/Web/API/FileReader

Posted 28-Jul-13 1:05am

rocky_em

Updated 28-Jul-13 1:11am

v2

Add a Solution

Comments

Joezer BH 28-Jul-13 7:50am

What seems to be the problem then?

rocky_em 28-Jul-13 10:28am

after converting the base 64 string into the image file and saving the file in the folder
i want to show the image like this with it source attribute like this http://mysitname/Images/Imagename1.png"

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Andreas Gieriet · Answer 1 · 2013-07-28T02:57:00

Solution 1

Ever tried Google? So you expect us to enter for you your question in Google?
E.g. http://stackoverflow.com/questions/2820249/base64-encoding-and-decoding-in-client-side-javascript[^].
Cheers
Andi

Posted 28-Jul-13 2:57am

Andreas Gieriet

Comments

rocky_em 28-Jul-13 10:28am

i tried my friend i dont want to decode after converting the base 64 string into the image file and saving the file in the folder
i want to show the image like this with it source attribute like this http://mysitname/Images/Imagename1.png"

[no name] 28-Jul-13 10:47am

that's not possible. once it is in base64 format you have to decode it to get the original image back.

rocky_em 28-Jul-13 11:09am

or can i can i call server side fucntion from client side and then save the file in the folder so thet i can convert base 64 string into image file

Andreas Gieriet 28-Jul-13 11:25am

I suggest you rephrase your "question" so it is clear what you want to achieve and what not.
Your original question is not really asking for anything conclusive. And please use proper spelling, capitalization and punctuation so it is clear what is a question and what is a statement.
Cheers
Andi

rocky_em 28-Jul-13 11:40am

What i want is .
i am uploading ,an image and when the image is uploaded it is getting converted to "base 64 string"(data:image/svg+xml,%3C..%) now ,
what i want is
to convert the base 64 string(which is my image) i want to save it in my folder called image i want to achieve this using JavaScript or jquery

Andreas Gieriet 28-Jul-13 14:40pm

So, this is a statement, but not a question. This is an *QA* forum, and more specific: "quick answers" forum. Whatever qualifies for a quick answer can be posted here. But you don't even ask any question. If you don't show what you have done so far and where you struggle, you will not get any usful help here. Please show what you have done and where you got stuck. Please ask a specific question where you need help exactly. Be prepared to *not* get any ready-to-use solutions from a general statement.
Andi
PS: If you reply to a comment, please use the [Reply] button top right of the respective comment.

rocky_em 29-Jul-13 3:10am

This is how i am doing the function(GetImagePAth) is getting called but when i am uploading big images the server side method is not getting called
function upload() {
try {
var sImage = document.getElementById('uploadPreview').src;

// i am getting base 64 string in sImage
//temporary post base 64 string save that base 64 string as image file and return the path thas all
$.ajax({
type: "POST",
url: "EmailCampaignEditor.aspx/GetImagePAth",
data: '{name: "' + sImage + '" }',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
failure: function(response) {
alert(response.d);
}
});
//temporary

}
catch (Error) {
}
}

function OnSuccess(response) {
alert(response.d);
}

[System.Web.Services.WebMethod]
public static string GetImagePAth(string base64string)
{
EmailCampaignEditor em = new EmailCampaignEditor();
Page p = new Page();

string BaseURL = "";
string path = "";
string matchString = "";
try
{
byte[] imageByteArray = Convert.FromBase64String(base64string.Split(',').ToArray()[1]);
MemoryStream ms = new MemoryStream(imageByteArray, 0, imageByteArray.Length);
ms.Write(imageByteArray, 0, imageByteArray.Length);
//return System.Drawing.Image.FromStream(ms, true);

using (Bitmap bm2 = new Bitmap(ms))
{
string ImgPath = "~\\View\\Images\\";

string iPath = em.ServerMappath(ImgPath);

bm2.Save(iPath + campname + EmailCampaignEditor.imgn + "ImageName.jpg");

path = campname + EmailCampaignEditor.imgn + "ImageName.jpg";

BaseURL = "http://" + path_64 + "/View/Images/" + path;
EmailCampaignEditor.imgn++;
}
}
catch (Exception ex)
{

return matchString;
}

return BaseURL;
}

Andreas Gieriet 29-Jul-13 4:27am

You still don't ask a question. You now tell about "big" images. So, with small images it works fine? Did you debug somehow? What do you want us to do now? Please ask a question that we can answer.
Cheers
Andi
PS: Why do you split the base64string before passed to the Convert.FromBase64String() function?
PPS: What is the value of campname? That variable is nowhere defined nor set - where does it come from?

rocky_em 29-Jul-13 5:05am

the images which have their size more than 700 kb or more
with small images it works fine

textbox text is coming inside campname
i am splitting base 64 string because starting of the string is data:image/png;base64,iVBORw...........

How do i make my server side function call when i a upload big images ?

Andreas Gieriet 29-Jul-13 5:23am

There might be a POST size limit that is exceeded. Do you get any error message when the data do not get uploaded?
See Maximum default POST request size of IIS 7 - how to increase 64kB/65kB limit?.
Cheers
Andi
PS: Please mote that your original image of 700kB increases by about 33%-36% by base64 encoding, so, maybe you have currently a limit of 1MB and your base64 encoded file exceeds that limit.

rocky_em 29-Jul-13 5:32am

after uploading the big images i am showing the user the preview of it as soon as the user clicks the upload button which is html button
i am retrieving source attribute of the image control which is showing the preview of it
var sImage = document.getElementById('uploadPreview').src;

what i am getting in sImage is the base64 string and then i am sending the this string to server side
but unfortunately if the base 64 is big it is not being sent to the server side i am not receving any error
if it is
small server side function is getting called

Andreas Gieriet 29-Jul-13 5:37am

So, did you check the POST message size limit of the server as I suggested in my former comment? See that link (assuming you are running some version of IIS).
Cheers
Andi
PS: Your error handling looks broken to me. Make decent error handling in the catch blocks and analyze the respective exceptions. You currently simply ignore exceptions - no wonder you get no error ;-)

rocky_em 29-Jul-13 5:59am

yes i tried that i am not running the solution IIS i am running the solution development server
i did added the following snippet
<security>
<requestfiltering>
<requestlimits maxallowedcontentlength="1000000">

i added the alert(Error); sill no exceptions

Andreas Gieriet 29-Jul-13 6:02am

See my comment on your deleted comment at the far end of the thread.

rocky_em 29-Jul-13 6:21am

i added catch blocks still no error

Sa Chchu 30-Jan-18 7:25am

fdgd

Andreas Gieriet 29-Jul-13 5:59am

How do you know that the server side method is not called? Did you set a breakpoint? And here again: no decent exception handling - you simply ignore the exception and return the presumably empty matchString.
Cheers
Andi

rocky_em 29-Jul-13 6:03am

yes i am setting the break point it is not getting called

Andreas Gieriet 29-Jul-13 6:24am

What is your POST size limit?

rocky_em 29-Jul-13 6:29am

rocky_em 29-Jul-13 6:33am

maxRequestLength="80000"

Andreas Gieriet 29-Jul-13 6:43am

I.e. about 80MB.
I think it has to do with some size limits, but POST size seems not to be the issue.
I have no clue though, what else it could be. The file size is with base64 about 1MB, so the POST size limit is not the problem. Or do you have a slow connection and you simply don't wayt long enough until the data is transferred?
Andi

rocky_em 29-Jul-13 9:05am

andreas i could not find solution for that i think there is a limit of sending the data
so i decided to use another approach of using ImageHandler.ashx
i added the the
following script it callin the ImageHandler.ashx so i am downloading the file in that handler and retturing the image path
so that i can drop the image

still if possible i am still trying to find the solution for that

<script src="../js/ajaxfileupload.js" type="text/javascript"></script>
<script type="text/javascript">
//*********** Image Handler ************//

function ajaxFileUpload(Id, BrowserAdress) {
var i = 1;
alert(Id);

//CALL THE IMAGE HANDLER
$.ajaxFileUpload
(
{
url: 'ImageHandler.ashx',
secureuri: false,
fileElementId: 'uploadImage', //HTML FILE UPLOAD CONTROL WHICH IS PRESENT IN THE ../ckeditor/plugins/about/dialogs/about.js
dataType: 'json',
data: { name: BrowserAdress, id: i },//PASSING THE BROWSER URL
success: function(data, status) {
if (typeof (data.error) != 'undefined') {
if (data.error != '') {
//IF FAILER
alert(data.error);
} else {

//IF SUCESS

alert(data.msg);//ALERT THE PATH

var width = 50;
var height = 50;

//get the width FROM THE TEXTBOX WHICH IS PRENT IN THE CKEDIOTR IN THE ABOVE ADRESS
if (document.getElementById('txtwidth').value != null) {
width = document.getElementById('txtwidth').value; //get the width
}

//get the height
if (document.getElementById('txtheight').value != null) {
height = document.getElementById('txtheight').value; //get the height
}
var hiddedn = "0";

//HIDDEN VALUE PRESENT IN THIS PAGE IFIT ZERO IT MEANS ONE IS UPLOADIN IMAGE BY HIMSELF
//IF IT IS ONE IT MEANS THAT HE IS UPLAODING IMAGE ON THE DIV I AM HARD CODING THE WIDHT AND THE HEIGHT SO THE IMAGE WILL TAKE THE SIZE OF THE DIV

hiddedn = document.getElementById('<%=hdn_flag_chktemp.ClientID%>').value;

if (hiddedn == 0) {
var htmlimage = '<img height="' + height + ' " width="' + width + '" src="' + data.msg + '" />'; //make the image
var oEditor = CKEDITOR.instances.editor1;//CREATE INSTANCE OF THE CKEDIOTR
oEditor.insertHtml(htmlimage); //put the image into the ckediotr
} else {
var htmlimage = '<img style="width: 100%; height: 100%" src="' + data.msg + '" />'; //make the image
var oEditor = CKEDITOR.instances.editor1;
oEditor.insertHtml(htmlimage); //put the image into the ckediotr
}
}
}
}
,
error: function(data, status, e) {
alert(e);
}
}
)
i++;
return false;
}

//******End**************//
</script>

rocky_em 29-Jul-13 6:54am

Is there any limit of sending the data if one is using
$.ajax({
type: "POST",
url: "EmailCampaignEditor.aspx/GetImagePAth",
data: '{name: "' + sImage + '" }',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
failure: function(response) {
alert(response.d);
}
});
this method
i tried to set some hidden value and then i am not sending base 64 string in that method blank string
when i try retrieve the hidden value i am reeving exception obeject refrence

Andreas Gieriet 29-Jul-13 11:30am

If you do it as described in this article MSDN: Uploading Files in ASP.NET 2.0, do you succeed? When you got this working, add your additional functionality if technically possible.
Cheers
Andi

rocky_em 29-Jul-13 12:41pm

i am not supposed to use any asp controls pure html controls ;-) i am trying to add
images in ckeditor (http://ckeditor.com/demo) some what like this

Andreas Gieriet 29-Jul-13 13:15pm

You have the tag "ASP.NET", so I assumed you can use them. In any case, the problem is not a control problem I assume, so, you may exchanged them freeley with your choice of HTML means on client side. As long as the machinery behind the scenes is working as described in that link above, you are fine off.
I would do what is described in that link and once it's working replace one part after the other with your constructs and check if it's still running.
Cheers
Andi

rocky_em 29-Jul-13 13:32pm

ok :) i want to ask u when we deploy the application on IIS the adress is like
http://localhost/MarketingEngine/CS.aspx

can i get the localhost/MarketingEngine only that part so that i can append
image path to like this
http://localhost/MarketingEngine/View/Images/Image1.png
dynamically at runtime

Andreas Gieriet 29-Jul-13 15:48pm

Why would you use absolute URL? Use relative URL only, i.e. View/Images/image1.png.
localhost/MarketingEngine is *not* a path! localhost is the hostname of the local machine. You could replace it with the IP address of your PC or with http://127.0.0.1/ and you get the same result - It's the server part of the URL. On the server, your URL is to be mapped to a server-local base directory. All relative paths are within that directory.
Cheers
Andi

rocky_em 30-Jul-13 0:45am

you are right i can use relative url the on which u mention above but i am sending images in the mail so i need address to look like http://localhost/MarketingEngine/View/Images/Image1.png
so that i can see the image that is y i asked how to set retrieve the path
even when i host the application on live server like godaddy some some other
images will be stored on their server

Andreas Gieriet 30-Jul-13 1:00am

Look for the Path property of the HttpRequest. See also HttpRequest.Path Property .

rocky_em 30-Jul-13 1:13am

If i use me Request.Path it only gives me /View/MarketingEngine/EmailCampaignEditor.aspx
but if i append image name to it and send the image by appending the above url
how do i form a address like this http://localhost/MarketingEngine/View/Images/Image1.png dynamically http://localhost/MarketingEngine/View/Images/Image1.png

in the mail i wont be able to see the
image

rocky_em 30-Jul-13 3:27am

I did like this
<script type="text/javascript">
$("document").ready(function() {

if (!window.location.origin)
window.location.origin = window.location.protocol + "//" + window.location.host;
alert(window.location.origin);
alert(window.location.protocol + "//" + window.location.host);
});
</script>
but i am getting only http://localhost

rocky_em 30-Jul-13 1:02am

Thank you , i will go through it now