Question

我有一个骨干应用程序，我想使用StackBlur，但不知何故它不起作用。

我使用Codeigniter作为后端，所以在我的主索引页面中，我在<body>中称为“home.php”：

<div class="bg" data-src="demopics/bgimage.jpg" id="bgc"></div>

在我的RequireJS配置文件中，我这样做：

paths: {
    jquery: 'http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min',
    jqueryEffects: 'lib/jquery_effects/jquery.effects',
    all: 'lib/all/all',
    blur: 'http://www.quasimondo.com/BoxBlurForCanvas/StackBoxBlur',
},

shim: {
    backbone: {
        deps: ['jquery', 'lodash', 'less', 'jqueryEffects', 'all', 'blur'],
        exports: 'Backbone'
    },
    lodash: {
        exports: '_'
    },
    handlebars: {
        exports: 'Handlebars'
    },
    all: {
        deps: ['jquery']
    },
    blur: {
        deps: ['jquery']
    },
    jqueryEffects : {
        deps: ['jquery', 'all', 'blur']
    }
}

在我的jquery_effects.js我有：

$(function() {

window.onload=function(){
//create image object
var imageObj = new Image();

    //when image is finished loading
imageObj.onload = function() {
            //get size
            var w = imageObj.naturalWidth;
            var h = imageObj.naturalHeight;

            var canvas = document.createElement("canvas");
            canvas.width = w;
            canvas.height = h;
            //create virtual canvas
            var ctx = canvas.getContext('2d');

            //draw the image on it
            ctx.drawImage(imageObj, 0, 0);

            //apply the blur
            stackBoxBlurCanvasRGB(ctx, 0, 0, w, h, 11, 2);

            //add grey filter
            ctx.fillStyle='rgba(64,64,64,0.4)';
            ctx.fillRect(0,0,w,h);

            //and display it in 1 second using a fade
            var $canvas = $(canvas) 

            $("#bg").append(canvas);
            $canvas.show();
            var canvasRatio = $canvas.width()/$canvas.height();
            var windowRatio = $(window).width()/$(window).height();
            if (canvasRatio > windowRatio){
                $canvas.css({
                    "height": "100%",
                    "width" : "auto"
                });
            } else {
                $canvas.css({
                    "width": "100%",
                    "height": "auto"
                });
            }
            $canvas.css({
                "marginLeft" : -$canvas.width()/2+"px",
                "marginTop" : -$canvas.height()/2+"px"
            });
            window.onresize = function(){
                var canvasRatio = $canvas.width()/$canvas.height();
                var windowRatio = $(window).width()/$(window).height();
                if (canvasRatio > windowRatio){
                    $canvas.css({
                        "height": "100%",
                        "width" : "auto"
                    });
                } else {
                    $canvas.css({
                        "width": "100%",
                        "height": "auto"
                    });
                }
                $canvas.css({
                    "marginLeft" : -$canvas.width()/2+"px",
                    "marginTop" : -$canvas.height()/2+"px"
                 });
            }

};

//set the source of the image from the data source
imageObj.src = $('#bgc').data("src");

 }

脚本被加载，但没有任何反应，我只是得到一个白屏...... data-src是否存在问题？

BackboneJS + RequireJS - Blurscript无效

0 个答案: