webRTCを利用してsafariを介してスマホから画像を取得したいと思っています。
webRTCでスマホカメラにアクセス出来てもフレームワーク(width, height)を変更することは出来ないようです(テレビでスマホ映像をデフォルトのサイズで縦長に放送しているのもそのためなのかも知れません)。しかし、画像サイズは16:9や4:3の横長サイズで保存したい。
そこでcanvas.rotate
で90度回転させてcanvas.drawImage
することにしました。
しかし、canvas.rotate
は回転実行中にcanvasタグのサイズが小さいと画像が切れしまうようで大きめのタグサイズにする必要があります(下の画像)。
スマホサイズ(360:640)を回転させる十分なサイズがそのまま空白として残ってしまいます。これをなんとかしたい。
###自分なりの対応策
単純にcssでwidth
height
を変更する。
setAttribute
の属性を組み合わせてサイズ変更を試したものの変更できず。
<例>
js
1$("#start").click(function() { 2 if (video.srcObject) { 3 var canvas = document.getElementById('canvas'); 4 //canvasの描画モードを2dに 5 var ctx = canvas.getContext('2d'); 6 ctx.translate(640, 0); 7 ctx.rotate(90/180*Math.PI); 8 // canvasにコピー 9 ctx.drawImage(video, 0, 0, 360, 640); 10 //seAttributeで後付けで変更 11 var w = 640; 12 var h = 360; 13 canvas.setAttribute("width", w); 14 canvas.setAttribute("height", h); 15 16 } 17 });
css
1.canvas { 2 width: 1000px; 3 height: 640px; 4}
画像を切り取るcanvas.getImageData
,canvas.putImageData
メソッドがあったので利用してみた。
同一document内(下記のctx
)では切り取れるがフレームを再設定したタグ内(下記のctx2
)に貼り付けると貼り付けられるものの画像サイズが指定通りにならずに引き伸ばされた画像になってしまいます。このような使い方は検索した限りなかったのでどう対処すれば良いか分からないのが現状です。
js
1$("#start").click(function() { 2 if (video.srcObject) { 3 var canvas = document.getElementById('canvas'); 4 var canvas2 = document.getElementById('canvas2'); 5 //canvasの描画モードを2dに 6 var ctx = canvas.getContext('2d'); 7 var ctx2 = canvas2.getContext('2d'); 8 var w = 1000; 9 var h = 640; 10 // 同じサイズをcanvasに指定 11 canvas.setAttribute("width", w); 12 canvas.setAttribute("height", h); 13 ctx.translate(640, 0); 14 ctx.rotate(90/180*Math.PI); 15 // canvasにコピー 16 ctx.drawImage(video, 0, 0, 360, 640); 17 imagedata = ctx.getImageData(0, 0, 360, 640); 18 //ctx2にctxで切り取った画像を貼り付け 19 ctx2.putImageData(imagedata, 0, 0); 20 21 } 22 });
css
1#canvas2 { 2 3 width: 640px; 4 height: 360px; 5}
以上のようにスマホカメラの縦長画像を普通の写真画像のように横長サイズにする場合、canvas.rotate
が良いと考えましたが、上手くいっておりません。
何かお知恵を拝借できればと思い、投稿いたしました。
よろしくお願いします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。