Javascript 在画布上绘制图像-铬

我在将svg转换为png时遇到问题。我在画布上使用了drawImage。 代码：

ctx=canv.getContext（'2d'）；
ctx.fillStyle=“#ffffff”；
ctx.fillRect（0，0，字符串（canv.width），字符串（canv.height））；
ctx.fillStyle=“#435a6b”；
ctx.font=“15px格鲁吉亚”；
美元。每个（SVG，功能（k，v）{
var svgURL=new XMLSerializer（）.serializeToString（svgs[k]）；
img=新图像（）；
img.onload=函数（）{
if（子进程[k].name='\u main'）{
ctx.fillText（工作流名称，10，偏移高度+15）；
}否则{
ctx.fillText（“PODProcess:+子流程[k]。标签，10，偏移高度+15）；
}
偏移高度=偏移高度+15；
var height=svgs[iterator].style.minHeight.replace（/[^-\d\.]/g'）；
ctx.drawImage（此，0，偏移高度）；
var images=svgs[iterator].querySelectorAll（'image'）；
对于（var i=0；i

导出的图像（Firefox）：

铬：

在chrome的图片下方是“未加载img”。两个月前，om chrome运行良好

如果我注释

ctx.drawImage（imgs，images[i].x.baseVal.value，images[i].y.baseVal.value…

然后：

---

如果Chrome的bug跟踪器曾经运行过，请向它报告一个bug。这里的一个问题没有多大用处。

for（var i=0；i

您在这里遇到了问题。您的图像加载是异步的。当您调用

drawImage

时，它可能还没有加载，即使是缓存的。您必须听他们的onload事件侦听器。不，如果我对此进行了评论，我上一次加载了PNG。而chrome工作中的这段代码将于12月向chrome的bugtracker报告一个错误如果它曾经有用的话。这里的一个问题没有什么可以实现的。

for（var i=0；i

您在这里遇到了问题。您的图像加载是异步的。在您调用

drawImage

时，它可能还没有加载，即使是缓存的。您必须听他们的onload事件侦听器。不，如果我对此进行评论，我上一次使用PNG。这段代码是在12月份在chrome上运行的

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);