时间戳

首页 > 解决方案 > “无法执行‘getImageData’‘CanvasRenderingContext2D’：画布已被跨域数据污染。” 傻瓜

windows - “无法执行‘getImageData’‘CanvasRenderingContext2D’：画布已被跨域数据污染。” 傻瓜

问题描述

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

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

我发现的每一个解决方案——不仅仅是在 Stackoverflow 上——都是为那些试图向 Chrome 添加东西或者我不知道是什么的开发人员编写的。

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

谢谢……罗恩

标签： windowsvideo-processing

解决方案

“当我尝试在多个网站上播放视频时……”

不过，您并不完全是在“播放”视频，更像是“录制”它们（如果您涉及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);

?>

推荐阅读