SVG 到 PNG 到 AJAX API 发布答案

【问题标题】：SVG to PNG to AJAX API postSVG 到 PNG 到 AJAX API 发布
【发布时间】：2017-04-25 03:34:17
【问题描述】：

我有一个相当大而复杂的 SVG 代码，它使用 JavaScript 和 jQuery 根据页面信息动态生成。

然后我有一个 AJAX 后保存。

我没有做些什么来将其转换为正确发布图像数据？

var canvas = $("#canvas")[0];
var string= canvas.toDataURL("image/png");
base64=string.replace("data:image/png;base64,", "");
var rid = kRid || "";
var fileN = " Product " + rid + ".png";
var req = "";
req += "<qdbapi>";
req += "<field fid='323' filename='" + fileN + "'>" + base64 + "</field>";
req += "</qdbapi>";
$.ajax({
  type: "POST",
  contentType: "text/xml",
  dataType: "xml",
  processData: false,
  //url altered 
  url: "https://removed.quickbase.com/db/removedDBID?act=API_EditRecord&rid=" + rid,
  data: req,
  success: function(responce) {
    //auto reload page
    var str = window.location.href;
    setTimeout(function() {
      window.location.href = str;
    }, 5000);
  }
})

这个想法来自我使用 else ware 获取当前 PNG 文件并移动它们的这段 sn-p 代码：

$.get(url, function(xml) {
  var promises = [];
  $("record", xml).each(function() {
        var url = $("f#9 url", this).text();
        xhr.responseType = "arraybuffer";
        xhr.onload = function() {
            var arrayBuffer = xhr.response;
            var base64 = btoa([].reduce.call(new Uint8Array(arrayBuffer), function(p, c) {
              return p + String.fromCharCode(c)
            }, ''))
            var req = "";
            req += "<qdbapi>";
            req += "<field fid='6' filename='" + name + "'>" + base64 + "</field>";
            req += "<field fid='54' >" + Rid + "</field>";
            req += "<field fid='44' >" + comment + "</field>";
            req += "</qdbapi>";

...然后是 AJAX 帖子。

我无法通过 PHP 执行此操作。

【问题讨论】：

您不应该盲目地将“==”附加到 base64 字符串的末尾。 Base64 编码意味着 3 个 src 字符变成 4 个输出字符。当输入长度不是 3 的倍数时，将使用 NULL (0x0) 对其进行填充。在此处查看更多信息：en.wikipedia.org/wiki/Base64#Output_Padding
我不是盲目地使用我之前的 ajax 脚本查看了大约 10 个其他格式为 png 的文件并将它们记录到控制台，每个文件的末尾都有“==”。
盲目地说，我的意思是不检查输入流长度。您检查的所有文件最后都有== 只是机会。根据使用的实际压缩程度，2 个具有相同尺寸的 png 显然可以具有不同的长度，因此，填充要求。

标签： javascript jquery ajax svg

【解决方案1】：

（代表 OP 发布）.

我忘了添加 == 来标记文件的结尾，所以：

var string= canvas.toDataURL("image/png");
string+="==";
base64=string.replace("data:image/png;base64,", "");

huzza 确实有效...

【讨论】：