動力學用戶上傳圖像

Question

我有一個kineticjs框與文本輸入和「onLoad」圖像（尤達）。我需要實現這個「ImageLoader的」（Fiddle）

我有這個從畫布我放在一起，但不能讓它成爲我的新動力學Fiddle

function loadThisImage(src) { 
    img = new Image(); 
    img.onload = function() { 
     draw(img, true, false); 
    }; 
    img.src = src; 
    img.view = { 
     left: 42, 
     top: 20, 
     width: 160, 
     height: 120, 
     z: 0 
    }; 
} 


var ctx = canvas.getContext('2d'); 


function draw(img, withAnchors, withBorders) { 
    // clear the canvas 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
    // draw the image 
    var view = img.view; 
    ctx.drawImage(img, 0, 0, img.width, img.height, view.left, view.top, view.width, view.height); 

    // optionally draw the draggable anchors 
    if (withAnchors) { 
     drawDragAnchor(view.left, view.top); 
     drawDragAnchor(view.left + view.width, view.top); 
     drawDragAnchor(view.left + view.width, view.top + view.height); 
     drawDragAnchor(view.left, view.top + view.height); 
    } 

將不勝感激，如果有人可以幫我把我的「上傳圖片「到我的動力學。 在此先感謝:)

Answer 1

僅適應代碼從該「imageLoader」小提琴來創建一個新的Kinetic.Image並將其添加到圖層，而不是直接繪製到畫布上下文。

//image loader 
var imageLoader = document.getElementById('imageLoader'); 
    imageLoader.addEventListener('change', handleImage, false); 

function handleImage(e){ 
    var reader = new FileReader(); 
    reader.onload = function(event){ 
     var img = new Image(); 
     img.onload = function(){ 
      layer.add(new Kinetic.Image({ 
       x: 200, 
       y: 50, 
       image: img, 
       width: img.width, 
       height: img.height, 
       draggable: true 
      })); 
      text.moveToTop(); 
      layer.draw(); 
     } 
     img.src = event.target.result; 
    } 
    reader.readAsDataURL(e.target.files[0]);  
} 

小提琴：http://jsfiddle.net/pDW34/14/