从画布获取 img (toDataURL) --> 可能无法导出受污染的画布

Posted 2023-03-04

【中文标题】从画布获取 img (toDataURL) --> 可能无法导出受污染的画布

【英文标题】：Get img from canvas (toDataURL) --> Tainted canvases may not be exported

【发布时间】：2017-07-12 01:21:27

【问题描述】：

我有以下错误信息：

Uncaught DOMException: Failed to execute 'toDataURL' on 'htmlCanvasElement': Tainted canvases may not be exported.
at draw (http://motherlang-bananalang.com/videator-b.php:172:50)
at HTMLVideoElement.<anonymous> (http://)
at HTMLVideoElement.dispatch (http:/)
at HTMLVideoElement.r.handle (http:/)

HTML：

<input type='hidden' class='input_img' name='imgBase64'/>
<?php
   $contents = $s3->getBucket("motherla-temp");          
   $furl = "http://motherla- temp.s3.amazonaws.com/".$_SESSION['file_name'];
   echo '<video id="v"   controls><source src="'.$furl.'" type="video/mp4"> </video>';     
 ?>     
 <p style=' '> Thumbnail: Pause video and choose a thumbnail! </p>
 <canvas id='c' style=';border:1px solid silver;'></canvas>

查询：

 $('#v').on('pause', function() 
    var video = document.getElementById('v');
    var w = $(this).width();
    var h = $(this).height();  
    var canvas = document.getElementById('c');
    var context = canvas.getContext('2d');  
    canvas.width = w;
    canvas.height = h; 
    draw(this,context,w,h);  
  ) 

function draw(v,c,w,h)     
  c.crossOrigin = "Anonymous";
  c.drawImage(v,0,0,w,h);
  //setTimeout(draw,20,v,c,w,h);
  var dataURL = document.getElementById('c').toDataURL(); 
  $('.input_img').val(dataURL);   

现在，这段代码的作用是在视频暂停时抓取视频标题并将其绘制到画布上，然后从画布获取 dataURL 以将其转换为 img 并稍后保存在数据库和服务器中。基本上，我正在制作一个自定义视频缩略图脚本。

问题是：如何摆脱错误并使画布不被污染。 （当我在 locahost 工作时 - 一切都很好，但现在我的网站在线，问题就在这里）我已经搜索了这个问题，但没有一个可能的解决方案对我有帮助（也许，因为这是我的第一个网站，我我是一个完整的新手（抱歉，如果有人要求提供网站链接 - 在我完成开发之前这是一个秘密））。我已经阅读了有关 CORS 的信息，如果我在服务器的根目录中创建页面，它会全部消失，但我实际上希望页面保持在它所在的位置 - 在 public_html/ 文件夹中。所以，我猜（尽管此时我真的一无所知，因为我对该主题进行了研究，但对我没有帮助）我应该在某处使用这行代码：

crossorigin="Anonymous"

或者我应该要求我的托管服务器支持团队为我的网站更改服务器中的一些设置，以便即使页面不在服务器的根目录下也能正常工作。

如果我应该使用那行代码 - 请帮我看看在哪里，因为我知道它与 img 标签有关，但我根本没有 img 标签！

如果我可以要求我的托管服务提供商（它的支持团队）“更改服务器上的某些内容，以便错误消失”（大声笑，听起来很愚蠢），那么请指出我到底应该做什么我要求支持团队更改（什么设置）。

我知道我应该添加这个：

<img src="otherdomain.com" crossorigin="Anonymous" />

  <!-- Or with javascript -->
  <script>
   var image = new Image();
   image.crossOrigin = "Anonymous";
    ...
 </script>

在我的代码中的某个地方，但我不知道在哪里，因为我没有任何 img 标签。如果你们会修改我的代码，我会很感激，这样错误就会消失，或者只是指出解决问题的可能方法。

再一次，我是编程的真正新手，所以任何建议和帮助都会非常感激！

提前谢谢你。和平，伙计们。

【问题讨论】：

没有阅读所有内容，但您需要将 videoElement 的 crossOrigin 属性设置为 'anonymous' 并请您的托管服务器支持团队更改服务器中的一些设置。不，它不仅在 img 标签上，还在音频和视频标签上。从您的代码中，您最好将其设置在标记'<video id="v" crossOrigin='anonymous' ...

非常感谢凯多！我会尝试你的建议，让你知道他们是否有效！！！

嗨！！！我将 crossOrigin="anynymous" 添加到视频标签中，但现在视频根本不想加载！我要求我的托管服务器更改一些设置，但他们回答说这是网站开发问题，他们无法帮助我！他们建议我向 htm5 和 php spesialist 寻求帮助....请帮助！ （我使用脚本将视频动态上传到amazon s3）

您好！我解决了问题！！！我只需要在亚马逊 s3 的存储桶设置中更改跨域 CORS 参数！！！！！

@Aneyeball 你能提供你的 s3 xml 来解决 CORS 问题吗？

【参考方案1】：

对于无法在此处解决问题的其他人，这里有一个示例 xml 代码，它应该允许来自您的 s3 存储桶的 CORS。

<!-- Sample policy -->
<CORSConfiguration>
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>