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

Question

我的网页上有一个 Canvas ，允许用户签署他们的签名(使用 jSignature )。我使用 canvasg 将其转换为 png 客户端现在需要将其提交给 Quickbase。我已经知道如何将图像上传到 quickbase，但是我的问题是从我的 index.html 中的客户端代码获取文件页面，到我的服务器端代码 submit_signature.php .

        $("#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+"' name='image' />");
        });

jsFiddle

任何帮助将不胜感激!谢谢!

Answer 1

jSignature 的作者建议您不要将其保存为图像 (http://willowsystems.github.com/jSignature/#/about/)。

I know you are tempted to want "images" from jSignature, but, please, control yourself, and stay away. Instead, contemplate capturing "base30" or "svg" data and enhance + render that in postproduction, server-side.

他在下面陈述了一些原因。如果这些原因对您有意义并且您可以使用 ImageMagick，您可以考虑使用 jSignature 的 svg 插件并通过 AJAX 将结果发布到您的服务器。然后你可以使用这个问题的答案:Rendering an SVG file to a PNG or JPEG in PHP

如果您必须将图像作为 base64 编码的字符串上传到数据库中，并且其他选项不可用，jSignature 有一个图像导出插件可以为您将其转换为 base64。

default (EXPORT ONLY) (BITMAP) data format is compatible with output format jSignature produced in earlier versions when getData was called without arguments. "Default" is now invoked (obviously) by default whenever you $obj.jSignature("getData") The data format is that produced natively by Canvas - data-url-formatted, base64 encoded (likely PNG) bitmap data that looks like this: data:image/png;base64,i1234lkj123;k4;l1j34l1kj3j... This export call returns a single data-url-formatted string.