1

基本的に、キャンバスの「http：// ... .png」または「http：//....jpg」の場所を画像として取得したいだけです。

すでにtoDataURL（）を試しましたが、機能していません。特に、キャンバス内に画像を読み込んだ場合。

これが私のコードです:(ところで、私はここでjQueryを使用しています）

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
 var canvas = $("#canvas");
 var ctx = canvas.get(0).getContext("2d");

 var image1 = new Image();
 image1.src = "http://www.helpinghomelesscats.com/images/cat1.jpg"
 $(image1).load(function(){
   ctx.drawImage(image1,0,0,200,200);
 });

});
</script>

私のhtml/bodyにはこれしかありません：

<canvas id="canvas" width="500" height="400"></canvas>

今、あなたがそれを試してみると、それはうまくいきます。それはその猫を示しています。

しかし、そのtoDataURLをスクリプトに追加しても、それは起こりません。

var dataImg = canvas.get(0).toDataURL();

このdataImg変数を別のクリックリダイレクト関数にロードしてテストします。含まれているbase64URLを使用してページにリダイレクトされることを期待していますが、機能しません。

$("#canvas").click(function(){
  document.location = dataImg;
});

それは私を空白のページに連れて行きますか？私はここで何が欠けていますか？

どうもありがとうございます！

4

1 に答える 1

1

http://www.helpinghomelesscats.comを所有していますか、それともコードがそのサイトで直接ホストされていますか？そうでない場合は、クロスサイトオリジンポリシーのためにこれを行うことができません。最善の方法は、サーバー側のコードで画像を取得してから、ドメインでローカルに提供することです。

ここでテストしたように、helpinghomelesscats.comを所有している場合、これは機能するはずです。

ライブデモ

応答を確認するには、キャンバスをクリックしてログを表示します。

于 2012-09-12T16:52:18.923 に答える