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

レンダリングされたグラフィックで、テキストラベルが小さすぎて単語を収容できない可能性があります。これはおそらく、キャンバスがスケーリングとフォントサイズをどのように解釈するかに依存しますか？しかし、それは単なる推測です。

于 2012-10-16T15:19:26.413 に答える
1

フォント サイズをパーセンテージからピクセルに変更する必要がありました。font-size: 100%; でした。font-size: 34px に設定する必要がありました。

于 2012-10-18T16:49:55.687 に答える