使用按鈕加載圖像（Kkinetic）

我試圖在「div」中顯示用戶感謝「輸入文件」選擇的圖片。
我不知道我的代碼有什麼問題。我正在使用（嘗試使用）Kinectic.JS庫。這裏是我的代碼：使用按鈕加載圖像（Kkinetic）

`<html> 
    <head> 
     <style type="text/css"> 
      #droite { float:right; } 
      #gauche { float:left; } 
     </style> 
     <script src="./Librairies/Canvas/kinetic-v4.5.4.js"></script> 
     <title>Kinetic test</title> 
    </head> 
<body> 
    <div id="gauche"></div> 
    <form name=test> 
     <div id="droite"><br><br> 
      Please specify the image you want to appear<br> 
      <input type="file" name="uploadimage" accept="image/*"> 
      <br><button id="addImg" value="Upload" >Upload</button> 
    </form> 
    <script> 
     function addImage(){ 
      var stage = new Kinetic.Stage({ 
      container: "gauche", 
      width: 500, 
      height: 400 
     }); 
     var layer = new Kinetic.Layer(); 

     var imageObj = new Image(); 
     imageObj.onload = function() { 
      var myImage = new Kinetic.Image({ 
      x: 140, 
      y: stage.getHeight()/2 - 59, 
      image: imageObj, 
      width: 106, 
      height: 118 
      }); 
      layer.add(myImage); 
      stage.add(layer); 
     }; 

     var f = document.getElementById('uploadimage').files[0]; 
     var name = f.name; 
     var url = window.URL; 
     var src = url.createObjectURL(f); 

     imageObj.src = src; 
     //console.log(imageObj); 
     //alert(src); 
    } 

     document.getElementById('addImg').addEventListener('click',function(){ addImage(); }, false); 
     </script> 
     <form name=testo> 
      <br>Type some text <br> 
      <input type="text" name="texte"> <input type="submit" value="Print"> 
      </div> 
     </form> 
    </body> 
</html>`

來源

2013-06-25 claude ngadi

我還沒有測試這一點，但我覺得你期待什麼，什麼是實際發生的情況是不同的。文件輸入用於表單提交。您將張貼您的表單，服務器將收到一個可以處理的文件。

如果您希望獲取位圖數據並將其顯示在畫布上，可以調查FileReader的使用。

http://www.html5rocks.com/en/tutorials/file/dndfiles/

來源

2013-06-25 14:51:13 oooyaya

使用按鈕加載圖像（Kkinetic）

回答

相關問題