将 SVG dataUrl 转换为 base64

Question

我正在使用插件（dom-to-image）从 div 生成 SVG 内容。它返回一个像这样的 dataURL：

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

如果把这个放在一个<img src图像上，它会正常显示。

目的是获取此 dataURL，将其转换为 base64，以便我可以将其保存为移动应用程序上的 image.png。

是否可以？

我尝试了这个解决方案/sf/answers/1991561561/ 但无法开始工作。控制台触发有关 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>