Question

我有以下错误消息：

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" width="100%" height="auto" 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>

JQUERY：

 $('#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的内容，如果我将页面放在服务器的根目录下，它将会全部启动但我实际上希望页面位于STAY位于它的位置 - 在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标签。如果你们要修改我的代码，那么错误就会消失，或者只是指出解决问题的可能方法。

同样，我对编程一般来说都是新手，所以任何建议和帮助都会非常令人沮丧！

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

Answer 1

对于其他无法解决问题的人来说，xml代码示例应该允许来自s3存储桶的CORS。

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

从canvas获取img（toDataURL） - ＆gt;受污染的画布可能无法出口

1 个答案: