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

Posted 2023-03-15

【中文标题】如何仅使用 javascript 将图像转换为字节数组以将图像存储在 sql server 上？

【英文标题】：How to convert image to byte array using javascript only to store image on sql server?

【发布时间】：2012-03-04 18:16:01

【问题描述】：

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

【问题讨论】：

您需要哪些浏览器支持？

你可以使用base64来满足你的需要吗？

【参考方案1】：

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

执行虚假 AJAX 调用以上传图像文件（到目前为止，this jQuery 插件为我创造了奇迹）。 通过 Request.Files 从您发布文件的页面检索文件。 通过使用生成的 HttpPostedFile 的 InputStream 属性来提供 Web 方法调用的 byte[] 参数来执行 Web 方法调用。

您显然可以将整页帖子发布到特定 URL 以执行相同的功能，但我非常喜欢 ASP.NET 中的 AJAX/Web 方法组合。哦，这还假设您使用 ASP.NET 发布到 Web 方法。 :P

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

【讨论】：

不，我不需要第三方工具，我只需要使用 js 转换，请帮助我，

好吧，您总是可以使用旧的 XMLHttpRequest 编写自己的 AJAX 处理程序，并将文件（和任何其他表单值）发布到 URL。除了 jQuery 和 AjaxFileUpload 扩展为您将 JavaScript 代码包装在易于使用的库中之外，其余的仍然是没有第三方工具的好旧 .NET 代码。

【参考方案2】：

我找到了一种解决方案。 :)

在html javascript文件中，首先使用以下代码将上传的图片转换为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#代码--用于将base64转换为字节数组并存储在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();

希望你明白:) ......

【讨论】：

但是 IE8 中 getBase64Image() 方法存在一些问题，如何解决这个问题

您可能需要删除图像字符串开头的图像类型填充，sbText.Replace("data:image/png;base64,", String.Empty);

@Raja Ramesh - 我也在寻找相同类型的代码，对我来说它有效。谢谢

非常感谢，这为我节省了很多时间，这是仅在前端将图像转换为字节数组的最佳选择。

【参考方案3】：

File.prototype.convertToBase64 = function(callback)

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

然后使用 this 调用这个函数

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

你得到你的 base64 代码。