javascript - 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

FileReader* は必要ありません。ディスク上のファイルへのシンボリック リンクを直接作成するURL.createObjectURLメソッドを使用することをお勧めします。これにより、メモリ使用量が少なくなり、待機する非同期イベントが 1 つだけ ( の 1 つimg.onload) になるという利点が追加されます。

document.getElementById('inp').onchange = function(e) {
  var img = new Image();
  img.onload = draw;
  img.onerror = failed;
  img.src = URL.createObjectURL(this.files[0]);
};
function draw() {
  var canvas = document.getElementById('canvas');
  canvas.width = this.width;
  canvas.height = this.height;
  var ctx = canvas.getContext('2d');
  ctx.drawImage(this, 0,0);
}
function failed() {
  console.error("The provided file couldn't be loaded as an Image media");
}

<input type="file" id="inp">
<canvas id="canvas"></canvas>

^{*IIRC の Chrome のいくつかのバージョンのみが FileReader をサポートしていましたが、まだ URL.createObejctURL をサポートしていません。}

Answer 3

<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>

デモを確認する