키네틱 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 내 단계는 많은 다른 목적을 가지고 있기 때문에, 나는 follwing을 스크립트를 사용했습니다. 미리 감사드립니다.

Answer 1

나는 ("2D")

이

먼저, 사양이이 옵션 말한다하더라도, 당신은 상황에 맞는 모드를 지정해야합니다 ... 코드에서 개는 몇 참조

// must specify "2d" 

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

두 번째

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

012 : 당신은 당신이 Kinetic.Image

그래서 함수에 Kinetic.Image 생성을 넣고 imageObj.onload에 전화에 사용하기 전에 완전히 이미지를로드 할 필요