HTMLキャンバスイメージ - ページにマルチキャンバスイメージを描画

キャンバスに問題があります。私は単一のイメージでキャンバスを描くことができますが、私はイメージごとに別のキャンバスを描画することはできません。 - データには1つのイメージしかない場合は正常に動作しますが、データに複数のイメージがある場合は動作しません。お手伝いできますか？HTMLキャンバスイメージ - ページにマルチキャンバスイメージを描画

<script> 
 
var h_notepad = 500; 
 
var w_notepad = 737; 
 
var data = [ 
 
    {dataImageURL: "1_sat_1.png"}, 
 
    {dataImageURL: "1_sat_2.png"}, 
 
    {dataImageURL: "1_sat_3.png"}, 
 
    {dataImageURL: "1_sat_4.png"} 
 
]; 
 
for(var i = 0; i < data.length ; i++){ 
 

 
    var canvas = document.createElement('canvas'); 
 
    var ctx = canvas.getContext('2d'); 
 
    var img = new Image(); 
 

 
    canvas.width = w_notepad; 
 
    canvas.height = h_notepad; 
 

 

 
    img.crossOrigin = 'anonymous'; 
 
    img.width = w_notepad; 
 
    img.height = h_notepad; 
 

 
    console.log(img); 
 
    img.onload = function(){ 
 
    ctx.drawImage(img, 0, 0, w_notepad, h_notepad); 
 
    }; 
 
    img.src = data[i].dataImageURL; 
 

 
    $('body').append(canvas); \t 
 
} 
 
</script>

<html> 
 
<head> 
 
<meta charset="utf-8"> 
 
<title>DRAWING</title> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<meta charset="utf-8"> 
 

 
</head> 
 
<body> 
 
\t 
 

 
</body> 
 
</html>

出典

2016-03-25 OMG Tran

私はあなたが最後のものだけを取得すると思います。クロージャの問題です。 onloadイベントが発生すると、 'img'と' ctx'は最後に生成されたものだけを参照します。つまり、同じキャンバスに 'data.length'時間を描画します。これを避けるには、 'this'を使用して、onloadハンドラでキャンバスの作成をラップします。\t' img.onload = function（）{ \t \t var c = document.createElement（ 'canvas'）; \t \t document.body.appendChild（c）; \t \t var ctx = c.getContext（ '2d'）; \t \t ctx.drawImage（this、0,0）; \t \t}; ' – Kaiido

私はあなたが最後のものを得ると思います。これは閉鎖の問題です。

loadイベントが発生すると、imgとctxは最後に作成されたイベントのみを参照します。

同じキャンバスにdata.length時間を描画します。

それを回避するには、thisを使用し、onloadハンドラではキャンバスの作成をラップすることができます：

var imgs = ['http://lorempixel.com/200/300/', 'http://lorempixel.com/500/300/', 'http://lorempixel.com/200/100/']; 
 

 
for (var i = 0; i < imgs.length; i++) { 
 

 
    var img = new Image(); 
 
    var width = 500; 
 
    var height = 300; 
 

 
    img.onload = function() { 
 
    var c = document.createElement('canvas'); 
 
    c.width = width; 
 
    c.height = height; 
 
    document.body.appendChild(c); 
 
    var ctx = c.getContext('2d'); 
 
    ctx.drawImage(this, 0,0, width, height); 
 
    }; 
 

 
    img.src = imgs[i]; 
 

 
}

出典

2016-03-25 11:29:52 Kaiido

問題はonloadが非同期であるということです。したがって、あなたのコードはすべてonloadのいずれかの関数が呼び出される前に実行されます。あなたの関数

img.onload = function(){ 
    ctx.drawImage(img, 0, 0, w_notepad, h_notepad); 
};

が最新ctxを使用して、このコンテキスト内のすべての画像をレンダリングする理由です。これは、変数を分離し、そこに画像を受け取るまでそこ値続ける

(function(ctx, img, w_notepad, h_notepad) { 
    img.onload = function(){ 
    ctx.drawImage(img, 0, 0, w_notepad, h_notepad); 
    }; 
})(ctx, img, w_notepad, h_notepad);

：あなたは何ができるか

は、同期機能スコープを持つこの非同期呼び出しをカバーしています。

出典

2016-03-25 11:26:11 smnbbrv

HTMLキャンバスイメージ - ページにマルチキャンバスイメージを描画

答えて

関連する問題