如何从数组中的图像源创建画布图像?

问题描述

我想从来自我的 ajax 请求的数组中的多个图像创建一个 Canvas 图像；为此，我尝试运行循环，但 drawImage 不适用于循环.

I want to create a Canvas image from multiple images in an array coming from my ajax request; for that purpose i try to run the loop but drawImage does not works with the loop.

然后我尝试了一个函数，并在循环中调用了该函数，但同样的事情发生了 drawImage 不适用于此

Then i try a function, and called that function in a loop but same thing happens drawImage does not works with this

下面我提到了所有的代码一和函数一的循环 &一个在 drawImage 中具有静态信息的当前工作.

below i have mentioned all the code one with the function one with the loop & one with static information in drawImage which is currently working.

如果有人请指导我如何解决此问题，我将不胜感激.

运行良好的静态 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);

  });

  });

请帮忙！

推荐答案

注意，js 在 Question 出现在第二、第三次将每个图像绘制在先前绘制的图像上到 canvas 上, loadImages 中 .drawImage 的第四个参数?

Note, js at Question appear drawing each image over previously drawn image onto canvas at second, third, fourth arguments to .drawImage within loadImages ?

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 上的位置

js could be shortened to single .forEach() loop ; adjusting position on canvas as needed at call to .drawImage within .forEach callback

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>

这篇关于如何从数组中的图像源创建画布图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！