将 svg(in div) 保存为 png 或转换为 png。拉斐尔 JS答案

【问题标题】：Save svg(in div) to png or convert to png. Raphaël JS将 svg(in div) 保存为 png 或转换为 png。拉斐尔 JS
【发布时间】：2013-04-05 13:45:17
【问题描述】：

我是 Raphaël 和 javascript 的新手，遇到了一个问题，即如何使用 Javascript 将 svg（在 div 中）保存为 png。我读过可能的文章：比如使用canvg https://code.google.com/p/canvg/ 和canvas.toDataURL('image/png'); ..etc 但仍然不知道该怎么做。

我正在尝试在客户端将 qrcodesvg.js 输出 (http://vp-dev.net/qrcodesvg/) 转换为一些可下载/可读的 png/图像格式。有人可以给我一些提示，看看哪些或哪些基本参考资料？谢谢！

亲切的问候，

【问题讨论】：

Convert SVG to image (JPEG, PNG, etc.) in the browser的可能重复
谢谢你，罗伯特。但是我在发布这篇文章之前阅读了那篇文章（不能发布超过 2 个链接）。好的，我使用 Opera Dragonfly 找到了隐藏的 Html SVG 标签：<div id="qrcode"> <svg height="250" version="1.1" width="250" xmlns="http://www.w3.org/2000/svg" style="overflow:hidden;position:relative"> 我注意到 SVG 嵌套在 qrcode div 下，这是我无法获取 id 为 qrcode 的 SVG 的主要问题！
好的，更新如下：只需使用 getElementsByTagName document.getElementsByTagName('svg')[0].id = 'id_something'; 并设置带有 id 的 svg 标签，然后使用 canvg(canvas, svg); 和 var img_url = canvas.toDataURL('image/png'); 您将获得所需的 png 文件。我做对了吗？谢谢，

标签： html svg png raphael

【解决方案1】：

几天前我遇到了同样的问题。实际上，我需要转换包含图像的 svg：在这种情况下，我们必须手动导出 Base64 中的每个图像。但是，下面的 sn-p 也应该适用于您的情况。我使用 Raphael.Export 库来获取 SVG。

var svgData = r.paper.toSVG(), //Obtaining the SVG element
              parser = new DOMParser(),
              //converting the svg in a DOM object
              doc = parser.parseFromString(svgData, "text/xml");

//Getting all the images element in the SVG
var images = doc.querySelectorAll( "image" );
var canvas = document.createElement('canvas');

var ctx = canvas.getContext( "2d" );

var i, imgArr = new Array();
for(i=0; i<images.length; i++){
    //for each image element, i need to obtain its Base64 representation
    imgArr[i] = document.createElement("img");
    imgArr[i].setAttribute( "src", images[i].href.baseVal);

    imgArr[i].onload = function(i, images){
        return function() {
            ctx.drawImage( imgArr[i], 0, 0 );
            // Replace the image href with its base64 representation
            svgData = svgData.replace(images[i].href.baseVal,canvas.toDataURL( "image/png" ));
            //if i'm converting the last element, create the img result
            if(i==images.length-1){
                 var img = document.createElement('img'), canv = document.getElementById('myCanvas');
                     //generating the result svg image
                     img.setAttribute( "src", "data:image/svg+xml;base64," + btoa(svgData));
                     var context= canv.getContext( "2d" );

                     //when the img ready, we can obtain the png 
                     img.onload = function() {
                            context.drawImage( img, 0, 0 );
                            var canvasdata = canv.toDataURL("image/png");
                            var pngimg =  document.getElementById( "myImg" ); 
                            pngimg.setAttribute( "src", canvasdata);
                            //now pngimg contains the resulting image
                     };
            }
        }   
    }(i, images);
}

在您的 html 文档中，您需要一个带有 id="myImg" 的 img 标签

希望对你有帮助:)

【讨论】：