如何使用javascript将图像转换为字节数组，仅将图像存储在sql server上

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

本文关键字：图像 存储 sql server 字节数 javascript 何使用 转换 字节 数组      更新时间：2023-09-26

我正在努力使用客户端脚本将图像转换为字节数组。我必须将图像转换为字节数组，并将此数组传递给web服务，以便web服务可以将图像保存在sql server中。任何人都请帮我。

我找到了一个解决方案。：）

在htmljavascript文件中，首先使用以下代码将上传的图像转换为base64图像格式。

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

因此，我们在dataURL中得到了上传图像的base64代码。

现在将此BASE64代码（dataURL）发送到web服务，并使用以下代码将BASE64字符串转换为字节数组，并保存到sql server

c#code——用于将base64转换为字节arry并存储在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();
}

希望你理解：）。。。。。。

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

然后用这个调用这个函数

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

你得到了你的base64代码。

这个问题的可能解决方案：

  1. 执行一个伪AJAX调用来上传图像文件（到目前为止，这个jQuery插件为我创造了奇迹）
  2. 通过Request.Files从您发布文件的页面中检索文件
  3. 通过使用生成的HttpPostedFile的InputStream属性来执行Web方法调用，以馈送Web方法调用的byte[]参数

很明显，你可以将整页文章发布到特定的URL以执行相同的功能，但我非常喜欢ASP.NET中的AJAX/web方法组合。哦，这也假设你使用ASP.NET来发布到web方法。：P

如果您不想使用jQuery，可以使用JavaScript中的XMLHttpRequest对象来实现您自己的AJAX函数。本文有一个很好的例子，说明如何实现它来执行对url的GET/POST调用。

相关文章：