Get IMG из холста (toDataURL) -> Tainted холсты не могут быть экспортированы

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 - все было хорошо, но теперь мой сайт в сети, и вот в чем проблема) Я искал проблему, и ни одно из возможных решений не помогло мне (возможно, потому что это мой первый веб-сайт, m полный новичок в этом (извините, если кто-то может попросить дать ссылку на сайт - это секрет, пока я не закончу его разработку)). Я читал о CORS, и если бы я сделал страницу в корне сервера, все будет, но я действительно хочу, чтобы страница STAY находилась там, где она есть, - в папке public_html /. Таким образом, я предполагаю, что (хотя я действительно невежественны здесь в этот момент, как я сделал исследование по этой теме и это не помогло мне), я должен либо использовать эту строку кода где-то:

crossorigin="Anonymous" 

или я должен попросить команду поддержки моего сервера хостинга изменить некоторые настройки на сервере для моего сайта, чтобы он работал, даже если страница не находится в корневом каталоге сервера.

Если я должен использовать эту строку кода, пожалуйста, помогите мне, где, потому что я знаю, что это имеет какое-то отношение к тегу img, но у меня нет тега img вообще!

И если я могу попросить своего хостинг-провайдера (его команды поддержки) «что-то изменить на сервере, чтобы ошибка исчезла» (lol, звучит как тупой, как есть), пожалуйста, укажите, что именно должен ли я попросить группу поддержки изменить (какие настройки).

Я знаю, что я должен добавить следующее:

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

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

где-то в моем коде, но я не знаю, где, как и у меня нет какого-либо IMG тега. Я бы оценил, если вы, ребята, измените мой код, чтобы ошибка исчезла или просто указала мне на возможные способы решения проблемы.

Опять же, я настоящий новичок в программировании в целом, поэтому любые советы и помощь будут действительно оценены!

Заранее спасибо. Мир, ребята.

Answer 1

Другим, кто не смог решить проблему, вот пример кода xml, который должен позволить CORS из вашего ведра s3.

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