html5圖像濾鏡與畫布

我已經從這個http://www.storminthecastle.com/projects/imagefilters1/下載源代碼。這是關於在HTML5畫布中的一些圖像處理。html5圖像濾鏡與畫布

裏面的來源，它會加載位於本地目錄中的圖片...

function reset() { 
    imageURL = "./sandbox.jpg"; 
    imageFilter = grayscale; 
    document.querySelector("#filename").innerHTML = ""; 
    update(); 
    }

以上是我的項目。但我試圖從一個URL加載圖像，所以我將其修改爲以下...

function reset() { 
    imageURL = "http://xxxxxx.jpg"; 
    imageFilter = grayscale; 
    document.querySelector("#filename").innerHTML = ""; 
    update(); 
    }

當我測試它時，圖像顯示正確。但是，所有功能都無法使用，我不知道爲什麼。我不知道爲什麼它不能以url爲參數，我不知道如何修改它以使其工作。任何幫助？

來源

2013-09-27 Sky

[瀏覽器Canvas CORS支持跨域加載的圖像處理]的可能重複（http://stackoverflow.com/questions/7129178/browser-canvas-cors-support-for-cross-domain-loaded-image-manipulation ）。如果加載圖像觸發CORS，則只能顯示圖像，但不能更改，設置或獲取某些濾鏡所需的像素。 – K3N

從另一個來源加載圖像時，必須先將圖像繪製到畫布上，然後更改像素，應用濾鏡.. 有一個名爲[Lomo +]的Chrome擴展程序（https://chrome.google.com/webstore/detail/lomo +/mihmjgdafbdggpgjfaeinppnlnpgelnj？hl = en）你應該看到它的來源 –

你好，從鏈接，它提到它正在Chrome和Firefox的權利？我使用的是Chrome，但它不起作用。我是否錯過了一些編碼以使其工作？在編碼中，有'context.drawImage（image，0，0，canvas.width，canvas.height）;'所以我猜它已經被繪製到畫布中了？至於變化像素和應用濾鏡，我對它並不熟悉，也沒有線索去做。我會看看LOMO。 – Sky

感謝您提供的鏈接。我進一步閱讀COR問題，並設法找到要添加的那一行編碼。

img.crossOrigin = ''; 
//img domain different from app domain 
img.src = 'http://xxx.jpg';

只需設置圖像的crossOrigin屬性以使其工作。基本上，這將允許跨域圖像進行操作。沒有它，任何跨域將被阻止，你會得到安全例外。真的非常感謝您的幫助！ :)

要添加，我只測試使用Chrome和工作。

來源

2013-09-28 19:29:31 Sky

html5圖像濾鏡與畫布

回答

相關問題