2013-03-04 71 views
2

我有一個背景圖像的畫布。然後,您可以在畫布頂部添加文本,並且可以拖動。我希望用戶能夠上傳可拖動的(並且最終可調整大小)圖像以添加到畫布上。將圖像上傳到現有的HTML5畫布

我現在的代碼如下:

var URL = window.webkitURL || window.URL; 

window.onload = function() { 
    var input = document.getElementById('input'); 
    input.addEventListener('change', handleFiles, false); 
} 

function handleFiles(e) { 
    var ctx = memestage.getContext('2d'); 
    var url = URL.createObjectURL(e.target.files[0]); 
    var img = new Image(); 
    img.onload = function() { 
     img.add(bg); 
     ctx.drawImage(img, 5, 5);  
    } 
    img.src = url; 

} 

任何建議,將不勝感激。更多信息可以根據要求提供。謝謝!

回答

0

以下是KineticJS代碼,用於在學生證上繪製學生姓名和照片。

學生可以在卡片上拖動他們的姓名和照片。

該照片不可調整大小,但我已縮放照片以適合卡片的照片區域。如果更改卡布局,則可以輕鬆調整KineticJS圖像對象中的寬度/高度。

這裏是代碼和一個小提琴:http://jsfiddle.net/m1erickson/9jTtb/

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Prototype</title> 
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 
    <script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.3.0-beta2.js"></script> 
<style> 
#container{ 
    border:solid 1px #ccc; 
    margin-top: 10px; 
} 
</style>   
<script> 
$(function(){ 

    var stage = new Kinetic.Stage({ 
     container: 'container', 
     width: 472, 
     height: 286 
    }); 

    var layer=new Kinetic.Layer(); 
    stage.add(layer); 

    var preload=[]; 
    var images=[]; 
    preload.push("http://dl.dropbox.com/u/139992952/idcard.png"); 
    // I use a demo photo here 
    // Of course in your live site, you would use URL.createObjectURL 
    preload.push("http://macmcrae.com/wp-content/uploads/2009/07/bubblebobble.jpg"); 
    preloadImages(preload,init); 

    function init(images){ 
     KImage("background",0,0,472,286,false,layer,images[0]); 
     KImage("Photo",284,105,160,160,true,layer,images[1]); 
     KText("Name",50,190,"Verdana",27,"black",true,layer,"Sam Student"); 
    } 

    // image preloader 
    function preloadImages(sources,callback){ 
     var images=[]; 
     var count=0; 
     for(var i=0;i<preload.length;i++){ 
      images[i]=new Image(); 
      images[i].onload=function(){ 
       if(++count==preload.length){ 
        callback(images); 
       } 
      } 
      images[i].src=preload[i]; 
     } 
    } 

    // build the specified KineticJS Image and add it to the stage 
    function KImage(id,x,y,width,height,isDraggable,layer,img){ 
     var kImg=new Kinetic.Image({ 
      image:img, 
      id:id, 
      x:x, 
      y:y, 
      width:width, 
      height:height, 
      draggable:isDraggable 
     }); 
     layer.add(kImg); 
     stage.draw(); 
    } 

    // build the specified KineticJS Text and add it to the stage 
    function KText(id,x,y,font,fontsize,color,isDraggable,layer,text){ 
     var kText=new Kinetic.Text({ 
      text:text, 
      id:id, 
      x:x, 
      y:y, 
      fontFamily:font, 
      fontSize:fontsize, 
      fill:color, 
      draggable:isDraggable 
     }); 
     layer.add(kText); 
     stage.draw(); 
    }; 

}); // end $(function(){}); 

</script>  
</head> 

<body> 
    <div id="container"></div> 
    <img id="test"/> 
</body> 
</html> 

[編輯回答OP的其他請求]

我看着你的代碼,但找不到任何PHP上傳腳本,所以這裏是一般的想法。

我假定你已經設置了在php.ini您的配置,尤其是這些:

  • file_uploads = TRUE;
  • upload_max_filesize = 2M; //或者你希望用戶上傳的最大尺寸
  • post_max_size = 8M;

我假設你已經創建了一個文件夾來保存你上傳的文件並賦予了網絡服務器的所有權(或足夠的權限)。下面的代碼假定子目錄是「uploads」。

然後下面的PHP代碼將上傳您的用戶的圖像,並使用與用戶原始文件相同的名稱將其存儲在「uploads」目錄中。

你仍然必須修改這段代碼,以確定你認爲有必要的任何邊界/錯誤檢查。就個人而言,我會做這些至少包括:

  • $ _FILES是不是空的,它是一個數組
  • $ _FILES報告沒有發生任何錯誤
  • 文件名只包含這些英文字符[0-9] [AZ] [。]
  • 文件名不是更than250字符
  • 文件不是空
  • 文件比upload_max_size
  • 文件不大於已這些extensi之一ons:.jpg,.jpeg,.gif,。PNG //或者任何你接受
  • 文件不存在//添加邏輯來覆蓋或保釋上述測試

PHP的一部分是這樣的失敗

  • 抓套路:

    <?php 
    
    var $uploadDirectory="uploads/"; // or whatever dir you set up 
    var $maxFileSize=1000000;   // or whatever max-size you allowed 
    
    // assuming 'file' is the name of your input-type-file tag 
    
    // oops, got an error 
    if ($_FILES["file"]["error"] > 0){echo "Error occured: " . $_FILES["file"]["error"] . "<br>"; } 
    
    // get filepaths 
    var $tempfile=$_FILES["file"]["tmp_name"]; 
    var $basefile=basename($_FILES['file']['name']); 
    
    // save the user's file 
    move_uploaded_file($tempfile, $uploadDirectory . $basefile); 
    
    // do whatever other postback stuff you need to do 
    
    ?> 
    

    和HTML的形式是這樣的:

    <form action="upload.php" enctype="multipart/form-data" method="post"> 
        <input type="hidden" name="MAX_FILE_SIZE" value="2000000" /> 
        <input type="file" name="file"/> 
        <input type="submit" name="submit" value="upload" /> 
    </form> 
    
  • +0

    非常感謝。仍然試圖將其實現到我現有的代碼中,但非常有幫助!無論如何,如果需要,我可以聯繫您尋求幫助? – user2128161 2013-03-04 14:21:36

    +0

    很高興我能幫到你。如果您還有其他問題,我經常訪問stackoverflow!此外,檢查出這個偉大的網站kineticjs的例子:http://www.html5canvastutorials.com/kineticjs/html5-canvas-events-tutorials-introduction-with-kineticjs/ – markE 2013-03-04 15:37:05

    +0

    我在實施到我當前的代碼這樣的煩惱。基本上,我能夠將圖像添加到畫布上,但後來我的創建按鈕不再起作用。我認爲這與預載功能有關。這裏是我的完整代碼,並沒有試圖添加這個。任何幫助都是極好的。再次感謝! 代碼:http://pastebin.com/BF2fmqdc – user2128161 2013-03-05 01:30:18