有没有办法快速确定浏览器是否支持启用CORS的图像而不是污染浏览器？

Question

是否有一个快速测试来确定浏览器是否支持启用CORS的图像,而不是在绘制它们时污染画布.我知道Chrome 15支持这个,Firefox 9Beta但不是Firefox 8,Safari不支持,IE9不支持.但是必须有一个非常简单的测试来确定这一点,基本上是在带有图像的画布上绘制,看看当你试图获取图像数据时是否得到异常,或者是否还有其他简单的方法来确定这一点.

Answer 1

这似乎有效:

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

Answer 2

以下是我测试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();
    }
}