Convert base 64 string to image file

Posted by Surajemo under ASP.NET on 7/29/2013 | Points: 10 | Views : 2302 | Status : [Member] | Replies : 5
hi

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;
}




Responses

Posted by: Bandi on: 7/29/2013 [Member] [MVP] Platinum | Points: 25

Up
0
Down
did you get any exception like "Out of Memory " ?
Can you post the exception message? It will be better to sort out the issue

Mark This Response as Answer
--
Chandu
http://www.dotnetfunda.com/images/dnfmvp.gif

Surajemo, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Surajemo on: 7/29/2013 [Member] Starter | Points: 25

Up
0
Down
no i am not receiving any error
when i am uploading big images the server side method is not getting called
but when i am uploading small images the function is getting called sucessfully

Surajemo, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Bandi on: 7/29/2013 [Member] [MVP] Platinum | Points: 25

Up
0
Down
May be try with image resizer in the case of large images upload....
follow the sample code for image resizer http://www.dotnethelpers.com/Ultimate_Image_Resizer/AspDotNet_Sample

Mark This Response as Answer
--
Chandu
http://www.dotnetfunda.com/images/dnfmvp.gif

Surajemo, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Surajemo on: 7/29/2013 [Member] Starter | Points: 25

Up
0
Down
what i am doing is i want to pass base 64 string to the server side function and save the it as image on the server my fileupload control is html
after saving the image file i can get the image path so that i can send images in the mail i cant send base 64 string my fileupload control is in the pop up
check out this example
http://ckeditor.com/demo
i made custom plugin for uploading images

Surajemo, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Surajemo on: 7/29/2013 [Member] Starter | Points: 25

Up
0
Down
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>

Surajemo, if this helps please login to Mark As Answer. | Alert Moderator

Login to post response