“无法执行'getImageData''CanvasRenderingContext2D'：画布已被交叉原始数据污染。”对于傻瓜

Question

当我尝试在多个网站上播放视频时，我收到了消息

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

我找到的每个解决方案 - 而不仅仅是Stackoverflow - 都是为那些试图向Chrome添加内容或者我不知道是什么的开发人员编写的。

答案对于像我这样的旁观者来说很有趣，但它们都涉及在某些代码中进行修正。我正在使用在Windows 10上运行的Chrome衍生产品Sli​​mjet。您是否有人建议我在最终用户级别可以做些什么？

谢谢......罗恩

Answer 1

“当我尝试在几个网站上播放视频......”

你不是完全“玩”视频，更像是“录制”它们，如果你涉及Canvas。这是一个内容保护问题（例如：保护那些高级视图类型公司和其他所有人）。

“你们有没有人建议我能在最终用户层面做些什么？”

视频数据必须来自您自己的域（站点）才能使Canvas正常工作。

选项1：将所需的视频文件复制到您自己的空间（HTML页面所在的位置）。

选项2：使用PHP代码（如果可能）“代理”链接。这意味着您的<video>标记源是PHP脚本链接，并且相同的PHP脚本本身也会提供视频数据。现在，浏览器被愚弄，认为视频数据来自服务器上的某个地方。

HTML视频代码：

<video id="myVid" preload="true">
  <source crossorigin="anonymous" src="http://www.yoursite.com/proxy_video.php">
</video>

PHP代码（在“proxy_video.php”中）：

<?php

$filename = "https://www...your_video_link";
$fp = fopen($filename, 'rb'); // open file pointer
$music = fpassthru($fp); // dump file stream to http
fclose($fp);

?>