Mobile HTML5 canvas.getImageData（）在为视频帧调用drawImage（）后，在移动设备上引发安全性错误：DOM异常18
我正忙着通过处理每个视频帧并将结果绘制到画布上来尝试操作HTML5视频。下面的示例只是忽略所有RGB组件的值小于32的任何源像素 它在我的桌面浏览器chrome中似乎运行良好，但当我尝试使用支持HTML5的移动浏览器iPad或Playbook查看页面时，bc.getImageData抛出DOM异常18。 但是，如果我删除将视频帧绘制到后画布的代码行，即第37行-bc.drawingev，0，0，w，h；不再引发异常 我怀疑由于某种原因，只要我调用drawImage并传入视频，画布的原点清除标志就会设置为false。这可能吗 可在此处找到托管示例： 如有任何反馈，将不胜感激Mobile HTML5 canvas.getImageData（）在为视频帧调用drawImage（）后，在移动设备上引发安全性错误：DOM异常18,mobile,html5-video,html5-canvas,Mobile,Html5 Video,Html5 Canvas,我正忙着通过处理每个视频帧并将结果绘制到画布上来尝试操作HTML5视频。下面的示例只是忽略所有RGB组件的值小于32的任何源像素 它在我的桌面浏览器chrome中似乎运行良好，但当我尝试使用支持HTML5的移动浏览器iPad或Playbook查看页面时，bc.getImageData抛出DOM异常18。 但是，如果我删除将视频帧绘制到后画布的代码行，即第37行-bc.drawingev，0，0，w，h；不再引发异常 我怀疑由于某种原因，只要我调用drawImage并传入视频，画布的原点清除标志就
<!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>