canvas.toDataURL('image/svg+xml') returning "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>`
`get or create an SVG element <\/li>`

`type base64 URL string`

for example, download the image an so on.
<\/h2> const userName = "xgqfrms"; const watermark = ` <svg xmlns="http:\/\/www.w3.org\/2000\/svg" version="1.1" id="svg" viewBox="0 0 100 100" width="100" height="100"> <text x="25" y="50" fill="#00ff00">${userName}<\/text> <\/svg> `; const app = document.querySelector(`#app`); app.insertAdjacentHTML('beforeend', watermark); const svgElement = document.querySelector(`#svg`); \/\/ console.log(`svgElement =`, svgElement); const svgURL = new XMLSerializer().serializeToString(svgElement); \/\/ console.log(`svgURL =`, svgURL); const imgSrc = `data:image\/svg+xml;base64,${window.btoa(svgURL)}`; console.log(`imgSrc =`, imgSrc); const img = document.querySelector(`#img`); img.src = imgSrc;<\/code><\/pre> #app > svg { visibility: hidden; width: 0; height: 0; } #app { width: 100vw; height: 100vh; min-width: 1366px; min-height: 768px; overflow-x: hidden; overflow-y: auto; }<\/code><\/pre> <!DOCTYPE html> <html lang="zh-Hans"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta name="author" content="xgqfrms"> <meta name="generator" content="VS code"> <title>js canvas to base64 svg image<\/title> <\/head> <body> <main id="app"> <img id="img" src=""\/> <\/main> <\/body> <\/html><\/code><\/pre> <\/h2>https:\/\/codepen.io\/xgqfrms\/pen\/YzEzmxw<\/a> "

<\/h2>
https:\/\/codepen.io\/xgqfrms\/pen\/YzEzmxw<\/a>
"

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

Question

2 answers

solution1
0 2019-12-09 11:51:51

solution2
0 2022-01-26 12:27:44

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

Question

2 answers

solution1 0 2019-12-09 11:51:51

solution2 0 2022-01-26 12:27:44

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

steps<\/h2>

<\/h2>https:\/\/codepen.io\/xgqfrms\/pen\/YzEzmxw<\/a> "

solution1
0 2019-12-09 11:51:51

solution2
0 2022-01-26 12:27:44

<\/h2>
https:\/\/codepen.io\/xgqfrms\/pen\/YzEzmxw<\/a>
"