如何将动态生成的图像保存到我的数据库？

Question

我有一个HTML页面，可以将用户的签名捕获为SVG。我将它在页面上转换为.png并将其放入图像容器中。

如何利用它进入数据库？我知道如何使用：<input type="file" />但我不知道如何将<img />元素传递给PHP。

这会将我的SVG更改为PNG

       $("#save").click(function(){
          var datapair = sigdiv.jSignature("getData", "svg");
          var i = new Image();
          i.src = "data:" + datapair[0] + "," + datapair[1];
          $(i).appendTo($("#outputSvg"));

          var canvas = document.getElementById("canvas");

          canvg(canvas, datapair[1]);

          var img = canvas.toDataURL("image/png");
          $("#outputRaster").append("<img src='"+img+"'/>");
        });

如何在<img />中获取我生成的<div id='outputRaster'>标记并将其传递给我的PHP？我知道如何将它放入数据库，它实际上只是将我的视图层中的图像传送到我的PHP页面，该页面仅用于数据访问。

非常感谢任何帮助或建议！

Answer 1

将图像另存为文件。 将文件路径存储在数据库中。

列昂

Answer 2

如果您正在谈论图像本身，请查找BLOB（它们代表二进制大对象）。它们是在数据库中存储大型二进制数据的方法。

如果您正在谈论这些标签，您可以像存储任何其他文本一样存储它们。

Answer 3

假设您只需要保存图像的路径（您的图像存储在服务器中，或者您正在从互联网上使用它。）

   $("#save").click(function(){
      var datapair = sigdiv.jSignature("getData", "svg");
      var i = new Image();
      i.src = "data:" + datapair[0] + "," + datapair[1];
      $(i).appendTo($("#outputSvg"));

      var canvas = document.getElementById("canvas");

      canvg(canvas, datapair[1]);

      var img = canvas.toDataURL("image/png");
      $("#outputRaster").append("<img src='"+img+"'/>");
      imageTag = "<img src='"+img+"'/>";
      //$.ajax( {url : yourUrl , data: imageTag} );
    });

如果您需要使用jQuery上传图片，请阅读本文：link