獲取IMG從畫布（toDataURL） - >被污染的帆布不得出口

我已經以下錯誤消息：獲取IMG從畫布（toDataURL） - >被污染的帆布不得出口

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的內容，如果我將頁面放在服務器的根目錄下，它將全部去，但我實際上希望頁面保持位於它的位置 - 在public_html /文件夾中。所以，我猜（雖然我真的很無能這裏在這一點上，像我一樣在主題的研究，並沒有幫助我）我應該選擇使用此行代碼的地方：

crossorigin="Anonymous"

或者我應該問我的託管服務器支持團隊來更改我的網站的服務器中的一些設置，以便即使頁面不在服務器的根目錄下也能正常工作。

如果我使用該行代碼 - 請幫我在哪裏，因爲我知道它是與img標籤，但我沒有img標籤了！

如果我可以讓我的託管服務提供商（它的支持團隊）「改變服務器上的某些東西，這樣錯誤就會消失」（大聲笑，聽起來很愚蠢），那麼請告訴我什麼exactely我應該要求支持團隊改變（什麼設置）。

我知道我應該補充一點：

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

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

的地方在我的代碼，但我不知道，因爲我沒有任何img標籤。如果你們會修改我的代碼，我會補充一點，這樣錯誤就會消失，或者只是指出解決問題的可能方式。

同樣，我真正的新手到編程一般，所以任何建議和幫助將是非常apreciated！

預先感謝您。和平，夥計們。

來源

2017-02-22 Aneyeball

沒有看過所有，但你需要設置你的videoElement的'crossOrigin'屬性''anonymous'' **和**問你的託管服務器支持團隊在服務器中更改某些設置。沒有它不僅在img標籤上，它也在音頻和視頻標籤上。從你的代碼，你會更好地在標記中設置''

謝謝你，Kaiido！我會嘗試你的建議，並讓你知道他們是否工作！ – Aneyeball

嗨！我將crossOrigin =「anynymous」添加到視頻標籤，但現在視頻並不想加載！而且我讓我的託管服務器改變了一些設置，但他們迴應說，這是網站開發的挑戰，他們不能幫助我！他們建議我向htm5和php spesialist尋求幫助....請幫助！（我使用腳本動態地將視頻上傳到亞馬遜S3） – Aneyeball

給別人誰一直沒能在這裏解決的問題是一個示例XML代碼，應該讓CORS從S3桶。

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

來源

2017-12-09 19:43:27 kenny

獲取IMG從畫布（toDataURL） - >被污染的帆布​​不得出口

回答

相關問題

獲取IMG從畫布（toDataURL） - >被污染的帆布不得出口