是否有方法可以快速确定浏览器是否支持启用了cors的图像而不会污染浏览器?

Is there any way to quickly determine if a browser supports CORS-enabled images not tainting the browser?

本文关键字：浏览器 是否 cors 图像 污染 支持 有方法 启用      更新时间：2023-09-26

是否有一个快速测试来确定浏览器是否支持启用cors的图像，当在其上绘制时不会污染画布。我知道Chrome 15支持这个功能，Firefox 9Beta不支持Firefox 8, Safari不支持，IE9也不支持。但必须有一个非常简单的测试来确定这个，基本上是在画布上画一个图像，看看当你试图获取图像数据时是否会出现异常，或者有没有其他简单的方法来确定这个。

这似乎可以工作:

if ('crossOrigin' in new Image())
    // ...

下面是我如何测试CORS包含的画布支持。如果有人有办法不需要加载图片，请在这里发布:

function CanvasFunctions() {
    var _initialized = false, _corsNotSupported = false;

    function DrawImage(image, src) {
        jQuery.when(initialized()).then(function () { 
            if (_corsNotSupported) {
               image.src = GetProxyImage(src);
            } else {
               image.src = src;
            } 
        }
    }
    function initialized() {
        if (_initialized) {
            return true;
        }
        var dfd = $.Deferred();
        var src = 'http://example.com/corsImage.jpg',
            image.onload = function () {
                var canvas = document.createElement('canvas');
                canvas.width = 250;
                canvas.height = 250;
                var ctx = canvas.getContext('2d');
                ctx.drawImage(image, 0, 0, 200, 200);
                try {
                    var hit = ctx.getImageData(0, 0, 1, 1).data[3] > 1;
                    console.log('Canvas was not tainted by CORS image, hit: ' + hit);
                } catch (e)  {
                    console.log('Canvas was tainted by CORS image, reverting to passthru for images');
                    _corsNotSupported = true;
                }
                _initialized = true;
                dfd.resolve(true);
            });
        image.src = src;

        return dfd.promise();
    }
}

确定浏览器是否支持CORS的最简单方法是查找XHR的withCredentials属性。IE使用XDomainRequest对象而不是XHR，所以您也需要查找它:

function supportsCors() {
  var xhr = new XMLHttpRequest();
  if ("withCredentials" in xhr) {
    // Supports CORS
    return true;
  } else if (typeof XDomainRequest != "undefined") {
    // IE
    return true;
  }
  return false;
}
相关文章：