如何在畫布上逐一加載多個圖像？使用循環

var ImgCanvas = new fabric.Canvas("mycanvas"); 
var json = {}; 
var IdStore = []; 
var retval = []; 
var retvalsrc = []; 

function sava(){ 
//push to array for loop 
$('.Jicon').each(function(){ 
    retval.push($(this).attr('id')); 
    retvalsrc.push($(this).attr('src')); 
}) 


var className = $(".Jicon"); 
var classnameCount = className.length; 
//loop classname 
for(var d = 0; d < classnameCount; d++){ 
updateCanvas(retval[d], retvalsrc[d]); 
} 

} 


//change main image 
function updateCanvas(_id, _src) 
{  
ImgCanvas.clear(); 
// var oImg = new fabric.Image(_src, { 
fabric.Image.fromURL(_src, function(oImg) { 
    oImg.setWidth(500); 
    oImg.setHeight(400); 
    oImg.left = ((ImgCanvas.width/2)-(oImg.width/2)); 
    oImg.top = 50; 
    oImg.selectable = false; 
    ImgCanvas.add(oImg); 
    ImgCanvas.renderAll(); 
    }); 
}

我有一個mutiplete圖像，我想加載它們使用循環逐個畫布，我如何實現這一目標？所以當我按下sava時，圖像將在canvas上逐一顯示。我嘗試使用它，但它將所有這些圖像加載在一起。如何在畫布上逐一加載多個圖像？使用循環

任何人都可以在這裏給我一個幫助〜謝謝apreciate。

Demo

來源

2016-01-26 darkness

讓imageFromURL結束呼叫下一個負載，並重構代碼中使用的setTimeout的，否則一切都將是非常快的。

因爲負載是異步的，所以以前的圖像都顯示爲灰色。因此，在for循環中你

迅速開始在4個圖像
立即清除的順序裝載4次畫布仍然是空的
然後每一個形象將完成加載和以隨機順序出現在畫布上。

var ImgCanvas = new fabric.Canvas("mycanvas"); 
 
var json = {}; 
 
var IdStore = []; 
 
var retval = []; 
 
var retvalsrc = []; 
 

 
function sava(){ 
 

 
    $('.Jicon').each(function(){ 
 
    retval.push($(this).attr('id')); 
 
    retvalsrc.push($(this).attr('src')); 
 
    }) 
 

 

 
    updateCanvas(); 
 

 
} 
 

 

 
//change main image 
 
function updateCanvas() { 
 
    ImgCanvas.clear(); 
 
var _src = retvalsrc.pop(); 
 
fabric.Image.fromURL(_src, function(oImg) { 
 
    oImg.setWidth(500); 
 
    oImg.setHeight(400); 
 
    oImg.left = ((ImgCanvas.width/2)-(oImg.width/2)); 
 
    oImg.top = 50; 
 
    oImg.selectable = false; 
 
    ImgCanvas.add(oImg); 
 
    ImgCanvas.renderAll(); 
 
    if (retvalsrc.length > 0) { 
 
     setTimeout(updateCanvas, 1000); 
 
    } 
 
    }); 
 
}

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 

 
<div> 
 
    <img name="001.png" class="Jicon" id="displayImage1" src="http://i795.photobucket.com/albums/yy232/PixKaruumi/Pokemon%20Pixels/077.png" onclick="updateCanvas(this.src);"> 
 
    <img name="002.png" class="Jicon" id="displayImag2" src="http://i795.photobucket.com/albums/yy232/PixKaruumi/Pokemon%20Pixels/076.png" onclick="updateCanvas(this.src);"> 
 
    <img name="003.png" class="Jicon" id="displayImage3" src="http://rs795.pbsrc.com/albums/yy232/PixKaruumi/Pokemon%20Pixels/071.png~c100" onclick="updateCanvas(this.src);"> 
 
    <img name="004.png" class="Jicon" id="displayImag4" src="http://rs795.pbsrc.com/albums/yy232/PixKaruumi/Pokemon%20Pixels/072.png~c100" onclick="updateCanvas(this.src);"> 
 
</div> 
 
<button onclick="sava();">sava</button> 
 
    <div id="warpper"> 
 
\t <canvas id="mycanvas" width="380" height="500" style="border:1px solid #000;"></canvas> 
 
</div><!-- end of div --> 
 
</body>

來源

2016-01-26 11:48:19 AndreaBogazzi

如何在畫布上逐一加載多個圖像？使用循環

回答

相關問題