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

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+"'/>");
        });

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

任何帮助或建议，将不胜感激！

Answer 1

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

莱昂

Answer 2

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

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

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上传图片，请阅读本文： 链接