How to convert image to byte array using javascript only to store image on sql server?
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 :) ......
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.
A possible solution to this problem:
- Perform a faux-AJAX call to upload the image file (this jQuery plugin has worked wonders for me thus far).
- Retrieve the file from the page you post it to via Request.Files.
- 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.