8

我正在尝试将使用 Raphael.js 生成的 svg 转换为 PNG 图像。好吧,当 svg 没有图案和图像组件时,我将 svg 转换为图像。然后,当我将这两个组件添加到 SVG 中时,再次出现问题并且转换失败。完整的小提琴就 在这里。即使我保存生成的 svg 并在浏览器中打开而不转换为图像,也不会渲染图像和图案。

代码片段是:

var r = Raphael(document.getElementById("cus"), 390, 253);
    r.setViewBox(-5, -2, 228, 306);
    for (var outline in doorMatOutline) {
        var path = r.path(doorMatOutline[outline].path);
        //path.attr({fill: 'url('+patternuri+')'}); //adding pattern        
    }
    //adding image
    var img = r.image(imageuri, 5 ,10 ,100 ,100);

    var svg = $('#cus').html().replace(/>\s+/g, ">").replace(/\s+</g, "<");

    canvg('cvs', svg, {
        ignoreMouse: true,
        ignoreAnimation: true
    });

    var canvas = document.getElementById('cvs');
    var img = canvas.toDataURL("image/png");

    $("#resImg").attr('src', img);
    $("#cus").hide();
4

1 回答 1

4

我在这里解决了这个问题http://jsfiddle.net/fktGL/1/,首先我必须将 svg 属性从

xmlns="http://www.w3.org/2000/svg"

xmlns:xlink="http://www.w3.org/1999/xlink"

因为 svg 没有在 W3C 验证服务上进行验证,这里有一个 stackoverflow 说明需要进行更改。

然后我不得不添加一些超时以允许 SVG 正确渲染。我知道这是因为图像已在 SVG 和画布中绘制,但两者都需要一些时间来渲染图像。我的解决方案在较慢的设备上无法完美运行(增加超时会有所帮助),但我不知道另一种解决方法(欢迎任何评论/改进)。

这是最后的片段

var r = Raphael(document.getElementById("cus"), 390, 253);
r.setViewBox(-5, -2, 228, 306);
for (var outline in doorMatOutline) {
    var path = r.path(doorMatOutline[outline].path);
    path.attr({
        fill: 'url(' + patternuri + ')'
    });
}

$('#cus svg').removeAttr('xmlns');

// If not IE
if(/*@cc_on!@*/false){
    $('#cus svg').attr('xmlns:xlink',"http://www.w3.org/1999/xlink");
}


// First timeout needed to render svg (I think)
setTimeout(function(){ 
    var svg = $('#cus').html();
    window.svg = svg;
    canvg(document.getElementById('cvs'), svg);
    // annother delay required after canvg
    setTimeout(function(){
        var canvas = document.getElementById('cvs'),
            img = canvas.toDataURL("image/png");
        $("#resImg").attr('src', img);
        //$("#cus").hide();
        console.log("ending... ");
    },100)
},100);
于 2013-05-24T13:34:51.450 回答