动态加载JS的GrayScale图像

Question

我试着按照这个例子来加载灰度图像http://www.html5canvastutorials.com/advanced/html5-canvas-grayscale-image-colors-tutorial/。由于我的舞台有许多其他对象，我尝试使用以下脚本：

var dImage1 = new Kinetic.Image({
                drawFunc: function (canvas) {
                    var context2 = canvas.getContext();
                    var x = 0;
                    var y = 0;
                    context2.drawImage(imageObj, x, y);
                    var imageData = context2.getImageData(x, y, imageObj.width, imageObj.height);
                    var data = imageData.data;

                    for (var i = 0; i < data.length; i += 4) {
                        var brightness = 0.34 * data[i] + 0.5 * data[i + 1] + 0.16 * data[i + 2];
                        data[i] = brightness;
                        data[i + 1] = brightness;
                        data[i + 2] = brightness;
                    }
                    context2.putImageData(imageData, x, y);
                }
            });
            layer1.add(dImage1);
            stage.add(layer1);

            var imageObj = new Image();
            imageObj.onload = function () {
                drawImage(this);
            };
            imageObj.src = .....;

我得到了这个错误: TypeMismatchError。我很感谢你的建议，提前谢谢。

Answer 1

我在你的代码中发现了几个陷阱...

首先，即使规范说它是可选的，您也需要指定上下文模式("2d")

// must specify "2d"

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

其次，在Kinetic.Image中使用图像之前，您需要完全加载图像

因此，将Kinetic.Image创建放在一个函数中，并在imageObj.onload中调用它：

function makeKineticImage(){

    var dImage1 = new Kinetic.Image({
        drawFunc: function (canvas) {
            var context2 = canvas.getContext("2d");
            var x = 0;
            var y = 0;
            context2.drawImage(imageObj, x, y);
            var imageData = context2.getImageData(x, y, imageObj.width, imageObj.height);
            var data = imageData.data;

            for (var i = 0; i < data.length; i += 4) {
                var brightness = 0.34 * data[i] + 0.5 * data[i + 1] + 0.16 * data[i + 2];
                data[i] = brightness;
                data[i + 1] = brightness;
                data[i + 2] = brightness;
            }
            context2.putImageData(imageData, x, y);
        }
    });
    layer1.add(dImage1);
}

stage.add(layer1);

// you must create your Kinetic.Image AFTER your image is loaded

var imageObj = new Image();
imageObj.onload = function () {
    makeKineticImage();
};
imageObj.src = .....;