一次在多个图像上启用CORS [英] Enable CORS on multiple images at once

问题描述

我知道我们可以使用此代码在单个图片上启用CORS。

  var canvas = document.getElementById '）; 
 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）; 
  

有多种方法可以同时处理多个图片网址？

解决方案

URL数组

要加载多个启用CORS请求的映像，您可以使用一个数组实用的。

需要注意的一件事是，请求CORS可以被服务器拒绝。浏览器可能会在这些情况下无法加载图片，因此您需要事先知道是否需要请求CORS。

示例加载器

  var urls = [url1，url2，url3，...] // etc. replace with actual URLs 
 var 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（）; // load done 
} 
 
 function errorHandler（）{
 //这里处理错误
 loadHandler（）; //确保更新计数器/回调
} 
 
 function callback（）{
 // ...准备好，从这里继续
} 
  
 
 
 
演示
 
 
 
 
 
 
  var urls = [http://i.imgur.com/0LINzxs.jpg，//来自imgur ..的随机网址http://i.imgur.com/6ksiMgS.jpg，http：/ / /i.imgur.com/aGQSLi9.jpg]; var images = []; //存储加载的图像var i = 0，len = urls.length; var count = len; //用于（; i  c>      code> 
 
 
 
 
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?
解决方案
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>





                        
这篇关于一次在多个图像上启用CORS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！