我有将svg转换为png的问题。我在Canvas上使用了drawImage。 代码:
ctx = canv.getContext('2d');
ctx.fillStyle = "#ffffff";
ctx.fillRect(0, 0, String(canv.width), String(canv.height));
ctx.fillStyle = "#435a6b";
ctx.font = "15px Georgia";
$.each(svgs, function (k, v) {
var svgURL = new XMLSerializer().serializeToString(svgs[k]);
img = new Image();
img.onload = function() {
if (subprocesses[k].name == '_main') {
ctx.fillText(workflowname, 10, offSetHeigth + 15);
} else {
ctx.fillText("Podproces: " + subprocesses[k].label, 10, offSetHeigth + 15 );
}
offSetHeigth = offSetHeigth + 15;
var height = svgs[iterator].style.minHeight.replace(/[^-\d\.]/g, '');
ctx.drawImage(this, 0, offSetHeigth);
var images = svgs[iterator].querySelectorAll('image');
for (var i = 0; i < images.length; i++) {
var imgs = new Image();
imgs.src = images[i].href.baseVal;
ctx.drawImage(imgs, images[i].x.baseVal.value, images[i].y.baseVal.value + offSetHeigth, images[i].width.baseVal.value, images[i].height.baseVal.value);
}
var link = document.createElement("a");
iterator++;
if (iterator == svgs.length) {
link.href = canv.toDataURL("image/png").replace(/^data:image\/[^;]/, 'data:application/octet-stream');
link.download = workflowname + ".png";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
$.ithrobber.hide_throbber();
link.remove();
$.each(svgs, function (k, v) {
svgs[k].remove();
});
}
offSetHeigth = offSetHeigth + Number(height);
};
img.src = 'data:image/svg+xml; charset=utf8, ' + encodeURIComponent(svgURL);
在chrome中的图像是&#34;未加载img&#34;。两个月前,om chrome工作得很好。
如果我发表评论ctx.drawImage(imgs, images[i].x.baseVal.value, images[i].y.baseVal.value...
然后: