挑战：修复Canvas插件与CORS一起使用？

Question

我正在拜访任何Canvas专家寻求帮助！

我需要修复jQuery / Canvas插件。我在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。我和原始开发者有documented the issue，但我怀疑他是否会解决这个问题（自从他以一种主要方式触及它以来已有多年）。

Canvas大师可能很容易上班。

该插件的工作原理是：

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

我试过这样做：

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

但它并没有解决问题。

理想情况下，我希望能够提供$('.image')（或只是一个网址，因为我不需要将模糊不清的图像弄乱DOM），并且{{ 1}}元素，而不是两个ID。这样可以更容易地在事件上切换模糊图像（如菜单打开时模糊图像等）。

如果重要，我会在Ember应用程序中使用它。我也不想使用某种PHP代理脚本，这似乎是黑客入侵的方式。

更新

我在这里添加了一个例子： http://dev.rickanddrew.com/

图像就在这里。如果你看一下响应头，我认为CORS设置正确： http://image.rickanddrew.com/image.jpg

ANSWER

感谢Ken，我明白了！这就是我现在运行它的方式：

$('.canvas')

谢谢！

Answer 1

＃1 CORS订单很重要

未正确使用CORS请求。就像现在一样，设置了图片代码src，然后在模糊脚本crossOrigin中设置了帖子：

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

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

    ...

在图片crossOrigin设置之前，src必须设置为，因此无法正常工作。 CORS使用请求与URL请求一起发送（如果服务器不喜欢它，没有我们的图像......）。

要解决，请将crossOrigin添加到img标记本身：

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

如果您愿意或需要动态设置src，那么

或者不要设置src，直到加载JavaScript为止（在这种情况下，我建议动态创建图像元素）：< / p>

<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。

服务器也有一个有趣的响应，其中图像请求似乎被解释为纯文本。但我没有进一步挖掘，因为上面的步骤应该首先解决（或者我只是眨眼:) :)