可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I know we can use this code to enable CORS on a single image

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

var img = new Image();
img.crossOrigin = '';
img.src = 'http://crossdomain.com/image.jpg';

canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0, img.width, img.height);

Is there any way to do it for multiple image URLs at once?

回答1:

URL array

To load several images enabling CORS request, you can use an array which is practical for this purpose.

One thing to be aware of is that requesting CORS can be denied by server. The browser may fail loading the image in those cases so you will need to know in advance if CORS need to be requested or not.

Example loader

var urls = [url1, url2, url3, ...];   // etc. replace with actual URLs
var images = [];                      // store the loaded images
var i = 0, len = urls.length;
var count = len;                      // for load and error handlers

for(; i < len; i++) {
     var img = new Image();
     img.onload = loadHandler;
     img.onerror = img.onabort = errorHandler;
     img.crossOrigin = "";            // enable CORS request
     img.src = urls[i];               // set src last
     images.push(img);                // store in array
}

function loadHandler() {
    if (!--count) callback();         // loading done
}

function errorHandler() {
   // handle errors here
   loadHandler();                     // make sure to update counter/callback
}

function callback() {
    // ... ready, continue from here
}

Demo

var urls = [
      "http://i.imgur.com/0LINzxs.jpg",   // random urls from imgur..
      "http://i.imgur.com/6ksiMgS.jpg", 
      "http://i.imgur.com/aGQSLi9.jpg"
    ];
    var images = [];                      // store the loaded images
    var i = 0, len = urls.length;
    var count = len;                      // for load and error handlers
    
    for(; i < len; i++) {
         var img = new Image();
         img.onload = loadHandler;
         img.onerror = img.onabort = errorHandler;
         img.crossOrigin = "";            // enable CORS request
         img.src = urls[i];               // set src last
         images.push(img);                // store in array
    }

    function loadHandler() {
        if (!--count) callback();         // loading done
    }

    function errorHandler() {
       // handle errors here
       loadHandler();                     // make sure to update
    }

    function callback() {
        // ... ready, continue from here
        console.log(images);
        var ctx = document.querySelector("canvas").getContext("2d");
        ctx.drawImage(images[0], 0, 0);
        ctx.drawImage(images[1], 0, 0);
        ctx.drawImage(images[2], 0, 0);
        console.log(ctx.canvas.toDataURL());  // OK if CORS is OK!
    }

<canvas></canvas>

回答2:

Put the srcs in an array and iterate over them

working fiddle https://jsfiddle.net/ps50po4z/ This allows you to use multiple images from different sources and display them. use this function as a template to iterate through all the cors src images

<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      function loadImages(sources, callback) {
        var images = {};
        var loadedImages = 0;
        var numImages = 0;
        // get num of sources
        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('myCanvas');
      var context = canvas.getContext('2d');

      var sources = {
        darthVader: 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg',
        yoda: 'http://www.html5canvastutorials.com/demos/assets/yoda.jpg'
      };

      loadImages(sources, function(images) {
        context.drawImage(images.darthVader, 100, 30, 200, 137);
        context.drawImage(images.yoda, 350, 55, 93, 104);
      });

    </script>
  </body>
</html>