将SVG dataUrl转换为base64

Convert SVG dataUrl to base64

本文关键字：base64 转换 dataUrl SVG      更新时间：2023-09-26

我使用插件(dom-to-image)从div生成SVG内容。它返回一个dataURL，像这样:

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

如果a把它放在<img src上，图像显示为正常

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

有可能吗?

我尝试了这个解决方案https://stackoverflow.com/a/28450879/1691609但不能去工作。控制台触发关于dataUrl

的错误。

类型错误:在'XMLSerializer'上执行'serializeToString'失败:参数1不是'Node'类型。

====更新::问题解释/历史====

我使用Ionic Framework，所以我的项目是一个移动应用程序。dom-to-image是已经工作了，因为现在，它通过toPng函数渲染PNG。问题是栅格PNG是模糊的。

所以我想:也许SVG会有更好的质量。事实确实如此!!事实上，它100%完美。

在Ionic上，我使用2步过程来保存图像。在获得dom-to-img(base64) dataURL生成的PNG后，我将其转换为Blob，然后保存到设备中。这是工作，但最终的结果，如我所说，是模糊的。

那么使用SVG可能会更"高质量"。

因此，为了在已经工作的过程中做"最小"更改:D我只需要将SVG转换为base64 dataURL....

或者，正如你们中的一些人向我解释的那样，变成别的东西，比如画布……我知道的不多:/

= = =很抱歉发了这么长的帖子，我真的，真的感谢你们的帮助!!

几年后编辑

  • 使用JS fiddle作为工作示例:https://jsfiddle.net/msb42ojx/
  • 注意，如果你不拥有DOM内容(图像)，并且这些图像没有为每个人启用CORS (Access-Control-Allow-Origin头)，画布不能渲染这些图像

我不是在试图找出为什么你的案例不起作用，这是当我有类似的事情时我是怎么做的:

  • 获取图像源(dom-to-image result)
  • 设置一个包含该图像的画布(使用图像源)
  • 从画布上下载你喜欢的图片: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>

我将@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);

相关文章：