0

关于画布图像的模糊，我在 javascript 中进行了一些更改。但不知何故，代码中存在错误。我似乎找不到它。代码是这样的：http ://www.quasimondo.com/StackBlurForCanvas/StackBlur.js ，正如您在此处看到的，这是我为满足我的需要所做的更改。希望你能看到我用它做什么。

我不知道问题所在，但浏览器控制台日志显示：

Uncaught TypeError: Cannot call method 'getContext' of null

他们指的是这一行：

var context = canvas.getContext("2d");

无论我使用的是 RGB 还是 RGBA，都在模糊功能中

这是我对链接中原始脚本中第一个函数的更改。

 function stackBlurImage( imgURL, canvasID, radius, blurAlphaChannel )
{
    var img = new Image();

    if (canvasID == "") {
        canvasID = "tempCanvas";
    }

    img.onload = function() {
        var canvas = document.createElement("canvas");

        canvas.id = canvasID;

        var w = img.naturalWidth;
        var h = img.naturalHeight;

        canvas.style.width  = w + "px";
        canvas.style.height = h + "px";
        canvas.width = w;
        canvas.height = h;

        var context = canvas.getContext("2d");
        context.clearRect( 0, 0, w, h );
        context.drawImage( img, 0, 0 );

        if ( isNaN(radius) || radius < 1 ) return;

        if ( blurAlphaChannel )
            stackBlurCanvasRGBA( canvasID, 0, 0, w, h, radius );
        else 
            stackBlurCanvasRGB( canvasID, 0, 0, w, h, radius );

    };
    img.src = imgURL;

另外我应该提到，在两个函数的末尾我都添加了这个stackBlurCanvasRGBA并创建了这个函数：stackBlurCanvasRGBsetBlurredImage(id);

function setBlurredImage(canvasID) {
    var canvas  = document.getElementById( canvasID );
    var image = document.getElementById( 'background' );
    var dataURI = canvas.toDataUrl("image/png");
    el.style.background = "url(" + dataURI + ")";
}

这是因为我不希望画布成为我网页的背景图像，这也使我更容易通过 CSS 操作背景。

4

1 回答 1

0

嘿，我很久以前就看到了这个错误，这里有一个修复它的帖子：

TypeError：无法调用 null 的方法“getContext”（匿名函数）

让我知道这是否对您有帮助或您对此有任何疑问。

于 2013-06-04T14:20:18.900 回答