0

HTML 5 キャンバスを使用して、作成したクーポンの jpg バージョンを吐き出すクーポン作成システムを作成しましたが、完成した jpg をサーバーでホストしていないため、URL を取得するのに問題があります。一部のブラウザーでは、画像をアドレス バーにドラッグすると、アドレス バーに "data:" しか表示されません。しかし、Windows では、それを入力フィールドにドラッグすると、巨大な (>200 文字) ローカル一時 URL が吐き出されることがあります。javascript(?) を使用して、クーポン作成者によって生成された画像の正確な一時 URL を見つけ、それを同じページの入力フォームに投稿できるようにするにはどうすればよいですか? また、URLの取得と相関していると思われるので、これに対する答えも知っていれば非常に役に立ちます。生成された後に「保存してください」というリンクをクリックすると、作成したイメージをユーザーのコンピューターに保存するにはどうすればよいですか? どうもありがとう！

これは、画像を生成するために現在 JS で使用しているものです。

              function letsDo() {
                html2canvas([document.getElementById('coupon')], {
                    onrendered: function (canvas) {
                        document.getElementById('canvas').appendChild(canvas);
                        var data = canvas.toDataURL('image/jpeg');
                        // AJAX call to send `data` to a PHP file that creates an image from the dataURI string and saves it to a directory on the server

                        var mycustomcoupon = new Image();
                        mycustomcoupon.src = data;
                        //Display the final product under this ID
                        document.getElementById('your_coupon').appendChild(mycustomcoupon);
                        document.getElementById('your_coupon_txt').style.display="block";
                    }
                });
              }

作成者のライブ URL は次のとおりです: http://isleybear.com/coupon/

4

1 に答える 1

0

このコードを上記のjsにダンプすることになりました。それはかなり簡単な修正でした。それをテストするために、onclick html 要素を設定してソースを表示します。

var mycustomcoupon = document.getElementById('your_coupon');
mycustomcoupon.src = data;

}
});
}


function showSource(){

var source = document.getElementById('your_coupon').src;
                        alert(source);
}
于 2014-02-19T01:05:45.800 に答える