ASP.NET

28-Sep-12 22:02

I am struggling converting image to byte array using client side script.

I have to convert image to byte array, and pass this array to web service or Page methods, so that the web services or Page methods can save the image in sql server. Any one please help me

Thanks in advance,

Please help me....

jkirkerx29-Sep-12 19:30

29-Sep-12 19:30

[edit]

At first I didn't think that was possible. I know javascript can do many things, but to read an image file sounds far fetched.

Apparently, there are many articles about reading a image file as a base64 array of chars. Transmitting it to a web service would be easy, but since it's not a primitive data type like a string or integer, you would have to consume the array in a class first, and then as a primitive type. That's get a bit tricky especially in vb, but there are many c# examples out there that work fine.

I use uploadify with a sub process attached to it. I suppose I'm one step away from being able to complete your task, I just need to do the javascript end, and update my class. and modify a web service for it.

As far as starting from scratch, write the javascript first, and then work on the web service side, and just write the file to the disk drive for testing to make sure the byte array is intact.

[sample link^]

modified 30-Sep-12 17:13pm.

kkrangs30-Sep-12 22:04

30-Sep-12 22:04

hi jkirkerx,

Thank you so mush for your reply,

I have tested below code

var p;var canvas = document.createElement("canvas");
var img1=document.createElement("img");

function getBase64Image(){
    p=document.getElementById("fileUpload").value;
    img1.setAttribute('src', p);
    canvas.width = img1.width;
    canvas.height = img1.height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img1, 0, 0);
    var dataURL = canvas.toDataURL("image/png");alert("from getbase64 function"+dataURL );
    return dataURL;
}

My problem is , above logic IE cant support

Any idea plz advise me ...

modified 1-Oct-12 5:04am.

jkirkerx1-Oct-12 6:08

1-Oct-12 6:08

I ran into that about 2 months ago, IE has it's own set of rules for createElement, while Firefox and others use the standard rules, or in other words, the ones on the mozilla website.

As an example

innerText versus innerHTML

Plus, it's case sensitive, and by the way, sometimes you won't get an error, it will just read the value and do nothing in either browser.

I would have to spend an half hour and run the code to see what's happening, to modify it.

I would run it in IE, and press F12, or use the developer module, and set it to script, and run the page, it will catch the error on the right pane, you click on it, and shows you the source in the left pane, with the cursor on the error and a explanation.

I'll get back to this in about an hour

jkirkerx1-Oct-12 7:41

1-Oct-12 7:41

I'm not running html5, but while debugging your sample, I ran across this datasheet

http://msdn.microsoft.com/en-us/library/ie/ff975241%28v=vs.85%29.aspx[^]

This is probably a better sample for IE. OK, onLoad you Draw() the image in the canvas, then click the button to get the data that was drawn image.

<!DOCTYPE html><html>
<head>
  <script type="text/javascript">
function draw()
{
// Create some graphics.    
  var canvas = document.getElementById("MyCanvas");
  if (canvas.getContext) 
    {
 	var ctx = canvas.getContext("2d");
    ctx.fillStyle="white";
    ctx.beginPath();
    ctx.rect (5,5,300,250);
    ctx.fill(); 
    ctx.stroke();
    ctx.arc(150,150,100,0,Math.PI, false); 
    ctx.stroke();
    }  
}
function putImage()
{
  var canvas1 = document.getElementById("MyCanvas");        
  if (canvas1.getContext) {
 	 var ctx = canvas1.getContext("2d");                // Get the context for the canvas.
     var myImage = canvas1.toDataURL("image/png");      // Get the data as an image.
  }
  var imageElement = document.getElementById("MyPix");  // Get the img object.
  imageElement.src = myImage;                           // Set the src to data from the canvas.
  
}
  </script>
</head>
<body onload="draw()" bgcolor="lightgray" >
      <div>
        <button onclick="putImage()">Copy graphic using toDataURL</button>        
      </div>
      <div>
        <canvas id="MyCanvas" width="400" height="400" > </canvas>
      <img id="MyPix">
      </div>
  </body>
</html>

kkrangs10-Oct-12 4:44

10-Oct-12 4:44

hi jkirkerx

Thank u so mush for your reply, I have used uploadify.js process, Now it working with session inproc mode but , here we have used session stateserver mode so we cannot save httpposted file in session.

What i will do now..plz help me.

jkirkerx10-Oct-12 6:42

10-Oct-12 6:42

I didn't use the html5 version of uploadify, so I'm not sure how it works.

I had to write a Sub Process module, that mimics a webpage on upload, and I saved the image file on the drive in a temp location, actually a library, in which the image can be retrieved again for reprocessing. The Sub Process Module was session capable, so you can set a value. So my Sub Process uses system.drawing to create 4 images in various sizes, and writes a temp image with a temp name for previewing. Then I wrote a cleanup function that searches for previous temp files by date and time, and deletes the ones that are 1 day old.

Why are you trying to save the byte stream in a session?. You can save it as a byte() array or memory stream, just save the filepath in the session, or are you making it cluster ready?

sarathtamil8-Oct-12 23:59

sarathtamil

8-Oct-12 23:59

private void button3_Click(object sender, EventArgs e)
{
try
{
SqlConnection con = new SqlConnection("Data Source=.\\SQLEXPRESS;AttachDbFilename=|DataDirectory|\\new.mdf;Integrated Security=True;Connect Timeout=30;User Instance=True");
con.Open();
DataTable dt = new DataTable();
SqlDataAdapter da = new SqlDataAdapter("select * from master", con);
da.Fill(dt);
DataRow r = dt.NewRow();
SqlCommand cmd = new SqlCommand("insert into master(itemno,itemname,rate,session) values(" + textBox1.Text + ",'" + textBox2.Text + "'," + textBox3.Text + ",'" + textBox4.Text + "')", con);
cmd.ExecuteNonQuery();
r[4] = convertToByte(textBox6.Text);

dt.Rows.Add(r);
SqlCommandBuilder cb = new SqlCommandBuilder(da);
da.Update(dt);
RefreshData();
con.Close();
MessageBox.Show("picture save in the database");
}
catch (Exception ex) { MessageBox.Show(ex.Message); }
}

private void button5_Click(object sender, EventArgs e)
{
if (openFileDialog1.ShowDialog() == DialogResult.OK)
{
textBox6.Text = Path.GetFullPath(openFileDialog1.FileName);
pictureBox1.ImageLocation = textBox6.Text;
}
}

byte[] convertToByte(string sourcePath)
{
FileInfo fi = new FileInfo(sourcePath);
long sizeByte = fi.Length;
FileStream fs = new FileStream(sourcePath, FileMode.Open, FileAccess.Read);
BinaryReader br = new BinaryReader(fs);
byte[] data = br.ReadBytes((int)sizeByte);
return data;
}

kkrangs10-Oct-12 5:00

I am facing error, BC30451: Name 'this' is not declared

10-Oct-12 5:00

hi sarathviper

Thanks for your reply

I need to save file from client side ...

Thanks

Vijay rangs

Anjani Kant28-Sep-12 20:38

Anjani Kant

28-Sep-12 20:38

function pageLoad(sender, args) {
//Register the form and upload elements
window.parent.register(
$get('<%= this.form.ClientID %>'),
$get('<%= this.fileUpload.ClientID %>')
);
}

Re: I am facing error, BC30451: Name 'this' is not declared

Sandeep Mewara28-Sep-12 23:26

Sandeep Mewara

28-Sep-12 23:26

Looks like you have placed this Javascript in a separate JS file. Place it in it's related HTML/ASPX page and it should be available. Currently, the get cannot formulate the variable to access and look for the object.

Sandeep Mewara
Microsoft ASP.NET MVP

[My latest Article]: Server side Delimiters in ASP.NET[^]

help with regular expression

Jassim Rahma28-Sep-12 7:58

Jassim Rahma

28-Sep-12 7:58

Hi,

I want to ask how can I set a regular expression with the following:

Usernames can only contain alphanumeric characters (A-Z, 0-9) or a period (".").
Periods (".") cannot be at the beginning or end of the user name.
Username can have one Periods (".") only.
Usernames must be at least 5 characters long

Richard MacCutchan28-Sep-12 22:20

Richard MacCutchan

28-Sep-12 22:20

Are you trying to develop your website one CodeProject question at a time? Please read How to get an answer to your question[^], and try to do the basic research for yourself, and be a bit more specific about your problems.

One of these days I'm going to think of a really clever signature.

jkirkerx29-Sep-12 19:48

29-Sep-12 19:48

I like that!

Haven't seen you around for awhile, was wondering if everything was ok.

Wish chris would make the font .5 larger, other than that, the new look and feel is quite groovy.

jkirkerx out

Richard MacCutchan29-Sep-12 21:40

Richard MacCutchan

29-Sep-12 21:40

I've been here, I just don't reply to ASP.NET queries very often. It's good to see you are getting to be a regular with answers now.

One of these days I'm going to think of a really clever signature.

jkirkerx30-Sep-12 7:48

30-Sep-12 7:48

You guys really helped me out in learning c++, took the time to deal with my questions, and I completed my goal, so the least I can do is answer some questions over here and return the generosity.

I learned how to create threads in asp.net (vb), and shifted all my email functions over to it, so they process and send in the background now, fire and forget. And went back through my code and optimized it to be more efficient with allocating variables, and the proper use of structure and classes now.

Code Project is a nice place to hang out. I like it here. Now I just need to work harder for the cool icon next to my name, instead of the head avatar. That's all I want.

jkirkerx29-Sep-12 19:40