読者です 読者をやめる 読者になる 読者になる

はしくれエンジニアもどきのメモ

情報・Web系技術の勉強メモ・備忘録です。

FileAPI で画像を読み取り、Canvas 上に画像を描画

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);
            }
          }