drawImage到Canvas - Chrome

时间:2017-02-09 10:52:29

标签: javascript google-chrome canvas svg

我有将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);

导出的图片(Firefox):enter image description here

铬:enter image description here

在chrome中的图像是&#34;未加载img&#34;。两个月前,om chrome工作得很好。

如果我发表评论ctx.drawImage(imgs, images[i].x.baseVal.value, images[i].y.baseVal.value... 然后: Chrome

0 个答案:

没有答案