有什么方法可以快速确定浏览器是否支持CORS启用的图像不污染浏览器？

问题描述

是否有一个快速测试，以确定浏览器是否支持CORS启用的图像，在绘制时不会污染画布。我知道Chrome 15支持此功能，Firefox 9eta，但不是Firefox 8，Safari不支持，IE9不支持。但是必须有一个相当简单的测试来确定这一点，基本上是在一个画布上绘制一个图像，看看你是否在尝试获取图像数据时遇到异常，或者是否有任何其他简单的方法来确定这一点。

Is there a quick test to determine if a browser supports CORS-enabled images not tainting a canvas when drawn on them. I know Chrome 15 supports this, Firefox 9Beta but not Firefox 8, Safari doesn't, IE9 doesn't. But there must be a pretty simple test to determine this, is basically drawing on a canvas with an image and seeing if you get an exception when you try to get image data, or is there any other easy way to determine this.

推荐答案

这里是我如何测试CORS的画布支持。如果有人没有加载图片的方式，请张贴在这里：

Here is how I tested for CORS tained canvas support. If someone has a way without having to load an image, please post it here:

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启用的图像不污染浏览器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！