イメージをHTML5キャンバスにアップロードする方法

Question

現在、http://paperjs.orgを使用してHTML5キャンバス描画アプリケーションを作成しています。私はユーザーがキャンバスに画像をアップロードできるようにしたい。私はログインとサインアップをする必要があることを知っていますが、より簡単な方法がありますか？私はHTML5ドラッグアンドドロップのアップロードを見てきました。

Answer 1

イメージをキャンバスにロードし、キャンバスからイメージをアップロードしないことを意味します。

おそらく、彼らが持っているすべてのキャンバスの記事を読むことをお勧めだろう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]);  
} 

Answer 2

<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