反轉顏色HTML5畫布教程

所以這個網站http://www.html5canvastutorials.com/advanced/html5-canvas-invert-image-colors-tutorial/有一個反轉顏色的教程。我一直在嘗試做類似的事情，雖然我沒有任何錯誤，但它不起作用。另外我在本地服務器上運行它，因爲我最初遇到安全錯誤，導致它停止正常運行，現在Chrome在代碼中運行時沒有問題。我只是在屏幕上看不到任何改變。我決定把它們的代碼轉移到JSFiddle中，以便看到它的工作，然後通過更改值來學習，但是當我點擊運行時darth vader圖像不會反轉。這是否意味着他們的示例代碼缺少一些東西，並解釋爲什麼我看不到我正在處理的任何更改？反轉顏色HTML5畫布教程

感謝您的任何幫助。

按照要求http://jsfiddle.net/user69247/fMwp5/1/

（對不起它想發佈的還有因爲我的jsfiddle鏈接的代碼）

<html> 
    <head> 
    <style> 
    body { 
    margin: 0px; 
    padding: 0px; 
    } 
</style> 
</head> 
<body> 
    <canvas id="myCanvas" width="578" height="400"></canvas> 
    <script> 
     function drawImage(imageObj) { 
    var canvas = document.getElementById('myCanvas'); 
    var context = canvas.getContext('2d'); 
    var x = 69; 
    var y = 50; 

    context.drawImage(imageObj, x, y); 

    var imageData = context.getImageData(x, y, imageObj.width, imageObj.height); 
    var data = imageData.data; 

    for(var i = 0; i < data.length; i += 4) { 
     // red 
     data[i] = 255 - data[i]; 
     // green 
     data[i + 1] = 255 - data[i + 1]; 
     // blue 
     data[i + 2] = 255 - data[i + 2]; 
    } 

    // overwrite original image 
    context.putImageData(imageData, x, y); 
    } 

    var imageObj = new Image(); 
    imageObj.onload = function() { 
    drawImage(this); 
    }; 
    imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg'; 
</script>

來源

2014-06-05 user69247

你能提供你所創建的小提琴 - 我們可以看看，看看有什麼出錯呢。 – PeteAUK

對不起，應該做到這一點，現在就添加:) – user69247

的問題是，你需要使用一個本地託管圖像 - 或數據網址。我在小提琴中遇到的錯誤是有一個跨瀏覽器的問題。以下修改小提琴可以正常工作。

image.src = 'data:image/png;base64,iVBOR....seefiddle'

http://jsfiddle.net/fMwp5/2/

來源

2014-06-05 11:14:57 PeteAUK

哦，對，因此它基本上就像我之前設置MAMP的代碼之前所遇到的問題。這給了我一些東西，至少在搞清楚我在做什麼不太合適。謝謝 – user69247

反轉顏色HTML5畫布教程

回答

相關問題