Question

JAVASCRIPT - 保存帆布图像到数据

此代码在点击时将base64字符串绑定到隐藏字段。

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

VB.NET - 提交BASE64字符串SQL

此代码在单击时将base64字符串提交到数据库。 （作为VarChar）

Protected Sub btn_Click(ByVal sender As Object, ByVal e As EventArgs) Handles btn.Click
  Dim base64 As String = hidUrl.Value
  Dim base64Decode As String = base64.Replace("data:image/png;base64,", "")

  Dim cmd As New SqlCommand("sp", con)
  cmd.CommandType = CommandType.StoredProcedure

  Dim image As New SqlParameter("@image", SqlDbType.VarChar, -1)
  image .Direction = ParameterDirection.Input
  cmd.Parameters.Add(image).Value = base64Decode

  con.Open()
  cmd.ExecuteNonQuery()
  con.Close()
End Sub

问题

如何：

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

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

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

简单解决方案

答案是简单地将字符串包装如下：

Convert.FromBase64String(base64Decode)

Answer 1

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

我在一个表单中做了这个快速测试，它运行良好：

        //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););

您不需要任何char数组或流，只需删除URI（substring段的无用部分，并将其转换为字节数组（Convert...）。

ADO.NET会自动将字节数组转换为MSSQL预期的varbinary。

Answer 2

也许您需要先将表格列[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

尝试并告知我们是否有效。

编辑：

看起来您需要解码数据。我已经更新了proc。有关编码/解码的更多信息，请查看http://blog.falafel.com/t-sql-easy-base64-encoding-and-decoding/。

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

问题

2 个答案: