javascript - 在 Canvas 上绘制多个图像并保存到图像

Question

我正在尝试构建一个构造器，您可以在其中应用多个图像、 Canvas 上的文本，然后将其全部保存在一个图像中。

我无法让它处理多个图像

这是我从 http://www.html5canvastutorials.com/tutorials/html5-canvas-image-loader/ 获取的基础代码:

   function loadImages(sources, callback) {

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



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

  //var sources = {
  //  darthVader: '/image/CategorieVerkeersborden/Verboden.jpg',
  //  yoda: '/image/CategorieVerkeersborden/Funborden.jpg'
  //};

var sources = []; // I need to add the values to that array dynamically I

$(document).ready(function(){


    $('.add').click(function(){

        if ( $.inArray($(this).siblings('img').attr('src'), sources) == -1 ){
            sources[sources.length] = $(this).siblings('img').attr('src');

        }

        loadImages(sources, function(images) {

            imageElem = document.getElementById('image');


            for (i = 0; i< sources.length; i++){

                context.drawImage(images[i], 0, 0, 300, 200); // this is the part that doesn't work - it draws the last image in the array I guess

            }
    //context.drawImage(images.darthVader, 0, 0, 300, 200);
    //context.drawImage(images.yoda, 0, 0, 200, 150);

  // the above part works 

    imageElem.src = context.canvas.toDataURL('image/png');

        });
     }); 


  });

有人能告诉我为什么当我尝试通过循环绘制图像时它不起作用吗？

Answer 1

function loadImages(sources, callback) {

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



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

  //var sources = {
  //  darthVader: '/image/CategorieVerkeersborden/Verboden.jpg',
  //  yoda: '/image/CategorieVerkeersborden/Funborden.jpg'
  //};

var sources = []; // I need to add the values to that array dynamically I
 sources.push('http://pngimg.com/uploads/grass/grass_PNG10866.png');
 sources.push('http://pngimg.com/uploads/street_light/street_light_PNG11542.png');
 sources.push('http://pngimg.com/uploads/pokeball/pokeball_PNG34.png');
$(document).ready(function(){




        loadImages(sources, function(images) {

            imageElem = document.getElementById('image');


            for (i = 0; i< sources.length; i++){

                context.drawImage(images[i], 0, 0, 300, 200); // this is the part that doesn't work - it draws the last image in the array I guess

            }
    //context.drawImage(images.darthVader, 0, 0, 300, 200);
    //context.drawImage(images.yoda, 0, 0, 200, 150);

  // the above part works 

    imageElem.src = context.canvas.toDataURL('image/png');

        });



  });
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="myCanvas" width="400" height="400"></canvas>

ctx.drawImage(图像、dx、dy、dWidth、dHeight) More info

在 Canvas 中，您正在位置(dx，dy)绘制图像，图像宽度(dWidth)和图像高度(dHeight)。在您的情况下，开始绘制位置是(0,0)，所有图像宽度= 300，高度= 200，这就是它重叠所有图像的原因，并且您只能看到最后一个图像。