4

ページにキャンバス要素があります。その上に画像とユーザーが入力したデータを描画します。ボタンを押すだけで、キャンバスをプリンターに送り、紙に印刷します。このプラグインを使用しようとしました: jQuery.printElement、そのように:

ボタンコード:

<a href="javascript:print_voucher()">PRINT</a>

'print_voucher()' 関数:

function print_voucher()
{
    $("#canvas_voucher").printElement();
}

canvas_voucher はキャンバス要素の ID です。ページは印刷されましたが、キャンバスは印刷されませんでした。私もそのように使用しようとしました：

$("#canvas_voucher img").printElement();

しかし、それでもプリンターは起動しませんでした。

では、どうすればそれを行うことができますか？キャンバスの内容を印刷するにはどうすればよいですか?

**編集** キャンバスを作成し、それを使用して画像を作成しようとするコードは次のとおりです。

function create_voucher(visitor_name, visitor_identity_num, unique_number)
{
var canvas = $("#canvas_voucher")[0];
if (canvas.getContext)
{
    var ctx = canvas.getContext('2d');

    // Draw image
    var img = new Image();
    img.src = 'https://someurl.com/image.jpg';

    img.onload = function(){
        ctx.drawImage(img,0,0);
        ctx.fillStyle="#CCC";
        ctx.font="bold 20px Arial";
        ctx.fillText(visitor_name, 750, 270);
        ctx.fillText(visitor_identity_num, 750, 295);

        ctx.font="bold 25px Arial";
        ctx.fillText(unique_number, 620, 325);
    }
    var voucher = canvas.toDataURL("image/png");
    $("#voucher_img").attr("src", voucher);
} else {
    alert('You need Safari or Firefox 1.5+ to see this.');
}

}

4

2 に答える 2

4

問題を見つけて修正しました。どうやら、この行でセキュリティ上の問題があったようです:

img.src = 'https://someurl.com/image.jpg';

サーバーを指すようになると、潜在的なセキュリティ脅威と見なされました。だから私はそれを次のように変更しました：

img.src = 'images/image.jpg';

その後、キャンバスから画像を作成する関数を作成し、「img.onload」部分内で呼び出しました。

...
img.onload = function(){
    ctx.drawImage(img,0,0);
    ctx.fillStyle="#CCC";
    ctx.font="bold 20px Arial";
    ctx.fillText(visitor_name, 750, 270);
    ctx.fillText(visitor_identity_num, 750, 295);
    ctx.font="bold 25px Arial";
    ctx.fillText(unique_number, 620, 325);
    draw_voucher_img();
...

function draw_voucher_img()
{
   var canvas = $("#canvas_voucher")[0];
   var voucher = canvas.toDataURL();
   $("#voucher_img").attr("src", voucher);
}

今それは働いた！

于 2013-06-09T18:08:48.727 に答える