我正在尝试将使用 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();