質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.38%

  • canvas

    328questions

    HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。

  • WebRTC

    92questions

    WebRTC(Web Real-Time Communication)とは、プラグイン無しでウェブブラウザ間の音声通話・ビデオチャットなどリアルタイムコミュニケーションができるオープンフレームワークです。W3CがAPIレベルで、IETFがプロトコルレベルでそれぞれ標準化が進められています。

webRTCで取得した画像をcanvas.rotateで回転させて保存したい

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 293

hokosugi

score 36

webRTCを利用してsafariを介してスマホから画像を取得したいと思っています。
webRTCでスマホカメラにアクセス出来てもフレームワーク(width, height)を変更することは出来ないようです(テレビでスマホ映像をデフォルトのサイズで縦長に放送しているのもそのためなのかも知れません)。しかし、画像サイズは16:9や4:3の横長サイズで保存したい。

そこでcanvas.rotateで90度回転させてcanvas.drawImageすることにしました。
しかし、canvas.rotateは回転実行中にcanvasタグのサイズが小さいと画像が切れしまうようで大きめのタグサイズにする必要があります(下の画像)。
イメージ説明

スマホサイズ(360:640)を回転させる十分なサイズがそのまま空白として残ってしまいます。これをなんとかしたい。

自分なりの対応策

単純にcssでwidth heightを変更する。
setAttributeの属性を組み合わせてサイズ変更を試したものの変更できず。
<例>

$("#start").click(function() {
        if (video.srcObject) {
            var canvas = document.getElementById('canvas');
            //canvasの描画モードを2dに
            var ctx = canvas.getContext('2d');
            ctx.translate(640, 0);
            ctx.rotate(90/180*Math.PI);
            // canvasにコピー
            ctx.drawImage(video, 0, 0, 360, 640);
            //seAttributeで後付けで変更
            var w = 640;  
            var h = 360;
            canvas.setAttribute("width", w);
            canvas.setAttribute("height", h);

        }
    });
.canvas {
      width: 1000px;
      height: 640px;
}


画像を切り取るcanvas.getImageData,canvas.putImageDataメソッドがあったので利用してみた。
同一document内(下記のctx)では切り取れるがフレームを再設定したタグ内(下記のctx2)に貼り付けると貼り付けられるものの画像サイズが指定通りにならずに引き伸ばされた画像になってしまいます。このような使い方は検索した限りなかったのでどう対処すれば良いか分からないのが現状です。

$("#start").click(function() {
        if (video.srcObject) {
            var canvas = document.getElementById('canvas');
            var canvas2 = document.getElementById('canvas2');
            //canvasの描画モードを2dに
            var ctx = canvas.getContext('2d');
            var ctx2 = canvas2.getContext('2d');
            var w = 1000;
            var h = 640;
            // 同じサイズをcanvasに指定
            canvas.setAttribute("width", w);
            canvas.setAttribute("height", h);
            ctx.translate(640, 0);
            ctx.rotate(90/180*Math.PI);
            // canvasにコピー
            ctx.drawImage(video, 0, 0, 360, 640);
            imagedata = ctx.getImageData(0, 0, 360, 640);
            //ctx2にctxで切り取った画像を貼り付け
            ctx2.putImageData(imagedata, 0, 0);

        }
    });
#canvas2 {

      width: 640px;
      height: 360px;
}


以上のようにスマホカメラの縦長画像を普通の写真画像のように横長サイズにする場合、canvas.rotateが良いと考えましたが、上手くいっておりません。
何かお知恵を拝借できればと思い、投稿いたしました。
よろしくお願いします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

check解決した方法

0

自己解決しました。

上記のようなcanvas.rotateで縦長を横長にする手法以外に当てにできる方法は見つからなかった。
ctx2のsetAttributeを改めて設定する(css canvas2 width,heightではなく)

canvas2.setAttribute("width", 360);
canvas2.setAttribute("height", 640);

これで正常に貼り付けられる。但し、何故なのかは分からない。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.38%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • canvas

    328questions

    HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。

  • WebRTC

    92questions

    WebRTC(Web Real-Time Communication)とは、プラグイン無しでウェブブラウザ間の音声通話・ビデオチャットなどリアルタイムコミュニケーションができるオープンフレームワークです。W3CがAPIレベルで、IETFがプロトコルレベルでそれぞれ標準化が進められています。