5

ユーザーがテキスト領域に貼り付けたいくつかの行からテーブルを生成する（phpを使用してテーブルをエコーアウトする）Webサイトがあります。クライアントがこのテーブルを自分のマシンに保存できるようにしたいと思います。これは私がこれまでに見つけたものですhttp://html2canvas.hertzen.com/ですが、使い方がわかりません。また、将来的には「Facebookで共有」ボタンを付けて、画像がFacebookアカウントにアップロードされるようにしたいと思います。

Googleを2日間検索しましたが、結果はありませんでした。php関数のように、クライアントマシンではなくサーバーに画像が保存されました。どんな助けでも大歓迎です。

4

2 に答える 2

2

そのためにキャンバスを使用できます。すべてのデータをキャンバスに配置するだけで、出力が画像として得られます。より良い例はここにあります

<html>
<body>
<style type="text/css">
table
{
border=5;
}
</style>
<p><canvas id="canvas" style="border:2px solid black;" width="500" height="500"></canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var data = "<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>" +
             "<foreignObject width='100%' height='100%'>" +
               "<div xmlns='http://www.w3.org/1999/xhtml' style='font-size:40px'>" +
                 "<table><tr><td>HI</td><td>Welcome</td></tr><tr><td>Hello</td><td>World</td></tr> </table>" +
               "</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;
</script>
</body>
</html>
于 2012-11-02T06:39:39.123 に答える
0

PHP GD外出先で画像を作成するために使用します。

Content-type: image/pngこれを使用すると、php ファイルが呼び出されたときにヘッダー タイプが返されます。(注: ヘッダー タイプを image/png に定義しているため、この php では画像と共に html を返すことはできません)

または、テーブルをサポートする pdf ファイルを生成することもできます。PDF を生成するのに最適なライブラリは、ここFPDF で fpdf のテーブル生成の例を参照してください。

リンク:

PHPGD

FPDF

于 2012-11-02T05:13:58.653 に答える