javascript - HTML5 之前的 Canvas : Is backwards compatibility posible/Intercept document. createElement

Question

我有一个想法...

我将尝试制作一个 JavaScript 库，它将支持 canvas 向后兼容 HTML5 之前的所有浏览器。

我将库函数制作为简单的包含，其中，如果不支持 canvas，则库将接管并为所有 canvas 调用创建支持函数，否则如果支持canvas，则该库不执行任何操作。我希望用户能够像平常一样使用所有 canvas 调用，而无需更改语法。

我知道这听起来很疯狂，但除了一些小问题之外，我的论文开始听起来相当可行......

我需要拦截 document.createElement (先别开枪，我会解释的!)

当调用 document.createElement("tagName") 时，我需要以某种方式拦截该函数以检查 tagName 参数的 值> Canvas 。

if(canvasNotSupported && tagName === 'canvas')
    tagName = 'img';

我还必须在 return 语句之前拦截 document.createElement 函数，以包含用于假 Canvas 的函数，例如 getContext'、'toDataURL 和 toBlob.

我还没有尝试过任何拦截 document.createElement 函数的方法，但这可能吗？能做到吗？怎么办？

另外，我将提供一个设置变量( bool 值)，它会告诉我的函数覆盖 canvas 的创建，无论是否支持。这应该提供完整的跨浏览器兼容性，并且还为恼人的“通过跨源数据污染 Canvas ”****错误提供了一个漂亮的小解决方法。

谢谢大家!

Answer 1

我已经明白了!

从长远来看，这可能不是该函数的编写方式，但它是一个工作原型(prototype)。

//Support for `bind` from MSDN
if (!Function.prototype.bind) {
  Function.prototype.bind = function(oThis) {
    if (typeof this !== 'function') {
      // closest thing possible to the ECMAScript 5
      // internal IsCallable function
      throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable');
    }

    var aArgs   = Array.prototype.slice.call(arguments, 1),
        fToBind = this,
        fNOP    = function() {},
        fBound  = function() {
          return fToBind.apply(this instanceof fNOP && oThis
                 ? this
                 : oThis,
                 aArgs.concat(Array.prototype.slice.call(arguments)));
        };

    fNOP.prototype = this.prototype;
    fBound.prototype = new fNOP();

    return fBound;
  };
}

//Checking for HTML5 canvas support
function time_capsule_canvas_exists()
{
    var elem = time_capsule_canvas_original_document_createElement.call(document, 'canvas');

    if(elem.getContext)
    {
        delete elem;
        return true;
    }
    else
    {
        delete elem;
        return false;
    }
}

/*Time Capsule Canvas Override value

    @var time_capsule_canvas_override

    Setting this value to true will cause
    time_capsule_canvas to override the
    creation of canvases regardless of
    HTML5 support by the browser
*/
var time_capsule_canvas_override = false;

//Stored original document.createElement
var time_capsule_canvas_original_document_createElement = document.createElement;
document.createElement = function (tag)
{
    var elem;

    if(tag.toLowerCase() === 'canvas' && (!time_capsule_canvas_exists() || time_capsule_canvas_override))
    {
        //tag is 'canvas'
        //Either there is no HTML5 support, or it was explicitly defined to be overriden
        elem = time_capsule_canvas_original_document_createElement.call(document, 'img');

        elem.getContext = function(dimension)
        {
            //Do something
        }.bind(elem);

        elem.toDataURL = function()
        {
            //Do something
        }.bind(elem);

        elem.toBlob = function()
        {
            //Do something
        }.bind(elem);
    }
    else//either non 'canvas' tag, or HTML5 and override not explicitly set
    {
        elem = time_capsule_canvas_original_document_createElement.call(document, tag);
    }

    return elem;
};

它可以在 IE6 中运行!!!