Question

我尝试从视频文件中加载图像，在画布上绘制图像，然后修改画布像素。我在本地Web服务器上托管它，它可以在我的本地网络中的任何台式计算机上正常工作。但是，当我尝试在Android Nexus 7平板电脑（也在本地网络上）上打开同一页面时，我收到此错误：

无法执行＆＃39; getImageData＆＃39; on＆＃39; CanvasRenderingContext2D＆＃39;：The 画布受到了原始数据的污染。

这是我的最终测试代码：

<!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>

正如您所看到的，我的视频文件与其他代码位于同一个域中，并且我没有将此HTML作为file：//运行，而是以http：//从Web服务器运行。我可以在调用getImageData（）之前在屏幕上看到未修改的帧，所以我假设视频播放工作正常。

我也尝试在画布上绘制图像文件而不是视频，在这种情况下，它似乎工作正常，我可以毫无问题地调用getImageData。

从视频文件中绘制帧后，是否有人有getImageData（）的工作示例？

＆＃34;画布受到跨源数据的污染＆＃34; Android上的错误（桌面上没有错误）

0 个答案: