如何將圖像上傳到HTML5畫布中

我目前使用http://paperjs.org來創建HTML5畫布繪圖應用程序。我想讓用戶上傳圖片到畫布中。我知道我需要進行登錄和註冊，但有沒有更簡單的方法？我已經看到了HTML5的拖放上傳。如何將圖像上傳到HTML5畫布中

2012-06-06 user1438026

104

我假定你的意思是，將圖像加載到畫布上，而不是從畫布上載圖像。

這很可能是通過他們所具有的一切帆布文章讀一個好主意，在這裏 https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images

但基本上你想要做的是在JavaScript中創建一個圖像，並設置image.src =到任何文件位置。在從用戶的圖像加載圖像的情況下，您將要使用文件系統API。

這裏扔在一起一個簡單的例子：http://jsfiddle.net/influenztial/qy7h5/

function handleImage(e){ 
    var reader = new FileReader(); 
    reader.onload = function(event){ 
     var img = new Image(); 
     img.onload = function(){ 
      canvas.width = img.width; 
      canvas.height = img.height; 
      ctx.drawImage(img,0,0); 
     } 
     img.src = event.target.result; 
    } 
    reader.readAsDataURL(e.target.files[0]);  
}

來源

2012-06-06 00:53:30 DerekR

很好做。我不知道關於FileReader –

IE10 +與FileReader - http://caniuse.com/filereader - 但一個polyfill顯然存在，https://github.com/Jahdrien/FileReader –

你將如何運行代碼沒有按鈕？這個例子中的「e」是指什麼？ – Waltari

-4

<script> 
window.onload = function() { 
var canvas=document.getElementById(「drawing」); // grabs the canvas element 
var context=canvas.getContext(「2d」); // returns the 2d context object 
var img=new Image() //creates a variable for a new image 

img.src= 「images/vft.jpg」 // specifies the location of the image 
context.drawImage(img,20,20); // draws the image at the specified x and y location 
} 
</script>

檢查Demo

來源

2012-11-22 14:25:20

如何將圖像上傳到HTML5畫布中

回答

相關問題