Question

我正在尝试使用同一域中的所有资源操纵画布上的视频。我通过apache运行它并使用我的本地IP访问该站点。这一切似乎都在使用移动Chrome，但出于某种原因，它在iOS上的safari上引发了安全例外。也许有一个错误，如何使用两个不同的画布和传递视频的画布被污染？无论如何，我希望有一个工作？这是我的代码和例外：

HTML：

<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">

</head>
<body>
<h1>DOH</h1>
    <video id="video" width="800" height="600" src="doh.mp4" controls></video>
    <canvas width="800" height="600" id="output"></canvas>
    <button id="doh">Play</button>
    <script type="text/javascript" src="custom.js"></script>
</body>

JS：

var v = document.getElementById('video');
var canvas = document.getElementById('output');
var context = canvas.getContext('2d');
var back = document.createElement('canvas');
var backcontext = back.getContext('2d');
var R = 10, G = 10, B = 10, dev = 10; 
//var R = 57, G = 94, B = 118, dev = 10; 
var hR = (R + dev), lR = (R - dev), hG = (G + dev), lG = (G - dev), hB = (B + dev), lB = (B - dev);

var cw,ch;

var click = document.getElementById('doh');

click.addEventListener('click', function(){
    v.play();
});

v.style.position = "absolute";
v.style.top = window.innerHeight; 

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

function draw(v,c,bc,w,h) {
    if(v.paused || v.ended) return false;
    // First, draw it into the backing canvas
    bc.drawImage(v,0,0,w,h);
    // Grab the pixel data from the backing canvas
    var idata = bc.getImageData(0,0,w,h);
    var data = idata.data;
    // Loop through the pixels, turning them grayscale
    for(var i = 0; i < data.length; i+=4) {
        var r = data[i];
        var g = data[i+1];
        var b = data[i+2];
        if(r >= lR && r <= hR && g >= lG && g <= hG && b >= lB && b <= hB){
            data[i + 3] = 0;
        }
    }
    idata.data = data;
    // Draw the pixels onto the visible canvas
    c.putImageData(idata,0,0);
    // Start over!
    setTimeout(function(){ draw(v,c,bc,w,h); }, 0);
}

CSS：

body {
    background-color: purple;
}

#doh{
    position: absolute;
    top: 0px;
    left: 0px;
    height: 30px;
    width: 120px;
}

异常

SecurityError：DOM异常18：尝试突破用户代理的安全策略。

正如您所料，它正在发生

var idata = bc.getImageData(0,0,w,h); Line 41

Canvas iOS Safari SecurityError：DOM Exception 18

0 个答案: