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

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

注意，js在問題出現了此前繪製的圖像中的每個圖像繪製到canvas在第二，第三，第四內loadImages參數.drawImage？

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回調

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提到代碼內需要在呼叫到.drawImage調節上canvas位置是細也，但它會導致在鉻的一個問題; 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; 
}