Question

我想以相同的顺序在画布中加载已排序的数组图像，因为我创建了一个加载函数，我从那里调用它。

每件事情都很好，但问题是它在第一次调用时不会在画布上绘制图像。

使用我当前的代码，它不会显示图像，但是当您再次运行它时，它将创建并显示画布图像。

我在本地主机中面临同样的问题，我用ajax加载图像。

＆＃13;

var ImagesArray = new Array("http://s4.postimg.org/dw8aujkkd/slim_Fit.png",
  "http://s27.postimg.org/l6mq3hboz/outer_collar1.png",
  "http://s22.postimg.org/e7alkm44x/inner_collar11.png",
  "http://s12.postimg.org/h4kgdjn4t/maincolar.png",
  "http://s13.postimg.org/edabwknfr/outer_fastening1.png");

//alert(ImagesArray.length);
MainMethods(ImagesArray);



function MainMethods(responseImages) {
  //alert(responseImages.length);
  var canvas = document.getElementById("product-image");

  canvas.height = ($(window).height()) - 120;
  canvas.width = canvas.height * 0.75;
  var heightscreen = ($(window).height()) - 120;
  var canvasheight = heightscreen;
  var canvaswidth = canvas.height * 0.75;
  canvaswidthdiv4 = 0;
  var widthNeeded = canvasheight * 0.75;

  var context = canvas.getContext('2d');


  var returnedImages = loadImages(responseImages);


  for (i = 0; i < returnedImages.length; i++) {
    console.log(returnedImages[i]);
    context.drawImage(returnedImages[i], canvaswidthdiv4, 55, widthNeeded, canvasheight);
  }



  // Image loading global variables
  var loadcount = 0;
  var loadtotal = 0;
  var preloaded = false;

  // Load images
  function loadImages(imagefiles) {
    // Initialize variables
    loadcount = 0;
    loadtotal = imagefiles.length;
    preloaded = false;

    // Load the images
    var loadedimages = [];
    for (var i = 0; i < imagefiles.length; i++) {
      // Create the image object
      var image = new Image();

      // Add onload event handler
      image.onload = function() {
        loadcount++;
        if (loadcount == loadtotal) {
          // Done loading
          preloaded = true;
        }
      };

      // Set the source url of the image
      image.src = imagefiles[i];

      // Save to the image array
      loadedimages[i] = image;
    }

    // Return an array of images
    return loadedimages;
  }

}

＆＃13;

<canvas id="product-image" width="700" height="823"></canvas>

＆＃13;

Answer 1

由于它似乎是一个特定于浏览器的问题，所以这是一个让它工作的黑客攻击：

替换：MainMethods(ImagesArray);

with：setTimeout(function () { MainMethods(ImagesArray); }, 0);

当超时设置为0 ms时，它实际上会立即执行。

JsFiddle：http://jsfiddle.net/wdfrrayh/3/

在IE，FF，Chrome上测试

Answer 2

问题是当您尝试绘制图像时，图像尚未加载。

将drawImage部分包裹在一个函数中并在预加载变为true时调用它，这里你的布尔值什么也没做。

我稍微重构了您的代码，在调用loadtotal函数后，loadImage()被重置为0也遇到了问题。所以loadcount永远不会是=== loadtotal而且你无用的预加载从未切换为真。

＆＃13;

var ImagesArray = new Array ("http://s4.postimg.org/dw8aujkkd/slim_Fit.png",
                   "http://s27.postimg.org/l6mq3hboz/outer_collar1.png",
                   "http://s22.postimg.org/e7alkm44x/inner_collar11.png",
                   "http://s12.postimg.org/h4kgdjn4t/maincolar.png",
                   "http://s13.postimg.org/edabwknfr/outer_fastening1.png");

function MainMethods(responseImages) {

	var canvas = document.getElementById("product-image");

	canvas.height = ($(window).height()) - 120;
	canvas.width = canvas.height * 0.75;
	var canvasheight = ($(window).height()) - 120;
	var canvaswidth = canvas.height * 0.75;
	canvaswidthdiv4 = 0;
	var widthNeeded = canvasheight * 0.75;
	var context = canvas.getContext('2d');



	// an other error, if you set loadtotal to 0 after calling loadImages(), it will be set to 0 when images are loaded.
	// and loadcount won't ever be === loadtotal.
	var loadcount;
	var loadtotal;

	function loadImages(imagefiles) {
		loadcount = 0;
		loadtotal = imagefiles.length;

		var loadedimages = [];
		for (var i=0; i<imagefiles.length; i++) {
			var image = new Image();
 
			image.onload = function () {
				loadcount++;
				console.log(loadcount+'/'+ loadtotal);
				if (loadcount == loadtotal) {
                  // done loading all the images
					draw(loadedimages);
				}
			};
                
			image.src = imagefiles[i];

			loadedimages[i] = image;
		}
 
	}

	// Wrap your drawing in a function that will be called asynchronously
	function draw(loadedimages){
		for (var i = 0; i < loadedimages.length; i++) { 
			console.log(loadedimages[i]);
			context.drawImage(loadedimages[i], canvaswidthdiv4, 55, widthNeeded, canvasheight);
			}
		}

	// Once all your variables are set, you can load the images
	loadImages(responseImages);
}

MainMethods(ImagesArray);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="product-image"></canvas>

＆＃13;

Answer 3

图像src需要在drawImage之后调用，在我更新我的函数之前我正在做的工作正常，

下面的

是这个

的工作代码

function loadImages(sources, callback, jsondata) {

    var images = {};
    var loadedImages = 0;
    var numImages = 0;

    // get num of sources
    for(var src in sources) {
      numImages++;
    }
    for(var src in sources) {
      images[src] = new Image();
      images[src].onload = function() {
        if(++loadedImages >= numImages) {
          callback(images);
        }
      };
      images[src].src = sources[src];
    }
  }

  var canvas = document.getElementById('product-image');

    canvas.height = (jQuery(window).height()) -120;
      canvas.width = canvas.height * 0.75;
  var heightscreen = (jQuery(window).height()) -120;
  var canvasheight = heightscreen;
  var canvaswidth = canvas.height * 0.75;
  canvaswidthdiv4 = 0;
  var widthNeeded = canvasheight * 0.75;

  var context = canvas.getContext('2d');  


 var sources = new Array ("http://s4.postimg.org/dw8aujkkd/slim_Fit.png",
               "http://s27.postimg.org/l6mq3hboz/outer_collar1.png",
               "http://s22.postimg.org/e7alkm44x/inner_collar11.png",
               "http://s12.postimg.org/h4kgdjn4t/maincolar.png",
               "http://s13.postimg.org/edabwknfr/outer_fastening1.png");


      loadImages(sources, function(images) {

          for(var i=0; i < sources.length; i++){
             context.drawImage(images[i], canvaswidthdiv4, 55,widthNeeded,canvasheight); 
          }


      });

在html画布中第一次调用时未加载的图像

3 个答案: