挑戰：修復Canvas插件以與CORS一起使用？

Question

我正在呼吁任何Canvas專家尋求幫助！

我需要修復jQuery / Canvas插件。 在畫布方面，我很虛弱。

基本上，我希望能夠模糊處理圖像，這是使用以下Canvas腳本完成的： http : //www.quasimondo.com/BoxBlurForCanvas/FastBlur2Demo.html

https://github.com/Quasimondo/QuasimondoJS/blob/master/blur/StackBoxBlur.js

但這不適用於托管在另一個域上的圖像（我在app.example.com和api.example.com上都有所有內容）。 因此，我需要對其進行更新以尊重CORS / crossOrigin。 我已經與原始開發人員記錄了該問題 ，但是我懷疑他是否會解決此問題（自從他以一種主要方式接觸它多年之后）。

對於Canvas大師來說，工作可能很容易。

該插件的工作方式如下：

stackBoxBlurImage( sourceImageID, targetCanvasID, radius, blurAlphaChannel, iterations );

我嘗試這樣做：

var img = document.getElementById( imageID );
    img.crossOrigin = '';
var w = img.naturalWidth;
var h = img.naturalHeight;

但這並不能解決問題。

理想情況下，我希望能夠提供$('.image') （或僅URL），因為我不需要將模糊的圖像弄亂DOM）和$('.canvas')元素，而不是兩個ID。 這樣，在事件中切換出模糊的圖像可能會更容易一些（例如，在菜單打開時模糊出圖像等）。

如果有關系，我將在Ember應用程序中使用它。 我也不想使用某種PHP代理腳本，這似乎是一種破解方式。

UPDATE

我在這里添加了一個打破它的示例： http : //dev.rickanddrew.com/

圖像在這里。 如果您查看響應標題，那么我認為CORS設置正確： http : //image.rickanddrew.com/image.jpg

回答

感謝下面的Ken，我知道了！ 這是我現在運行的方式：

function stackBoxBlurImage( imageURL, $canvasObj, radius, blurAlphaChannel, iterations )
{

// Cache vars
var img = document.createElement('img');
var canvas = $canvasObj[0];

// Make it work with CORS
img.crossOrigin = '';
img.src = imageURL;     

// Wait till image loads
img.onload = function(e) {

    // Setup image vars         
    var w = img.naturalWidth;
    var h = img.naturalHeight;

    // Setup Canvas size
    canvas.style.width  = w + "px";
    canvas.style.height = h + "px";
    canvas.width = w;
    canvas.height = h;

    // Add image to Canvas
    var context = canvas.getContext("2d");  
    context.drawImage(img, 0, 0, canvas.width, canvas.height);
    context.clearRect( 0, 0, w, h );
    context.drawImage( img, 0, 0 );    

    // Abort if radius is invalid
    if ( isNaN(radius) || radius < 1 ) return;

    // Blur!
    stackBoxBlurCanvasRGB( canvas, 0, 0, w, h, radius, iterations );
};
}

謝謝！

Answer 1

＃1 CORS訂單很重要

CORS請求未正確使用。 現在，設置圖像標簽的src ，然后在模糊腳本crossOrigin設置為post：

function stackBoxBlurImage( imageID, canvasID, radius, blurAlphaChannel, iterations )
{

    var img = document.getElementById( imageID );   // we already have the image.
        img.crossOrigin = '';                       // too late for this...

    ...

這將不起作用， crossOrigin必須在設置image src 之前設置crossOrigin 。 CORS使用情況請求與URL請求一起發送（如果服務器不喜歡，則沒有適合我們的圖像...）。

因此，要解決此問題，可以將crossOrigin添加到img標簽本身：

<img id="image" crossOrigin="anonymous" src="image.jpg">

或不設置src直到如果你喜歡或需要動態設置的JavaScript加載src （在這種情況下，我會建議創建圖像元素動態以及）：

<img id="image">

然后：

var image = document.getElementById("image");
image.crossOrigin = "";
image.onload = blur;
image.src = "image.jpg";

function blur() {
    stackBoxBlurImage( 'image', 'canvas', 30);              
}

＃2負載很重要

腳本的調用方式也存在一個問題，該腳本可能會阻止圖像數據可用（新負載，無緩存等）。 如果圖像已經存在於緩存中，則很難檢測到此問題（但是，該站點的新用戶在第一次加載時可能看不到任何內容。）。

更改此：

jQuery(document).ready(function(){
    stackBoxBlurImage( 'image', 'canvas', 30);              
})

至：

$(window).load(function() {
    stackBoxBlurImage( 'image', 'canvas', 30);
})

ready僅表示DOM已准備就緒，但不一定表示圖像數據。 為此必須使用load 。

來自服務器的響應也很有趣，其中圖像請求似乎被解釋為純文本。 但是我沒有進一步挖掘，因為上面的步驟應該首先解決（或者我只是眨了眨眼:)）：