Question

我对将HTML转换为图片的过程有疑问。

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

一切似乎都运转良好，除了我得到的图像已经将一些的单词变为破折号。因此，在页面上可能会说“提交”的内容现在会在图像中显示“ - ”。同样，可能会说“有建议吗？”在页面上现在会在图像中说“---”。否则，所有比例，格式和颜色都是正确的。我只对一些文字有疑问。我没有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;
}

有没有人有任何想法？

Answer 1

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

Answer 2

我不得不将字体大小从百分比更改为像素。它的字体大小：100％;我不得不将其设置为font-size：34px。

将DOM元素转换为图像：单词转换为破折号（jQuery，HTML5，SVG）

2 个答案: