Javascript 如何将html5画布图像保存到mssql varbinary（max）字段？

JAVASCRIPT-将画布图像保存到DATAURL

此代码在单击时将base64字符串绑定到hiddenfield

save.addEventListener('click', function (event) {
  var dataUrl = canvas.toDataURL();
  $('txtbx').val(dataUrl);
});

VB.NET-将BASE64字符串提交到SQL

此代码在单击时将base64字符串提交到数据库（如

VarChar

）

---

问题: 如何：

• 将画布图像另存为varbinary字符串？
• 将base64字符串转换为varbinary？

欢迎任何将图像字符串获取到varbinary字段的替代解决方案

我已经阅读了很多关于这方面的文档，但无法实现一个工作示例。我现在需要一些关于这件事的专家指导

---

简单解决方案

答案很简单，将字符串包装如下：

Convert.FromBase64String(base64Decode)

---

要将base64字符串转换为二进制数据类型，请使用，然后使用字节数组将其作为二进制存储在数据库中

我在表格中做了这个快速测试，效果很好：

        //got this datauri from http://corehtml5canvas.com/code-live/ch01/example-1.1/example.html
        var datauri = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAlgAAAEsCAYAAAAfPc2WAAAaqklEQVR4Xu3dS6LrNBYFUN4UqqZIj/HQY4owBapCKpWfbOvI2365V4sWcJ1jafkk2rET58cv/iFAgAABAgQIEIgK/IhWU4wAAQIECBAgQOAXAUsTECBAgAABAgTCAgJWGFQ5AgQIECBAgICApQcIECBAgAABAmEBASsMqhwBAgQIECBAQMDSAwQIECBAgACBsICAFQZVjgABAgQIECAgYOkBAgQIECBAgEBYQMAKgypHgAABAgQIEBCw9AABAgQIECBAICwgYIVBlSNAgAABAgQICFh6gAABAgQIECAQFhCwwqDKESBAgAABAgQELD1AgAABAgQIEAgLCFhhUOUIECBAgAABAgKWHiBAgAABAgQIhAUErDCocgQIECBAgAABAUsPECBAgAABAgTCAgJWGFQ5AgQIECBAgICApQcIECBAgAABAmEBASsMqhwBAgQIECBAQMDSAwQIECBAgACBsICAFQZVjgABAgQIECAgYOkBAgQIECBAgEBYQMAKgypHgAABAgQIEBCw9AABAgQIECBAICwgYIVBlSNAgAABAgQICFh6gAABAgQIECAQFhCwwqDKESBAgAABAgQELD1AgAABAgQIEAgLCFhhUOUIECBAgAABAgKWHiBAgAABAgQIhAUErDCocgQIECBAgAABAUsPECBAgAABAgTCAgJWGFQ5AgQIECBAgICApQcIECBAgAABAmEBASsMqhwBAgQIECBAQMDSAwQIECBAgACBsICAFQZVjgABAgQIECAgYOkBAgQIECBAgEBYQMAKgypHgAABAgQIEBCw9AABAgQIECBAICwgYIVBlSNAgAABAgQICFh6gAABAgQIECAQFhCwwqDKESBAgAABAgQELD1AgAABAgQIEAgLCFhhUOUIECBAgAABAgKWHiBAgAABAgQIhAUErDCocgQIECBAgAABAUsPECBAgAABAgTCAgJWGFQ5AgQIECBAgICApQcIECBAgAABAmEBASsMqhwBAgQIECBAQMDSAwQIECBAgACBsICAFQZVjgABAgQIECAgYOkBAgQIECBAgEBYQMAKgypHgAABAgQIEBCw9AABAgQIECBAICwgYIVBlSNAgAABAgQICFh6gAABAgQIECAQFhCwwqDKESBAgAABAgQELD1AgAABAgQIEAgLCFhhUOUIECBAgAABAgKWHiBAgAABAgQIhAUErDCocgQIECBAgAABAUsPECBAgAABAgTCAgJWGFQ5AgQIECBAgICApQcIECBAgAABAmEBASsMqhwBAgQIECBAQMDSAwQIECBAgACBsICAFQZVjgABAgQIECAgYOkBAgQIECBAgEBYQMAKgypHgAABAgQIEBCw9AABAgQIECBAICwgYIVBlSNAgAABAgQICFh6gAABAgQIECAQFhCwwqDKESBAgAABAgQELD1AgAABAgQIEAgLCFhhUOUIECBAgAABAgKWHiBAgAABAgQIhAUErDCocgQIECBAgAABAUsPECBAgAABAgTCAgJWGFQ5AgQIECBAgICApQcIECBAgAABAmEBASsMqhwBAgQIECBAQMDSAwQIECBAgACBsICAFQZVjgABAgQIECAgYOkBAgQIECBAgEBYQMAKgypHgAABAgQIEBCw9AABAgQIECBAICwgYIVBlSNAgAABAgQICFh6gAABAgQIECAQFhCwwqDKESBAgAABAgQELD1AgAABAgQIEAgLCFhhUOUIECBAgAABAgKWHiBAgAABAgQIhAUErDCocgQIECBAgAABAUsPECBAgAABAgTCAgJWGFQ5AgQIECBAgICApQcIECBAgAABAmEBASsMqhwBAgQIECBAQMDSAwQIECBAgACBsICAFQZVjgABAgQIECAgYOkBAgQIECBAgEBYQMAKgypHgAABAgQIEBCw9AABAgQIECBAICwgYIVBlSNAgAABAgQICFh6gAABAgQIECAQFhCwwqDKESBAgAABAgQELD1AgAABAgQIEAgLCFhhUOUIECBAgAABAgKWHiBAgAABAgQIhAUErDCocgQIECBAgAABAUsPECBAgAABAgTCAgJWGFQ5AgQIECBAgICApQcIECBAgAABAmEBASsMqhwBAgQIECBAQMDSAwQIECBAgACBsICAFQZVjgABAgQIECAgYOkBAgQIECBAgEBYQMAKgypHgAABAgQIEBCw9AABAgQIECBAICwgYIVBlSNAgAABAgQICFh6gAABAgQIECAQFhCwwqDKESBAgAABAgQELD1AgAABAgQIEAgLCFhhUOUIEMgI/Pr7n3+vVfrjt397/cpQq0KAwAECXqAOQFWyJfB3Y7H8Eeq/Vu3LGFL19x7R6viOtNo7l2MffwlV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CBAgQIDA7AIC1uwdYP4ECBAgQIBAXEDAipMqSIAAAQIECMwuIGDN3gHmT4AAAQIECMQFBKw4qYIECBAgQIDA7AIC1uwdYP4ECBAgQIBAXEDAipMqSIAAAQIECMwuIGDN3gHmT4AAAQIECMQFBKw4qYIECBAgQIDA7AIC1uwdYP4ECBAgQIBAXEDAipMqSIAAAQIECMwuIGDN3gHmT4AAAQIECMQFBKw4qYIECBAgQIDA7AIC1uwdYP4ECBAgQIBAXEDAipMqSIAAAQIECMwuIGDN3gHmT4AAAQIECMQFBKw4qYIECBAgQIDA7AIC1uwdYP4ECBAgQIBAXEDAipMqSIAAAQIECMwuIGDN3gHmT4AAAQIECMQFBKw4qYIECBAgQIDA7AIC1uwdYP4ECBAgQIBAXEDAipMqSIAAAQIECMwuIGDN3gHmT4AAAQIECMQFBKw4qYIECBAgQIDA7AIC1uwdYP4ECBAgQIBAXEDAipMqSIAAAQIECMwuIGDN3gHmT4AAAQIECMQFBKw4qYIECBAgQIDA7AIC1uwdYP4ECBAgQIBAXEDAipMqSIAAAQIECMwuIGDN3gHmT4AAAQIECMQFBKw4qYIECBAgQIDA7AIC1uwdYP4ECBAgQIBAXEDAipMqSIAAAQIECMwuIGDN3gHmT4AAAQIECMQFBKw4qYIECBAgQIDA7AIC1uwdYP4ECBAgQIBAXEDAipMqSIAAAQIECMwuIGDN3gHmT4AAAQIECMQFBKw4qYIECBAgQIDA7AIC1uwdYP4ECBAgQIBAXEDAipMqSIAAAQIECMwuIGDN3gHmT4AAAQIECMQFBKw4qYIECBAgQIDA7AIC1uwdYP4ECBAgQIBAXEDAipMqSIAAAQIECMwuIGDN3gHmT4AAAQIECMQFBKw4qYIECBAgQIDA7AIC1uwdYP4ECBAgQIBAXEDAipMqSIAAAQIECMwuIGDN3gHmT4AAAQIECMQFBKw4qYIECBAgQIDA7AIC1uwdYP4ECBAgQIBAXEDAipMqSIAAAQIECMwuIGDN3gHmT4AAAQIECMQFBKw4qYIECBAgQIDA7AIC1uwdYP4ECBAgQIBAXEDAipMqSIAAAQIECMwuIGDN3gHmT4AAAQIECMQFBKw4qYIECBAgQIDA7AIC1uwdYP4ECBAgQIBAXEDAipMqSIAAAQIECMwuIGDN3gHmT4AAAQIECMQFBKw4qYIECBAgQIDA7AIC1uwdYP4ECBAgQIBAXEDAipMqSIAAAQIECMwuIGDN3gHmT4AAAQIECMQFBKw4qYIECBAgQIDA7AIC1uwdYP4ECBAgQIBAXEDAipMqSIAAAQIECMwuIGDN3gHmT4AAAQIECMQFBKw4qYIECBAgQIDA7AIC1uwdYP4ECBAgQIBAXEDAipMqSIAAAQIECMwuIGDN3gHmT4AAAQIECMQFBKw4qYIECBAgQIDA7AIC1uwdYP4ECBAgQIBAXEDAipMqSIAAAQIECMwuIGDN3gHmT4AAAQIECMQFBKw4qYIECBAgQIDA7AIC1uwdYP4ECBAgQIBAXEDAipMqSIAAAQIECMwuIGDN3gHmT4AAAQIECMQFBKw4qYIECBAgQIDA7AIC1uwdYP4ECBAgQIBAXEDAipMqSIAAAQIECMwuIGDN3gHmT4AAAQIECMQFBKw4qYIECBAgQIDA7AIC1uwdYP4ECBAgQIBAXEDAipMqSIAAAQIECMwuIGDN3gHmT4AAAQIECMQFBKw4qYIECBAgQIDA7AIC1uwdYP4ECBAgQIBAXEDAipMqSIAAAQIECMwuIGDN3gHmT4AAAQIECMQFBKw4qYIECBAgQIDA7AIC1uwdYP4ECBAgQIBAXEDAipMqSIAAAQIECMwuIGDN3gHmT4AAAQIECMQFBKw4qYIECBAgQIDA7AIC1uwdYP4ECBAgQIBAXEDAipMqSIAAAQIECMwu8B+03ZHSzNSl5QAAAABJRU5ErkJggg==";
        var base64 = datauri.Substring(datauri.IndexOf(',') + 1);

        var binary = Convert.FromBase64String(base64);

        pictureBox1.Image = Image.FromStream(new MemoryStream(binary));

请记住更改SP参数以使用varbinary

您的解码功能过于复杂—您不需要它，只需更改参数创建：

Dim image As New SqlParameter("@image", SqlDbType.VarBinary, -1)
  image .Direction = ParameterDirection.Input
  cmd.Parameters.Add(image ).Value = Convert.FromBase64String(base64.Substring(base64.IndexOf(',') + 1););

您不需要任何字符数组或流，只需删除URI中无用的部分（

substring

piece），并将其转换为字节数组（

convert…

）

---

ADO.NET将自动将字节数组转换为MSSQL所需的varbinary。

也许您需要先将表列[Image]更新为varbinary（max）

然后，按以下步骤更新程序：

@image VARCHAR(MAX)
AS
BEGIN
    SET NOCOUNT ON;

    UPDATE  [tbl]
    SET     [Image] = cast('' as xml).value('xs:base64Binary(sql:variable("@image"))', 'varbinary(max)')

END

试试看，让我们知道它是否有效

编辑：

---

看起来您确实需要对数据进行解码。我已更新了程序。请查看有关编码/解码的详细信息。

您可以发布存储过程的代码吗？您只需更新存储过程并将base64字符串强制转换为varbinary即可…根据Microsoft文档尝试此操作，但收到错误消息，字符串为太长，无法转换。有什么想法吗？在尝试转换之前，您是否删除了所有“无用”部分？数据URI格式为

Data:[]；charset=][；base64]，

（来自Wikipedia），您应该发送给函数的唯一部分是

收到的错误：指定的路径、文件名或两者都太长。完全限定的文件名必须少于260个字符，目录名必须少于248个字符。“您的代码有问题，base64字符串被解释为路径？？非常感谢您的帮助。我知道我非常接近。我添加了用于转换的函数。字符串似乎正确，但出现了上述错误。这会将base64字符串转换为二进制字符串吗？”？

@image VARCHAR(MAX)
AS
BEGIN
    SET NOCOUNT ON;

    UPDATE  [tbl]
    SET     [Image] = cast('' as xml).value('xs:base64Binary(sql:variable("@image"))', 'varbinary(max)')

END