在html5画布中加载多个png图像 [英] Loading multiple png images in html5 canvas

问题描述

我已经看到了相当多的代码片段和教程如何加载单个图像，然后绘制图像，但也绘制形状等图像上，但有一种方法加载多个图像（pngs）透明部分

解决方案 div>

这里是一个图像预加载器的示例，它将等待所有图像完全加载，然后调用 start（）函数：

  // image preloader 
 
 // canvas相关变量
 var canvas = document.getElementById（canvas） ; 
 var ctx = canvas.getContext（2d）; 
 var cw = canvas.width; 
 var ch = canvas.height; 
 
 //将图像的路径放在imageURLs [] 
 var imageURLs = []; 
 imageURLs.push（https://dl.dropboxusercontent.com/u/139992952/multple/face1.png）; 
 imageURLs.push（https://dl.dropboxusercontent.com/u/139992952/multple/face2.png）; 
 
 //加载的图像将放置在imgs [] 
 var imgs = []; 
 var imagesOK = 0; 
 startLoadingAllImages（imagesAreNowLoaded）; 
 
 //为imageURLs []中的每个项目创建一个新的Image（）
 //加载所有图像后，运行回调函数（== imagesAreNowLoaded）
 function startLoadingAllImages回调）{
 
 //通过imageURLs数组迭代并为每个
创建新的图像（var i = 0; i  //创建一个新的图像推送到imgs []数组
 var img = new Image（）; 
 //重要！通过将这个img推送（保存）到imgs []，
 //我们确保img变量是免费的
 //取循环中的下一个值。 
 imgs.push（img）; 
 //当这个图像加载时，调用这个img.onload 
 img.onload = function（）{
 //这个img加载，增加图像计数器
 imagesOK ++; 
 //如果我们加载了所有的图像，调用回调
 if（imagesOK> = imageURLs.length）{
 callback（）; 
} 
}; 
 //通知是否有错误
 img.onerror = function（）{alert（image load failed）;} 
 //设置img属性
 img.src = imageURLs [i]; 
} 
} 
 
 //现在加载所有的图像
 // Do drawImage& fillText 
 function imagesAreNowLoaded（）{
 
 // imgs []数组现在保存完全加载的图像
 // imgs []的顺序与imageURLs [] 
 
 ctx.font =30px sans-serif; 
 ctx.fillStyle =＃333333; 
 
 //从imgs [0] 
 // drawImage第一个图像（face1.png），并在图像下面填充它的标签
 ctx.drawImage（imgs [0] 0,10）; 
 ctx.fillText（face1.png，0，135）; 
 
 // drawImage imgs [1]的第一个图像（face2.png）
 //和fillText它的标签下面的标签
 ctx.drawImage（imgs [1] 200,10）; 
 ctx.fillText（face2.png，210，135）; 
 
} 
  

I have seen quite a few code snippets and tutorials on how to load a single image and then draw that image but also draw shapes and such on the image, but is there a way to load multiple images (pngs) with transparent sections on to canvas so you can layer them and then download the composite?

Brian

解决方案

Here's an example of an image preloader that will wait until all the images are fully loaded and then call the start() function:

// image preloader

// canvas related variables
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

// put the paths to your images in imageURLs[]
var imageURLs=[];  
imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/multple/face1.png");
imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/multple/face2.png");

// the loaded images will be placed in imgs[]
var imgs=[];
var imagesOK=0;
startLoadingAllImages(imagesAreNowLoaded);

// Create a new Image() for each item in imageURLs[]
// When all images are loaded, run the callback (==imagesAreNowLoaded)
function startLoadingAllImages(callback){

  // iterate through the imageURLs array and create new images for each
  for (var i=0; i<imageURLs.length; i++) {
    // create a new image an push it into the imgs[] array
    var img = new Image();
    // Important! By pushing (saving) this img into imgs[],
    //     we make sure the img variable is free to
    //     take on the next value in the loop.
    imgs.push(img);
    // when this image loads, call this img.onload
    img.onload = function(){ 
      // this img loaded, increment the image counter
      imagesOK++; 
      // if we've loaded all images, call the callback
      if (imagesOK>=imageURLs.length ) {
        callback();
      }
    };
    // notify if there's an error
    img.onerror=function(){alert("image load failed");} 
    // set img properties
    img.src = imageURLs[i];
  }      
}

// All the images are now loaded
// Do drawImage & fillText
function imagesAreNowLoaded(){

  // the imgs[] array now holds fully loaded images
  // the imgs[] are in the same order as imageURLs[]

  ctx.font="30px sans-serif";
  ctx.fillStyle="#333333";

  // drawImage the first image (face1.png) from imgs[0]
  // and fillText its label below the image
  ctx.drawImage(imgs[0],0,10);
  ctx.fillText("face1.png", 0, 135);

  // drawImage the first image (face2.png) from imgs[1]
  // and fillText its label below the image
  ctx.drawImage(imgs[1],200,10);
  ctx.fillText("face2.png", 210, 135);

}

这篇关于在html5画布中加载多个png图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！