Kinetic JS - 加載GrayScale圖像

Question

我試圖按照此示例加載灰度圖像http://www.html5canvastutorials.com/advanced/html5-canvas-grayscale-image-colors-tutorial/。由於我的舞臺有許多其他的對象，我試圖用follwing腳本：

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 = .....;