Question

我正在尝试构建一个构造函数，您可以在画布上应用多个图像，texxt，然后将所有图像保存在一个图像中。

我无法使用多个图像

这是我从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

＆＃13;

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

＆＃13;

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

＆＃13;

ctx.drawImage(image, dx, dy, dWidth, dHeight) More info

在画布中，您在图像宽度（dWidth）和图像高度（dHeight）的位置（dx，dy）绘制图像。在您的情况下，开始绘制位置为（0,0），所有图像宽度= 300，高度= 200，这就是为什么它与所有图像重叠，并且您只能看到最后一个图像。

在画布上绘制多个图像并保存到图像

1 个答案: