javascript - 挑战: Fix a Canvas plugin to work with 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') (或者只是一个 URL，因为我不需要不模糊的图像来弄乱 DOM ) 和 $('.canvas') 元素，而不是两个 ID。这样，在事件中切换模糊图像可能会更容易一些(例如在菜单打开时模糊图像等)。

如果重要的话，我正在 Ember 应用程序中使用它。我也不想使用某种 PHP 代理脚本，这似乎是一种可行的方法。

更新

我在此处添加了一个示例: http://dev.rickanddrew.com/

图片就在这里。如果您查看响应 header ，我认为 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已设置帖子:

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 (在这种情况下，我建议也动态创建图像元素):

<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必须使用。

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