如何在画布上一张一张地加载多个图像？使用循环答案

【问题标题】：how to load multiple image one by one on canvas? using loop如何在画布上一张一张地加载多个图像？使用循环
【发布时间】：2016-05-02 15:39:41
【问题描述】：

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();
  });
}

我有一个多幅图像，我想使用循环将它们一张一张地加载到画布上，我该如何实现？因此，当我按 sava 时，图像将在画布上一张一张地显示。我尝试使用 for 但它会将所有这些图像加载在一起。

谁能帮帮我~谢谢apreciate。

Demo

【问题讨论】：

标签： javascript jquery html5-canvas fabricjs

【解决方案1】：

让 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">
	<canvas id="mycanvas" width="380" height="500" style="border:1px solid #000;"></canvas>
</div><!-- end of div -->
</body>

【讨论】：