Question

我正在尝试将画布导出到svg中。但是toDataURL函数返回的数据为“ data：image / png; base64 ...”

我不想使用复杂的功能/库。

如果有人也可以对其进行修改，我正在使用以下内容，这对我有帮助

             var dataURL=canvas.toDataURL('image/svg+xml');
             if (navigator.userAgent.indexOf("Safari") > -1 && 
             navigator.userAgent.indexOf("Chrome") === -1) {
                console.log(dataURL);
                window.open(dataURL);
              } else {
                 var parts = dataURL.split(';base64,');
                  var contentType = parts[0].split(":")[1];
                  var raw = window.atob(parts[1]);
                  var rawLength = raw.length;
                  var uInt8Array = new Uint8Array(rawLength);
                    console.log(uInt8Array);

                  for (var i = 0; i < rawLength; ++i) {
                    uInt8Array[i] = raw.charCodeAt(i);
                  }

                var blob = new Blob([uInt8Array], {type: "image/svg+xml;charset=utf-8"});
                var url = window.URL.createObjectURL(blob);

                var a = document.createElement("a");
                a.style = "display: none";
                a.href = url;
                a.download = orientation +".svg";

                document.body.appendChild(a);
                a.click();

                window.URL.revokeObjectURL(url);

Answer 1

在任何主流浏览器中都不可以导出到svg。

这意味着您的'image/svg+xml'在任何地方都不会被识别，实际上它们会退回到image/png。

您说过您不想使用复杂的函数/库，所以让我们说您不走运，因为解决方案意味着覆盖所有绘图操作以构建可映射到SVG元素的路径，这并不是一件容易的事（即使大部分操作都是可行的，除了ImageData像素操作）。
如果您确实想这样做，那么您可能想看看一些库，this one似乎仅是为此目的而设计的，因此尽管我从不< / strong>我自己使用过，fabricjs也有这样的选择，但显然我们在权重类别中。

canvas.toDataURL（'image / svg + xml'）返回“ data：image / png; base64 ...”

1 个答案: