

例えば、フロントカメラで自分の顔を撮影した場合、シャッターを切る前のプレビュー画面と、撮影した後の写真データが左右反転されてしまいます。  
どうすれば、シャッターを切る前の画面に写っている向きのまま写真を撮ることができるでしょうか。


CC BY-SA 3.0
2016-03-17T12:04:18.267
23223
2016-03-18T06:10:04.360
2016-03-18T04:14:12.350
8748
8748
question
monaca cordova
フロントカメラで撮影した場合、画像が左右反転してしまう問題


monacaという事ですので、自作アプリからスマートフォンのデバイス標準のカメラアプリを立ち上げて撮影しているという事でしょうか。  
こういったカメラアプリは自撮りをする(フロントカメラを使う)場合、プレビューに鏡像を表示することが多いです。  
鏡像でなく正しい（他人から見た）映像を映すとユーザに不便になります。  
撮影位置の調整や髪のセットなどは、鏡像でないと意外と難しいものだからです。

(以上の事、一般的な事ですが念の為)

さて撮影結果も鏡像化したいという事ですが、monaca・cordovaでは別の一般的な方法があるかも知れませんが、Web技術を使った方法を紹介します。

簡単なのは画像データはいじらずに表示する時だけ鏡像化する事です。CSSだと`transform: scaleX(-1);`だけで行なえます。

鏡像化した画像をデータとして欲しい場合はcanvasを使うのが近道でしょう。好きにいじった後toDataURLでbase64の画像データを得る事が出来ます。

[code]

    var src = "data:image/png;base64," +
    "iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAABlBMVEX///8AAABVwtN+AAAACXBI" +
    "WXMAAC4jAAAuIwF4pT92AAAAwElEQVR4nO2VwQ7DMAhD8f//9C5NhoNNkTrtVE4L9oOUoTbicQB4" +
    "AWdC+i0wOuOKr0SJ07DglVgalbiKcLMEnJXAZ91JJtRz0d2FrQdgxpzHMACwxzADjtK3gJgiSxVo" +
    "HjoaIN3MtTyvrv9YWprtpCntVN6lcqZVOba1nN8YxWhs4rUBLUfaA/ZTztcDBCFVBdR9U1pJOtUB" +
    "ttyvgMmFcypr9y1iAIT0d0Aof/maKIJkBUSNBhBut4fObdr/++3yAVRHAvzFItZIAAAAAElFTkSu" +
    "QmCC"
    
    var img = new Image();
    img.onload = function() {
     var cc = mirror_by_canvas.getContext('2d');
     cc.translate(48, 0);
     cc.scale(-1, 1);
     cc.drawImage(img, 0, 0);
     mirror_data.href = mirror_by_canvas.toDataURL();
    }
    
    orig.src = mirror_by_css.src = img.src = src;
[/code]

[code]

    #mirror_by_css{
     transform: scaleX(-1);
    }
    img, canvas{
     border-style: solid;
     border-color: darkblue;
     width: 48px;
     height: 48px;
    }
[/code]

[code]

    <p>
     <img id="orig" />
     オリジナル
    </p>
    <p>
     <img id="mirror_by_css" />
     CSSのtransformで鏡像化
    </p>
    <p>
     <canvas id="mirror_by_canvas" width="48" height="48"> </canvas>
     canvasで鏡像化
     <a id="mirror_data" download="mirror_abc.png">生成した画像データへのリンク</a>
    </p>
[/code]


CC BY-SA 3.0
2016-03-18T06:10:04.360
23244
2016-03-18T06:10:04.360
3054
23223
answer