How to convert image to byte array using javascript only to store image on sql server?

Question

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 , so that the web services can save the image in sql server. Any one please help me.

Answer 1

i have found one solution. :)

in html javascript file, first convert the uploaded image to base64 image format using following 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;
} 

so we got base64 code of uploaded image in dataURL.

NOW SEND THIS BASE64 CODE (dataURL) to web service and convert the base64 string to byte array using following code and save to sql server too

c# code--for converting base64 to byte arry and to store on sql

private void Form1_Load(object sender, EventArgs e) {
    int userid = 5;
    string base64="";// load base 64 code to this variable from js 
    Byte[] bitmapData = new Byte[base64.Length];
    bitmapData = Convert.FromBase64String(FixBase64ForImage(base64));
    string connstr = @"user id=sa; password=*****"; 
    database=ImageTest; 
    server="192.168.1.104";
    SqlConnection conn = new SqlConnection(connstr);
    conn.Open();
    string query;
    query = "insert into imagetable(userid,image) values(" + userid + "," + " @pic)";
    SqlParameter picparameter = new SqlParameter();
    picparameter.SqlDbType = SqlDbType.Image;
    picparameter.ParameterName = "pic";
    picparameter.Value = bitmapData;
    SqlCommand cmd = new SqlCommand(query, conn);
    cmd.Parameters.Add(picparameter);
    cmd.ExecuteNonQuery();
    cmd.Dispose();
    conn.Close();
    conn.Dispose();
}
public static string FixBase64ForImage(string image) {
    StringBuilder sbText = new StringBuilder(image, image.Length);
    sbText.Replace("\r\n", String.Empty);
    sbText.Replace(" ", String.Empty);
    return sbText.ToString();
}

hope u understand :) ......

Answer 2

File.prototype.convertToBase64 = function(callback){

    var FR= new FileReader();
    FR.onload = function(e) {
         callback(e.target.result)
    };       
    FR.readAsDataURL(this);
}

and later call this function using this

var selectedFile = this.files[0];
selectedFile.convertToBase64(function(base64)

you get your base64 code.

Answer 3

A possible solution to this problem:

1. Perform a faux-AJAX call to upload the image file (this jQuery plugin has worked wonders for me thus far).
2. Retrieve the file from the page you post it to via Request.Files.
3. Perform the Web Method call by using the resulting HttpPostedFile's InputStream property to feed the byte[] parameter of the Web Method call.

You can obviously do a full page post to a specific URL to perform the same functionality, but I'm a huge fan of AJAX / web method combinations in ASP.NET. Oh, this also assumes you're using ASP.NET to post to the Web Method. :P

If you don't want to use jQuery, you can implement your own AJAX function using the XMLHttpRequest object in JavaScript. This article has a nice example of how to implement it to perform GET / POST calls to a url.