FileAPI で画像を読み取り、Canvas 上に画像を描画
FileAPI で画像を選択またはドラッグ&ドロップで画像を表示 - はしくれエンジニアもどきのメモ の時は、<img> タグで画像を表示させてましたが、今回は、FileAPI で読み取った画像をCanvas 上に表示させてみます。
サンプル
サンプルはこちら。
FileAPI で画像を選択またはドラッグ&ドロップし、Canvasで表示
コード
FileAPIを用いて、ファイルを選択またはドラッグ&ドロップで画像を選択し、選択した画像をCanv ...
Canvas に画像を描画
肝になるコードは以下です。
Image オブジェクト
<img>タグの代わりに、Image オブジェクトを使っています。
Image オブジェクトへの読み込み
Image.src に、FileAPI で読み取ったDataURL を代入することで、Image オブジェクトに読みめます。
そして、Image.onload で、指定したsrc から画像をロードしたあとの処理書き込みます。
Image.onload = function(){
//src から画像をロードしたあとの処理
}
Canvas へ画像を描画
getContext('2d').drawImage(Imageオブジェクト, x, y, w, h); 関数で、描画できます。 x, y は描画位置で、w, h は描画したい幅と高さです。
参考:
drawImage() メソッド - Canvasリファレンス - HTML5.JP
//ファイルの読込が終了した時の処理
function readImg(reader){
//ファイル読み取り後の処理
var result_dataURL = reader.result;
var img = new Image();
img.src = result_dataURL;
return img;
}
//キャンバスにImageを表示
function drawImgOnCav(canvas, img, x, y) {
img.onload = function(){
var ctx = canvas.getContext('2d');
var wrapper= document.getElementById("print_img");
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, x, y, img.width, img.height);
}
}
参考リンク
関連リンク
