0

私は次のコードを持っています:

function createImage(source) {                
var pastedImage = new Image();                
pastedImage.onload = function() {                                        
document.write('<br><br><br>Image: <img src="'+pastedImage.src+'" height="700" width="700"/>');                                                                                                         
}
pastedImage.src = source;                
}

ここでは、document.write に記述した html 画像タグを介して画像を表示し、画像に適切な高さと幅を提供しています。

私の質問は、html img タグの代わりにキャンバスに画像を表示できるかどうかです。必要に応じてその画像をドラッグしてトリミングできるようにします。

しかし、どうすればキャンバスに表示できますか?

さらに、PHPを使用してその画像を保存することを実装したいのですが、今のところ、以前の問題についてお知らせください。

前もって感謝します。

4

2 に答える 2

1

を使用し CanvasRenderingContext2D.drawImageます。

function createImage(source) {                
  var ctx = document.getElementById('canvas').getContext('2d');
  var pastedImage = new Image();
  pastedImage.onload = function(){
    ctx.drawImage(pastedImage, 0, 0);
  };
  pastedImage = source;
}

また、MDNには良い例があるようです。

于 2012-06-04T06:33:27.183 に答える
1

これを試して

 var ctx = document.getElementById('canvas').getContext('2d');

    var img = new Image();   // Create new img element  
    img.onload = function(){  
      // execute drawImage statements here  This is essential as it waits till image is loaded before drawing it.
 ctx.drawImage(img , 0, 0);

    };  
    img.src = 'myImage.png'; // Set source path

画像がサイトと同じドメインでホストされていることを確認してください。Javascript Security Restrictions Same Origin Policyについては、こちらをお読みください。

たとえば、サイトがhttp://example.com/の場合、画像はhttp://example.com/../myImage.png でホストする必要があります。

http://facebook.com/..image/などを試すと、セキュリティ エラーがスローされます。

于 2012-06-04T06:59:11.830 に答える