帆布getImageData函數拋出異常鉻

這段代碼是基於帆布，它的圖像轉換爲灰度，然後應用在圖像的一些顏色疊加，它正確工作在Mozilla Firefox瀏覽器但不是在鉻。在鉻它會給我一個錯誤信息。帆布getImageData函數拋出異常鉻

未捕獲的拋出：DOMException：未能執行「getImageData」上「CanvasRenderingContext2D」：畫布已由跨源數據的污染。

請給我提供了一些解決方案，
在此先感謝。

<script> 
    function tintImage(imgElement, tintColor) { 
     // create hidden canvas (using image dimensions) 
     var canvas = document.createElement("canvas"); 
     canvas.width = imgElement.offsetWidth; 
     canvas.height = imgElement.offsetHeight; 

     var ctx = canvas.getContext("2d"); 
     ctx.drawImage(imgElement, 0, 0); 
     var map = ctx.getImageData(0, 0, 1000, 1000); 
     var imdata = map.data; 

     // convert image to grayscale 
     var r, g, b, avg; 
     for (var p = 0, len = imdata.length; p < len; p += 4) { 
     r = imdata[p]; 
     g = imdata[p + 1]; 
     b = imdata[p + 2]; 

     avg = Math.floor((r + g + b)/3); 

     imdata[p] = imdata[p + 1] = imdata[p + 2] = avg; 
     } 

     ctx.putImageData(map, 0, 0); 

     // overlay filled rectangle using lighter composition 
     ctx.globalCompositeOperation = "overlay"; 
     ctx.globalAlpha = 0.5; 
     ctx.fillStyle = tintColor; 
     ctx.fillRect(0, 0, canvas.width, canvas.height); 

     // replace image source with canvas data 
     imgElement.src = canvas.toDataURL(); 
    } 



    /// some buttons for testing the demo 



    var redBtt = document.createElement("button"); 
    redBtt.appendChild(document.createTextNode("Red")); 
    redBtt.onclick = function() { 
     tintImage(
     document.getElementById('myImage'), 
     "#d60000" 
    ); 
    } 
    document.body.appendChild(redBtt); 


    var grnBtt = document.createElement("button"); 
    grnBtt.appendChild(document.createTextNode("Green")); 
    grnBtt.onclick = function() { 
     tintImage(
     document.getElementById('myImage'), 
     "#000000" 
    ); 
    } 
    document.body.appendChild(grnBtt); 


    var bluBtt = document.createElement("button"); 
    bluBtt.appendChild(document.createTextNode("Blue")); 
    bluBtt.onclick = function() { 
     tintImage(
     document.getElementById('myImage'), 
     "#050c8c" 
    ); 
    } 
    document.body.appendChild(bluBtt); 

    </script>

<img id='myImage' src="https://yt3.ggpht.com/-gjxoCu8Fu3c/AAAAAAAAAAI/AAAAAAAAAAA/Uji17DdykF4/s900-c-k-no-mo-rj-c0xffffff/photo.jpg" /> 

<br/>

來源

2017-05-28 Ahmad Hassan

這不止，getImageData功能的Cross Origin Resource Sharing (CORS)問題。

要解決此問題，需要...

ꜰɪʀꜱᴛ

集crossorigin屬性的圖像元素，像這樣......

<img crossorigin="anonymous" src="www.example.com/myImage.png">

ꜱᴇᴄᴏɴᴅ

將圖像放置在您的本地服務器或支持跨源資源共享的網站（即。 imgur.com）

來源

2017-05-28 10:05:56

另一種可能性：您可能正在瀏覽本地文件系統中的文件，並導致chrome上的問題。你可以用[XAMPP]（https://www.apachefriends.org/index.html） –

創建一個服務器謝謝！ @gaand，但每當我設置圖像crossorigin =「匿名」。它會消失。 –

對不起，這是我的錯誤，仔細閱讀你的答案後，我的代碼運行完美，謝謝@gaand –

帆布getImageData函數拋出異常鉻

回答

相關問題