Question

我正忙着通过处理每个视频帧并将结果绘制到画布来试验操纵HTML5视频。下面的示例简单地忽略所有RGB分量具有值<1的任何源像素。 32;

它似乎在我的桌面浏览器（chrome）中正常工作，但当我尝试使用支持HTML5的移动浏览器（iPad或Playbook）查看页面时，bc.getImageData（）会抛出DOM Exception 18。但是，如果我删除将视频帧绘制到后画布的代码行（即第37行 - bc.drawImage（v，0,0，w，h）;），则不再引发异常。

我怀疑，出于某种原因，只要我调用drawImage（）并传入视频，画布的origin-clear标志就会设置为false。这可能吗？

可以在此处找到托管示例：http://petermares.com/samples/tvtest/

任何反馈都将不胜感激。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<title>Transparent Video Test</title>
<script> 
document.addEventListener('DOMContentLoaded', function()
{
    var v = document.getElementById('v');
    var canvas = document.getElementById('c');
    var context = canvas.getContext('2d');
    var back = document.createElement('canvas');
    var backcontext = back.getContext('2d');
    var img = new Image();
    img.src = "./background.jpg";

    var cw,ch;

    v.addEventListener('play', function()
    {
        v.style.visibility = 'hidden';
        cw = v.clientWidth;
        ch = v.clientHeight;
        canvas.width = cw;
        canvas.height = ch;
        back.width = cw;
        back.height = ch;
        draw(v,context,backcontext,cw,ch,img);
    },false);

},false);

function draw(v,c,bc,w,h,img) 
{
    if(v.paused || v.ended) return false;

    // First, draw it into the backing canvas
    bc.drawImage(v,0,0,w,h);
    c.fillStyle = "white";
    c.fillRect(0, 0, w, h);
    c.drawImage(img, 0, h/2-img.height/2);

    try
    {
        // Grab the pixel data from the backing canvas
        try
        {
            var idata = bc.getImageData(0,0,w,h);
        }
        catch (e)
        {
            alert("bc.getImageData(): " + e);
            return;
        }
        var data = idata.data;

        // grab the pixel data from the target canvas
        try
        {
            var tdata = c.getImageData(0, 0, w, h);
        }
        catch (e)
        {
            alert("c.getImageData(): " + e);
            return;
        }
        var rdata = tdata.data;
        // Loop through the pixels, turning them grayscale
        for(var i = 0; i < data.length; i+=4) 
        {
            // source pixel
            var rs = data[i];
            var gs = data[i+1];
            var bs = data[i+2];
            var as = data[i+3];
            // target pixel
            var rt = rdata[i];
            var gt = rdata[i+1];
            var bt = rdata[i+2];
            var at = rdata[i+3];

            if ( rs < 32 && gs < 32 && bs < 32 )
            {
                rs = rt;
                gs = gt;
                bs = bt;
            }

            data[i] = rs;
            data[i+1] = gs;
            data[i+2] = bs;
            data[i+3] = as;
        }
        idata.data = data;
        // Draw the pixels onto the visible canvas
        try
        {
            c.putImageData(idata,0,0);
        }
        catch (e)
        {
            alert("c.putImageData(): " + e);
            return;
        }
    }
    catch (e)
    {
        alert("Main loop" + e);
        return;
    }

    // Start over!
    setTimeout(draw,20,v,c,bc,w,h, img);
    }
    </script> 

    <body>
    <video id="v" autoplay loop="loop" webkit-playsinline>
        <source src="video/compressed.ogv" type="video/ogg" />
        <source src="video/compressed.mp4" type="video/mp4" />
    </video>
    <canvas id="c">
    </canvas>

    <style> 
    #c {
    position: absolute;
    top: 0%;
    left: 0%;
    }

    #v {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -180px 0 0 -500px;
    }
    </style> 
    </body>
</html>

Answer 1

是。您的浏览器认为<canvas>受到外部源图像的污染。这不是必须的（实际上），但浏览器可能不支持它/是错误的。

如果它适用于Chrome，那么很遗憾，这绝对是一个浏览器问题。

https://developer.mozilla.org/en/CORS_Enabled_Image

由于问题中的浏览器来自Apple并且本质上是封闭的，因此您可能会或可能不会在Apple开发人员论坛（私人）上获得可靠的答案。

HTML5 canvas.getImageData（）在为视频帧调用drawImage（）之后在移动设备上抛出SECURITY_ERR：DOM异常18

1 个答案: