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

Question

我正在嘗試將畫布導出到 svg 。 但 toDataURL 函數將數據返回為“data:image\/png;base64...”

我不想使用復雜的函數\/庫。<\/em>

如果有人也可以修改它，我正在使用以下內容，這對我有幫助

             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

<canvas> 元素只包含一個像素緩沖區。
盡管 2D API 主要基於矢量圖，但實際內容只是光柵。

導出到 svg 不是任何主流瀏覽器的選項。

這意味着您的'image/svg+xml'不會在任何地方被識別，實際上它們會回退到image/png 。

你說你不想使用復雜的函數/庫，所以讓我們說你運氣不好，因為解決方案意味着覆蓋所有的繪圖操作以構建可以映射到 SVG 元素的路徑，這是並不簡單，（即使大部分都是可行的，除了 ImageData 像素操作）。
如果你真的想這樣做，那么你可能想看看一些庫，這個似乎只是為了這個目的，所以我希望它足夠輕量級和高性能，雖然我自己從未使用過它， fabricjs有這樣的也是一個選項，但我們顯然屬於重量級類別。

Answer 2

我的 vanilla js 解決方案可能會對您有所幫助，而無需使用canvas.toDataURL<\/code>方式<\/h2>腳步<\/h2> 獲取或創建 SVG 元素 <\/li> 使用XMLSerializer().serializeToStrin()<\/code>序列化方法獲取 SVG 字符串使用window.btoa()<\/code>方法將 SVG 字符串轉換為 base64 字符串手動創建data:image\/svg+xml;<\/code> 輸入 base64 URL 字符串然后做你想做的事；例如，下載圖像等等。源代碼<\/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') 返回 "data:image/png;base64..."

問題描述

2 個解決方案

解決方案1
0 2019-12-09 11:51:51

解決方案2
0 2022-01-26 12:27:44

canvas.toDataURL(&#39;image/svg+xml&#39;) 返回 &quot;data:image/png;base64...&quot;

問題描述

2 個解決方案

解決方案1 0 2019-12-09 11:51:51

解決方案2 0 2022-01-26 12:27:44

我的 vanilla js 解決方案可能會對您有所幫助，而無需使用canvas.toDataURL<\/code>方式<\/h2>腳步<\/h2>

腳步<\/h2>

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

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

解決方案1
0 2019-12-09 11:51:51

解決方案2
0 2022-01-26 12:27:44

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