首页 文章

将SVG dataUrl转换为base64

提问于
浏览
0

我正在使用插件(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的错误

TypeError:无法在'XMLSerializer'上执行'serializeToString':参数1不是'Node'类型 .

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

我正在使用Ionic Framework,所以我的项目是一个移动应用程序 . dom-to-image现在是 already working 因为它通过 toPng 函数渲染PNG . 问题是光栅PNG模糊不清 .

所以我想:也许SVG会有更好的质量 . 它是!!实际上它100%完美 .

在Ionic上,我使用两步程序来保存图像 . 获取由dom-to-img(base64)dataURL生成的PNG后,我将其转换为Blob,然后保存到设备中 . 这是有效的,但正如我所说,最终结果是模糊的 .

然后使用SVG可能会更加“高质量” .

因此,为了对已经运行的进程进行“最小”更改:D我只需要将SVG转换为base64 dataURL ....

或者,正如你们中的一些人向我解释的那样,还有其他的东西,比如画布......我不知道多少:/

===

对不起,很长的帖子,我真的非常感谢你的帮助!

1 回答

  • 2

    我不是要弄清楚为什么你的情况不起作用,这就是我做类似事情时的表现:

    • 获取图像质量(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>
    

相关问题