javascript - HTML から base64 文字列を作成する

Question

HTML ページの特定の DIV からスクリーンショットを作成する必要があります。このライブラリを使用しようとしました - http://html2canvas.hertzen.com/

html2canvas($(".element"), {
    onrendered: function(canvas) {
        console.log(canvas.toDataURL('image/jpeg'));
    }
});

しかし、一部の CSS に問題があり ( text-shadow など)、一部のテキストが見栄えがよくありません。また、画像が少しぼやけているようです。

他の解決策はありますか？

私のDIVには、背景画像とその上のテキストが含まれています。その背景画像を開いてテキストを配置するためにPHP GDライブラリを使用することを検討しましたが、テキストシャドウが再び発生し、方法がわかりません。

text-shadow を作成する CSS は次のようになります。

text-shadow: 0px 1px 0px rgba(0,0,0,0.2);

score 0 · Accepted Answer

html2canvas は、実際のスクリーンショットを撮るのではなく、キャンバスを使用して html 要素の外観を再作成します。そのため、正確に見えません (影など)。

ぼやけは、画像を jpeg として保存したことが原因である可能性が最も高く、代わりに png を試してください。

canvas.toDataURL('image/png')

score 0 · Accepted Answer

HTML5 Canvas はテキストシャドウイングをサポートしていますhttp://www.html5rocks.com/en/tutorials/canvas/texteffects/

使用しているライブラリが適切にサポートしていないか、CSS を検索していない可能性があります。

DIV マークアップと CSS を共有すると、ハードコーディングされた (特定の) 解決策にたどり着く可能性があります。

もう 1 つの方法は、 http://browsershots.orgのようなスクリーンショット Web サービスを使用することです。

必要な CSS と DIV だけを含む最小限の HTML ファイルを作成し、(PHP を使用して) Web ディレクトリに保存します。次に、その URL を Web サービスに渡し、応答として画像 (スクリーンショット) を取得します。

score 0 · Accepted Answer

私は数ヶ月前にこのようなことをしました。私はこのライブラリを使用しました：

それは使いやすく、仕事をしました。お役に立てば幸いです。

3 に答える 3