如何在 SQL Server 数据库中保存文本和图像的组合

Question

我需要保存数据，它是文本和图像的 q 组合。例如：“一些文本”“图像”“一些文本”，重点是，这些数据没有特定的格式。图像可以位于序列的任何部分，前后有文本。例如：

我需要以与定义相同的顺序保存它，并以相同的顺序检索和显示并保留格式；文本作为文本和图像作为图像。

我知道我们可以以byte[]格式保存图像，但是如何将文本和图像一起保存在数据库的单列中？

请帮忙。

Answer 1

无论采用何种应用程序和存储技术，您的解决方案都需要以下部分：

• 内容模型
• 内容编辑
• 内容存储
• 内容渲染
• 内容处理和索引

在这里，我将尝试更多地解释这些构建块：

• 内容模型- 它是内容的模型。要根据您的要求决定内容模式，请考虑以下选项

  • 最大的灵活性：文本和图像的组合被视为丰富的内容。您可以使用标记语言HTML或富文本格式RTF作为内容格式。
  • 有限的结构：要拥有有限的结构，您仍然可以依靠丰富的内容（如HTML）并轻松验证内容以查看内容是否符合您所需的结构。作为另一种选择，您可以依赖特定的类作为模板，具有一些属性，例如Text1, Image，Text2并将类序列化为 XML 或二进制值。

  本质上，无论您选择哪种模型类型，都需要将其转换为byte[]或string存储在存储中。例如，您可能有一个包含一些图像和文本属性的 C# 类，并将其转换为 XML 以存储在数据库中。或者您可以使用 HTML 作为内容类型。在这种情况下，DOM 相当于 C# 模型，而 HTML 就像 XML 作为文档对象模型的表示。

• 内容编辑- 根据您需要的内容类型，您可以创建一个 UI 作为内容编辑器，以允许用户创建内容。

  • 您可以使用任何Rich Editor，例如HTML Editor或RichTextBox。
  • 或者，您可以创建只使用一个自定义用户界面PictureBox，TextBox为您定制的C＃模型其他控件和。

• 内容存储- 您可以像byte[]在任何 blob 存储中一样存储内容。在 SQL Server 中，它可能是VARBINARY(MAX)或NVARCHAR(MAX)取决于您的要求。

  例如，如果使用 HTML 作为内容类型，您可以轻松地将其保存在VARBINARY(MAX)和NVARCHAR(MAX). 此外，如果您使用任何自定义 C# 模型，您可以轻松地将其转换为二进制文件或将其XML保存在VARBINARY(MAX)和NVARCHAR(MAX).

• 内容渲染- 无论您选择哪种内容模型，内容渲染器都负责将内容渲染到应用程序的 UI。要呈现内容，在使用 HTML 作为内容类型的情况下，您可以轻松使用WebBrowser控件。在使用 RTF 的情况下，您可以使用RichTextBox，在自定义类的情况下，您可以使用 GDI+ 或轻松使用 some PictureBox、标签和TextBox控件。

• 内容处理和索引- 将内容添加到存储后，您可能需要另一个线程/进程来处理内容并提取索引信息。通过这种方式，您可以更轻松、更快速地搜索内容。例如对于HTML内容，虽然可以轻松使用字符串搜索操作，但是对于高级搜索场景和数据分析，您可以处理 html 内容以提取更多信息。

内容示例 - HTML

这是 HTML 内容的示例。我使用一个简单的 HTML 编辑器创建了这个内容，我在这个答案中分享了它的代码：

<h3>Lorem ipsum dolor sit amet?</h3>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEUAAAAyCAYAAAAKqhZQAAAABHNCSVQICAgIfAhkiAAAAAFzUkdCAK7OHOkAAAAEZ0FNQQAAsY8L/GEFAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAFAUlEQVRoQ+2bWyhlXxzHNw8ajXhBuZSoIYWURpJLrsmlJCnihZRbSGaKvLhkatwvT3ghL6R4UZ7EiyI8kHs0Csm1yKWU9V/r+LF+a519OIcz/rM5n/o267e+v986e62x1744rBRFIVQWENbwrwWEZVFUEE4fQj7vmWRlxZbiActPigqWRVHhwy3K5uamkpeXp1hbW+tOCaagoCClr68PMoyDbSQ6aZ3MzMynuRjS2toaZItIeTzQMn5+fnhSz2pxcRGqOFIOD7RKUVERnhCJiooi6+vr4BLS2toq+Ewykm84UQvc3d3hyZDGxkZwRK6vr4W8kpIScB7AHhUPtEhbW9vT8X/79g161Zmfn3/KleeL+6nUk7RCUlLS0/EPDg5Cr2HwfC8uLqBX7Nf8JXl3dxdaiuLv7w8twwQGBkJLUXZ2dqAlovlFcXJygpaiHBwcQMswdAOGlqI4OjpCS0TzixISEgItRens7ISWOjc3N8rt7S1EiuLm5gYtfZ7OJS3y588fYT+YnZ0FRx98LxMdHQ29D+AxqHigVUJDQ/GESEdHBzgPrKysELqXCDn7+/vgPoA9Kh5oGTwPJjs7O+Lu7k5cXV31vObmZqjiSDk80DJ0vyB048QTU1V9fT1UiEh5PPgbZGdnE3pVgOjv09TURDw8PPAEyZcvX3T3M8vLy5ClD86n4oG5ycjIeBp7fHwcet8HtgFvbm6SjY0Ncnl5Cb2GwetAxQNzkpWVhT9EJ0PPJf8C0rHywFykpKTgDxAUGxsLWf8W0nHywBykpqbiwUlNTQ1JTk4W+mxsbMjR0RFUmI+5uTlomQ4+PioevJX09HQ8sO4UeqS0tFTwmEZGRsB9O2FhYboxt7e3occ0pGPjwVuIi4vDg5L8/HxwOGNjY0IOk/xew1TY+xR6uy6MSR8SwTUeXE/Fg9eSmJiIByTl5eXg6HNyckLoQ5yQHxwcTO7v7yHDePb29oRxsE5PTyHLOKR6HrwGeb/Izc0F53kiIiKEOltbW7K1tQXuy0xOTgr1j2Pg+OrqCrJfBtdR8cBUIiMj8UCkrKwMHOOora0V6pmGhobANUxvb69e3cLCAjk8PNTrZ3e6xiDV8cAUYmJi8CCkqqoKHNOYnp4WxmFiL6IN8fPnTyGX3a0eHx+DS8jq6qrgMxmDVGNaMUPeVIuLi8F5Hefn58TZ2VkY09vbG1xOWlqakOPi4gKOCLs047yvX7+CYxicT8UDYwgJCcHFpLq6Gpy3o3bTt7S0pPN8fHyEfnYJfo6pqSkh397eHhx1cC4VD14iPDwcF5K6ujpwzMfv37+Fz2Dy9PQU4oKCAsh+nomJCaHOwcEBHH1wHhUPnkNekMrKSnDMz8zMjPBZWKb+RwwPDwv1Xl5e4IjgHCoeGCIgIAAX6K4a74H8gmh0dBQc0+jv7xfGUduvsE/FAzW+f/+Ok9/9Sffxl+Y7OzvQ8zq6urqEebD3tRjsUfFARl4Q9nD3f3B2dgattyHvV+x3zo/gfioeYNi5h71fv36Bo23kG0Z2v8XAfVQ8eET+WoPai14tU1FRIczvx48fQkzFA4avry82SUNDg67/o1FYWCjMUxIPEhISsEHa29thiI9JTk6OMF8k1U7S3d0NpR8b+dEBpNdBWlpaoORzEB8fL6+BEJCenh5I/VxI68CDgYEBSPl84HWwfA0dwF9Dt/xpiwqWr6GrYFkUPRTlPzq+MgkshdSAAAAAAElFTkSuQmCC"/>
<ol>
  <li>Consectetur adipiscing elit</li>
  <li>Sed do eiusmod tempor</li>
  <li>Incididunt ut labore et dolore</li>
  <li>magna aliqua.</li>
</ol>
<p><i><u>Ut enim</u>: Ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</i></p>

内容编辑器示例 - HTML 编辑器

在此示例中，我将展示您可以如何轻松地使用 C# 或 HTML 创建一个简单但有用的 html 编辑器，但是您也可以使用 3rd 方 HTML 编辑器。您在上面看到的 HTML 示例是由我的简单 HTML 编辑器创建的：

一个基本的 HTML 编辑器可以是一个<div contenteditable="true"></div>. 它支持常用的键盘快捷键，如Ctrl+B使选择加粗，Ctrl+I使选择斜体，Ctrl+U使选择带下划线，Ctrl+A选择所有文本，Ctrl+C复制选择，Ctrl+X剪切选择，Ctrl+V粘贴选择，Ctrl+L插入链接。

要对HTML编辑器对于Web应用程序更好的用户体验，您可以使用document对象和使用它的execCommand方法，轻松地运行命令一样Bold，Italic，Underline，InsertOrderedList，InsertUnorderedList，InsertImage，FormatBlock，ForeColor，BackColor，等。

在这里，我将分享一个 C# 应用程序示例，并向您展示如何轻松实现 HTML 编辑器：

public class HtmlEditor
{
    WebBrowser webBrowser;
    private dynamic doc;
    private dynamic contentDiv;
    public HtmlEditor(WebBrowser webBrowserControl, string htmlContent)
    {
        webBrowser = webBrowserControl;
        webBrowser.DocumentText = @"<div contenteditable=""true""></div>";
        webBrowser.DocumentCompleted += (s, e) =>
        {
            doc = webBrowser.Document.DomDocument;
            contentDiv = doc.getElementsByTagName("div")[0];
            contentDiv.innerHtml = htmlContent;
        };
    }
    public string HtmlContent => contentDiv.InnerHtml;
    public void Bold() { doc.execCommand("bold", false, null); }
    public void Italic() { doc.execCommand("italic", false, null); }
    public void Underline() { doc.execCommand("underline", false, null); }
    public void OrderedList() { doc.execCommand("insertOrderedList", false, null); }
    public void UnorderedList() { doc.execCommand("insertUnOrderedList", false, null); }
    public void ForeColor(Color color)
    {
        doc.execCommand("foreColor", false, ColorTranslator.ToHtml(color));
    }
    public void BackColor(Color color)
    {
        doc.execCommand("backColor", false, ColorTranslator.ToHtml(color));
    }
    public void InsertImage(Image image)
    {
        var bytes = (byte[])new ImageConverter().ConvertTo(image, typeof(byte[]));
        var src = $"data:image/png;base64,{Convert.ToBase64String(bytes)}";
        doc.execCommand("insertImage", false, src);
    }
    public void Heading(Headings heading)
    {
        doc.execCommand("formatBlock", false, $"<{heading}>");
    }
    public enum Headings { H1, H2, H3, H4, H5, H6 }
}

要使用这个 HTML Editor 类，只需在 aWebBrowser上有一个控件Form并以这种方式初始化编辑器就足够了：

HtmlEditor editor;
private void Form1_Load(object sender, EventArgs e)
{
    var html = @"Some html content";
    editor = new HtmlEditor(webBrowser1, html);
}

然后您可以使用 aToolStrip来显示可用命令并运行这些命令。例如：

private void OrderedListButton_Click(object sender, EventArgs e)
{
    editor.OrderedList();
}

private void ImageButton_Click(object sender, EventArgs e)
{
    using (var ofd = new OpenFileDialog())
    {
        ofd.Filter = "Image files|*.png;*.jpg;*.gif;*.jpeg;*.bmp";
        if (ofd.ShowDialog() == DialogResult.OK)
        {
            using (var image = Image.FromFile(ofd.FileName))
            {
                editor.InsertImage(image);
            }
        }
    }
}

Answer 2

您可以使用 Base64 将图像转换为文本，例如：

var image = File.ReadAllBytes("image.jpg");

var base64String = Convert.ToBase64String(image);

您可以再次将其转换回图像：

var image = Convert.FromBase64String(base64String);

File.WriteAllBytes("image.jpg", image);

您只需要弄清楚如何将您的文本作为一个整体拆分/连接...

Answer 3

也许这篇关于将序列化数据存储到 SQL 的文章会对您有所帮助。

http://aspalliance.com/1093_Serialization_in_Database.a[^ ]

您可以使用图像和字符串创建一个类，并将其设置为[可序列化]，并插入此序列化数据，如通过文章链接执行的那样。

并检索序列化数据并将其转换回原始类。