將 SVG dataUrl 轉換為 base64

Question

我正在使用插件（dom-to-image）從 div 生成 SVG 內容。 它返回一個像這樣的 dataURL：

data image/xml, charset utf-8, <svg...

如果將它放在<img src ，圖像將正常顯示。

目的是獲取此 dataURL，將其轉換為 base64，以便我可以將其保存為移動應用程序上的 image.png。

有可能嗎？

我嘗試了這個解決方案https://stackoverflow.com/a/28450879/1691609但無法開始工作。 控制台觸發有關 dataUrl 的錯誤

類型錯誤：無法在“XMLSerializer”上執行“serializeToString”：參數 1 不是“節點”類型。

==== 更新 :: 問題說明/歷史 ====

我正在使用 Ionic 框架，所以我的項目是一個移動應用程序。 dom-to-image 現在已經開始工作了，它通過toPng函數渲染了一個 PNG。 問題是光柵PNG是模糊的。

所以我想：也許 SVG 會有更好的質量。 它是！！ 實際上，它是 100% 完美的。

在 Ionic 上，我使用兩步程序來保存圖像。 得到dom-to-img(base64) dataURL生成的PNG后，我將其轉換為Blob，然后保存到設備中。 這是有效的，但正如我所說，最終結果是模糊的。

然后使用 SVG 也許它會更“高質量”。

因此，為了對已經在工作的進程進行“最小”更改：DI 只需要將 SVG 轉換為 base64 dataURL ....

或者，正如你們中的一些人向我解釋的那樣，進入其他東西，比如畫布......我不太了解：/

===

很抱歉發表這么長的帖子，我真的非常感謝你們的幫助！！

Answer 1

稍后編輯YARS

• 使用 JS 小提琴作為一個工作示例： https : //jsfiddle.net/msb42ojx/
• 請注意，如果您沒有 DOM 內容（圖像），並且這些圖像沒有為所有人啟用 CORS（Access-Control-Allow-Origin 標頭），則畫布無法渲染這些圖像

我不是想找出為什么你的案例不起作用，這是我在做類似事情時的做法：

• 獲取圖像源（dom-to-image 結果）
• 設置一個包含該圖像的畫布（使用圖像源）
• 從畫布下載您喜歡的任何圖像的圖像：png，jpeg 任何

順便說一下，您可以將圖像大小調整為標准格式

 document.getElementById('mydownload').onclick= function(){ var wrapper = document.getElementById('wrapper'); //dom to image domtoimage.toSvg(wrapper).then(function (svgDataUrl) { //download function downloadPNGFromAnyImageSrc(svgDataUrl); }); } function downloadPNGFromAnyImageSrc(src) { //recreate the image with src recieved var img = new Image; //when image loaded (to know width and height) img.onload = function(){ //drow image inside a canvas var canvas = convertImageToCanvas(img); //get image/png from convas var pngImage = convertCanvasToImage(canvas); //download var anchor = document.createElement('a'); anchor.setAttribute('href', pngImage.src); anchor.setAttribute('download', 'image.png'); anchor.click(); }; img.src = src; // Converts image to canvas; returns new canvas element function convertImageToCanvas(image) { var canvas = document.createElement("canvas"); canvas.width = image.width; canvas.height = image.height; canvas.getContext("2d").drawImage(image, 0, 0); return canvas; } // Converts canvas to an image function convertCanvasToImage(canvas) { var image = new Image(); image.src = canvas.toDataURL("image/png"); return image; } }

 #wrapper{ background: red; color: blue; }

 <script src="https://rawgit.com/tsayen/dom-to-image/master/src/dom-to-image.js"></script> <button id='mydownload'>Download DomToImage</button> <div id="wrapper"> <img src="http://i.imgur.com/6GvKdxY.jpg"/> <div> DUDE IS WORKING</div> <img src="http://i.imgur.com/6GvKdxY.jpg"/> </div>

Answer 2

我將@SilentTremor 的解決方案翻譯成 React/JS-Class：

class SVGToPNG {
  static convert = function (src) {
    var img = new Image();

    img.onload = function () {
      var canvas = SVGToPNG.#convertImageToCanvas(img);
      var pngImage = SVGToPNG.#convertCanvasToImage(canvas);

      var anchor = document.createElement("a");
      anchor.setAttribute("href", pngImage.src);
      anchor.setAttribute("download", "image.png");
      anchor.click();
    };

    img.src = src;
  };

  static #convertImageToCanvas = function (image) {
    var canvas = document.createElement("canvas");
    canvas.width = image.width;
    canvas.height = image.height;
    canvas.getContext("2d").drawImage(image, 0, 0);
    return canvas;
  };

  static #convertCanvasToImage = function (canvas) {
    var image = new Image();
    image.src = canvas.toDataURL("image/png");
    return image;
  };
}

export default SVGToPNG;

用法：

let dataUrl = someCanvas.toDataURL("image/svg+xml");
SVGToPNG.convert(dataUrl);