如何從數組中的圖像源創建Canvas圖像？

Question

我想從來自我的ajax請求的數組中的多個圖像創建一個Canvas圖像； 為此，我嘗試運行循環，但drawImage不適用於循環。

然后我嘗試一個函數，並在循環中調用該函數，但同樣的事情發生drawImage不適用於此函數

下面我提到了所有的代碼，其中一個具有循環功能，而一個具有靜態信息的代碼在drawImage中有效。

如果您有任何問題，我將不勝感激，請指導我如何解決此問題。

正常工作的靜態drawImage代碼

function loadImages(sources, callback, imagesrc) {
        var images = {};
        var loadedImages = 0;
        var numImages = 0;

        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');

// THIS IS A DUMMY ARRAY SAME AS COME IN AJAX RESPONSE  
        var sources = 
        {        
        Slim_Fit: "http://localhost/plugindev/wp-content/uploads/2015/08/slimFit.png",
        Inside_Colar: "http://localhost/plugindev/wp-content/uploads/2015/08/maincolar.png",
        Outside_Colar: "http://localhost/plugindev/wp-content/uploads/2015/08/outer_collar1.png",
        Main_Colar: "http://localhost/plugindev/wp-content/uploads/2015/08/inner_collar11.png"
        };



      loadImages(sources, function(images) 
      {

        context.drawImage(images.Slim_Fit, canvaswidthdiv4, 55, widthNeeded, canvasheight);  
        context.drawImage(images.Inside_Colar, canvaswidthdiv4, 55, widthNeeded, canvasheight);
        context.drawImage(images.Outside_Colar, canvaswidthdiv4, 55, widthNeeded, canvasheight);
        context.drawImage(images.Main_Colar, canvaswidthdiv4, 55, widthNeeded, canvasheight);

      });

以下是我用於功能但未起作用的修正

 loadImages(sources, function(images) 
  {
jQuery.each( sources, function( key, value ) {

 DrawImage(key, images );

  });

  });

function DrawImage(keyname,images){

context.drawImage(images.keyname, canvaswidthdiv4, 55, widthNeeded, canvasheight);      
        }

以下是我使用循環繪制但無法正常工作時的修正

 loadImages(sources, function(images) 
  {
jQuery.each( sources, function( key, value ) {

 context.drawImage(images.key, canvaswidthdiv4, 55, widthNeeded, canvasheight);

  });

  });

請幫忙！

Answer 1

注意，Question上的js出現將先前繪制的圖像上的每個圖像都繪制到.drawImage中loadImages第二，第三，第四個參數上的canvas上？

loadImages(sources, function(images) 
      {    
        context.drawImage(images.Slim_Fit, canvaswidthdiv4, 55, widthNeeded, canvasheight);  
        context.drawImage(images.Inside_Colar, canvaswidthdiv4, 55, widthNeeded, canvasheight);
        context.drawImage(images.Outside_Colar, canvaswidthdiv4, 55, widthNeeded, canvasheight);
        context.drawImage(images.Main_Colar, canvaswidthdiv4, 55, widthNeeded, canvasheight);

      });

另請注意sources

// THIS IS A DUMMY ARRAY SAME AS COME IN AJAX RESPONSE  
        var sources = 
        {        
        Slim_Fit: "http://localhost/plugindev/wp-content/uploads/2015/08/slimFit.png",
        Inside_Colar: "http://localhost/plugindev/wp-content/uploads/2015/08/maincolar.png",
        Outside_Colar: "http://localhost/plugindev/wp-content/uploads/2015/08/outer_collar1.png",
        Main_Colar: "http://localhost/plugindev/wp-content/uploads/2015/08/inner_collar11.png"
        };

是對象，不是數組

---

js可以簡化為單個.forEach()循環； 在.forEach回調中調用.drawImage根據需要調整canvas位置

 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 images = ["http://lorempixel.com/50/50/cats" , "http://lorempixel.com/50/50/nature" , "http://lorempixel.com/50/50/animals" , "http://lorempixel.com/50/50/sports" ]; images.forEach(function(src, index) { var img = new Image; img.onload = function() { context.drawImage(this, index * this.width, index * this.width) } img.src = src }) 

 <canvas id="product-image" width="400px" height="400px"></canvas> 

Answer 2

嘗試使用images[key]而不是images.key 。

Answer 3

@ guest271314提到的代碼也可以，但是它會導致chrome問題。 chrome不維護序列，它會在加載圖像后立即對圖像進行排序； 所以我用下面的代碼解決了

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');
obj = JSON.parse(imagesrc);

obj = JSON.parse(obj);
var sources = obj;


var images = Object.keys(sources).map(function(k) { return sources[k] });

var returnedImages = loadImages(images);


for (i = 0; i < returnedImages.length; 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;
}