1

画像をHTML5Canvasに読み込もうとしています。URLを使用して画像を読み込むと、すべて正常に機能しますが、画像をローカルドライブに配置してポイントすると、何も起こりません。

注：通常のタグを使用すると、すべてが正常に機能し、画像が読み込まれます。

コードは次のとおりです。

  var canvas = document.getElementById("rightSide");
    var context = canvas.getContext("2d");
    var imageObj = new Image();
    imageObj.src = "cloud.gif";
    context.drawImage(imageObj, 650, 55, 93, 104);

<canvas id = "rightSide" width = "800px" height = "800">

ありがとう。

4

2 に答える 2

9

このようなことを試してください。

<canvas id="canvas"></canvas>

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

var img = new Image();
img.onload = function(){
    can.width = img.width;
    can.height = img.height;
    ctx.drawImage(img, 0, 0, img.width, img.height);
}
img.src = 'image.jpg';
于 2012-05-21T11:27:30.500 に答える
0

キャンバスにロードされているローカルファイルは、別のソースからのものとして扱われるため、「汚染」されています。これが、ローカルファイルでは機能しないが、URLでは機能する理由です。

于 2012-05-21T11:35:11.450 に答える