canvas.toDataURL('image/svg+xml') 返回 "data:image/png;base64..."

Question

I am trying to export the canvas into svg . but the toDataURL function returning the data as "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

The <canvas> element only holds a pixels buffer.
Even though the 2D API is mostly based on vector drawings, the actual content is only raster.

Exporting to svg is not an option in any mainstream browser.

This means that your 'image/svg+xml' will not be recognized anywhere and indeed they will fallback to image/png .

You said you don't want to use complex function/library, so let's just say you're out of luck, because the solutions implies to overwrite all the drawing operations in order to build pathes that can be mapped to SVG elements, which is not straightforward, (even if all is mostly doable, except ImageData pixel manips).
If you really want to do this, then you may want to have a look at some libraries, this one seems to be made only for this purpose, so I hope it's lightweight an performant enough, though I never used it myself, fabricjs has such an option too, but then we're clearly in the heavy-weighted category.

Answer 2

my vanilla js solution may help you, without using the canvas.toDataURL<\/code> way<\/h2>

steps<\/h2>

1. get or create an SVG element

   <\/li>