2

我有一个关于将 HTML 转换为图像的过程的问题。

我一直在使用类似于此处找到的代码片段的代码。

一切似乎都很好，除了我得到的图像将一些单词变成了破折号。因此，页面上可能会显示“提交”的内容现在会在图像中显示“-”。同样，可能会说“有建议吗？” 页面上的图像现在会显示“---”。否则，所有比例、格式和颜色都是正确的。我只是对某些文本有问题。我在 textarea 标签内的文本没有问题。 

function createImage() {

    var canvas = $('<canvas/>');
    var ctx = canvas[0].getContext("2d");
    var data = "<svg xmlns='http://www.w3.org/2000/svg' width='1000' height='1000'>" +
                 "<foreignObject width='100%' height='100%'>" +
                   "<div xmlns='http://www.w3.org/1999/xhtml'>" +
                     $("body").html() +
                   "</div>" +
                 "</foreignObject>" +
               "</svg>";
    var DOMURL = self.URL || self.webkitURL || self;
    var img = new Image();
    var svg = new Blob([data], { type: "image/svg+xml;charset=utf-8" });
    var url = DOMURL.createObjectURL(svg);
    img.onload = function () {
        ctx.drawImage(img, 0, 0);
        DOMURL.revokeObjectURL(url);
    };
    img.src = url;
    return img;
}

有没有人有任何想法？

4

2 回答 2

1

我不得不将字体大小从百分比更改为像素。字体大小：100%；我必须将其设置为字体大小：34px。

于 2012-10-18T16:49:55.687 回答
1

可能在渲染的图形中，文本标签太小而无法容纳单词。这可能取决于画布如何解释缩放和字体大小？但这只是一个猜测。

于 2012-10-16T15:19:26.413 回答