“The canvas has been tainted by cross-origin data” error on Android (no error on desktop)

问题

I'm trying to load an image from a video file, draw it on a canvas, and modify canvas pixels. I'm hosting this on a local web server, and it works fine on any desktop computer in my local network. However when I try to open the same page on Android Nexus 7 tablet (also on the local network) I get this error:

Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.

Here's my final test code:

<!DOCTYPE html>
<html>
<body>
<canvas id="mainCanvas" width="1024" height="576" style = "border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<video id="myVideo" width="0" height="0" >
   <source src="video.mp4" type='video/mp4' crossOrigin="anonymous">
</video>
<script>
   window.onload = function() {
      var objectImage = document.getElementById('myVideo');
      objectImage.crossOrigin = "Anonymous";
      objectImage.onloadeddata = function() {
         var canvas = document.getElementById("mainCanvas");
         var ctx = canvas.getContext("2d");
         canvas.addEventListener('click', function(event) {
            objectImage.play();
            setTimeout(function() {
               ctx.drawImage(objectImage, 0, 0);
               var width = objectImage.videoWidth;
               var height = objectImage.videoHeight;

               var imageData = ctx.getImageData(0, 0, width, height);
               var pixels = imageData.data;
               for (var i = 0; i < pixels.length; i = i + 4) pixels[i] = 0;
               ctx.putImageData(imageData, 0, 0, 0, 0, width, height);
            }, 3000);
         });
      }
   }
</script>
</body>
</html>

As you can see my video file is on the same domain as the rest of the code, and I'm not running this HTML as file:// but as http:// from a web server. I can see the unmodified frame on the screen, just before it calls getImageData(), so I assume video playback worked fine.

I also tried drawing image files on the canvas instead of video, and in this case it seems to work fine, and I can call getImageData without a problem.

Does anyone have a working example of getImageData() after drawing a frame from a video file?

来源：https://stackoverflow.com/questions/34985960/the-canvas-has-been-tainted-by-cross-origin-data-error-on-android-no-error-on

标签

javascript

android

html5

canvas

html5-video