カメラ撮影した画像に手書き操作をしたい

画像

３

カメラ撮影した画像に手書き操作をしたい

３

カメラ撮影した画像に対して手書き操作を行いたい場合は、それぞれ下記クラスを使用します。

カメラ撮影	：	CameraCaptureViewクラス
手書き操作	：	CanvasViewクラス

【　処理イメージ　】

	1.	カメラを起動（CameraCaptureView.ShowCameraメソッド）
	2.	カメラ撮影を行い撮影画像を取得（CameraCaptureView.Captureメソッド）
	3.	取得した画像をキャンバスに表示（CanvasView.SetImageメソッド）
	4.	キャンバス上で任意に手書き操作（ユーザーオペレーション）

【　注意事項　】

撮影した画像をそのままCanvasViewオブジェクトにセットすると、画像サイズが合わない場合があります。
その場合は、カメラ撮影で取得した画像を加工する、または画像サイズに合わせて
キャンバス側のサイズを変更するなどの調整を行ってください。

〇画像加工方法
	Image.Scaleメソッド	：	画像の拡大、縮小
	Image.Trimmingメソッド	：	画像の一部を切り取る

〇画像サイズの取得
	Image.Widthプロパティ	：	読み込まれた画像の幅
	Image.Heightプロパティ	：	読み込まれた画像の高さ

下記のサンプルを実行するとカメラが起動します。
「撮影」ボタンを押下後、撮影された画像（CanvasViewオブジェクト）上で描画が行えます。
「Undo」ボタンを押下後、直前の描画処理がキャンセルされます。
もう１度撮影したい場合は「再撮影」ボタンを押下します。
「保存」ボタンを押下後、撮影された画像を端末（※）に保存します。

※保存先（ルートフォルダ）

/storage/emulated/0/Android/data/jp.co.opst.bizht.v1/files/FileSystem/root

[ サンプルコード ]

Form FrmCamera{
    Width = 333;
    Height = 602;
    Scroll = $NONE;
    BgColor = $WHITE;

    /* カメラ撮影領域 */
    CameraCaptureView CameraCaptureView1 {
        X = 0;
        Y = 0;
        Width = 333;
        Height = 500;
    }

    /* 描画キャンバス */
    CanvasView CanvasView1 {
        X = 0;
        Y = 50;
        Width = 333;
        Height = 400;

        if( !$DESIGNTIME ){
            /* 線の色や太さを指定 */
            SetStroke( 2, $RED );
        }
    }

    /* 撮影ボタン */
    ImageButton btnCapture{
        X = 232;
        Y = 508;
        Width = 100;
        Height = 40;
        Title = "撮影";
        FontSize = 20;
        ButtonStyle = $SURFACE;
        FgColor = $BLACK;
        BgColor = 20;

        Function OnTouch( e ) {
            /* 再撮影ボタン表示 */
            ^.btnReCapture.Visible = $True;
            /* Undoボタン表示 */
            ^.btnUndo.Visible = $True;
            /* 描画キャンバス表示 */
            ^.CanvasView1.Visible = $True;
            /* 撮影ボタン非表示 */
            ^.btnCapture.Visible = $False;
            /* 保存ボタン表示 */
            ^.btnSaveCapture.Visible = $True;
            /* カメラ撮影領域非表示 */
            ^.CameraCaptureView1.Visible = $False;
            /* 撮影画像取得 */
            var img = ^.CameraCaptureView1.Capture();
            /* 撮影画像をキャンバスに表示 */
            ^.CanvasView1.SetImage(img);
            /* カメラ停止 */
            ^.CameraCaptureView1.HideCamera();
        }
    }

    /* Undoボタン */
    ImageButton btnUndo{
        X = 118;
        Y = 508;
        Width = 100;
        Height = 40;
        Title = "Undo";
        FontSize = 20;
        ButtonStyle = $SURFACE;
        FgColor = $BLACK;
        BgColor = 20;

        Function OnTouch( e ) {
            /* 直前の描画操作を取り消す */
            ^.CanvasView1.Undo();
        }
    }

    /* 再撮影ボタン */
    ImageButton btnReCapture {
        X = 3;
        Y = 508;
        Width = 100;
        Height = 40;
        Title = "再撮影";
        FontSize = 20;
        ButtonStyle = $SURFACE;
        FgColor = $BLACK;
        BgColor = 20;

        Function OnTouch( e ) {
            /* 再撮影ボタン非表示 */
            ^.btnReCapture.Visible = $False;
            /* Undoボタン非表示 */
            ^.btnUndo.Visible = $False;
            /* 撮影ボタン表示 */
            ^.btnCapture.Visible = $True;
            /* 保存ボタン非表示 */
            ^.btnSaveCapture.Visible = $False;
            /* カメラ撮影領域表示 */
            ^.CameraCaptureView1.Visible = $True;
            /* 描画キャンバスクリア */
            ^.CanvasView1.Erase();
            /* 0.1秒後にカメラ起動 */
            ^.SetTimer(0.1,true);
        }
    }
    
    /* 保存ボタン */
    ImageButton btnSaveCapture {
        X = 3;
        Y = 562;
        Width = 100;
        Height = 40;
        Title = "保存";
        FontSize = 20;
        ButtonStyle = $SURFACE;
        FgColor = $BLACK;
        BgColor = 20;

        Function OnTouch( e ) {
            /* CanvasViewの画像を取得 */
            var img = ^.CanvasView1.Snapshot(1.0, TRUE);
            
            /* 端末に保存 */
            var fs = new FileSystem;
            var fp = fs.Open("sample1.png", FileSystem.OPEN_WRITE);
            img.Save(fp, Image.FORMAT_PNG);
            //.MessageBox("画像を保存しました。","保存完了");
            fp.Close();
        }
    }

    Function OnTimer(e){
        try{
            var extraParams = new Array();
            /* フラッシュOFF */
            extraParams["CAMERA_FLASH"] = $False;
            /* カメラ起動 */
            CameraCaptureView1.ShowCamera(Runtime.SourceTypeRearCamera,extraParams);
        }catch (e) {
            //.MessageBox("カメラが起動できません。アプリのカメラ権限が許可されているかご確認ください。","エラー");
        }
    }

    if ( !$DESIGNTIME ) {
        Width = //.Width;
        Height = //.Height;

        HorizontalScale &= //.Width / 333;
        VerticalScale &= //.Height / 602;

        /* 撮影ボタン表示 */
        btnCapture.Visible = $True;
        /* カメラ撮影領域表示 */
        CameraCaptureView1.Visible = $True;
        /* 再撮影ボタン非表示 */
        btnReCapture.Visible = $False;
        /* Undoボタン非表示 */
        btnUndo.Visible = $False;
        /* 保存ボタン非表示 */
        btnSaveCapture.Visible = $False;
        /* 描画キャンバス非表示 */
        CanvasView1.Visible = $False;
        /* 0.1秒後にカメラ起動 */
        SetTimer(0.1,true);
    }
}

管理番号：PctHt_003


		Biz-Collections Bizの宝箱トップへ
		Biz/Browser HT・Biz/Browser SmartDevice・Biz/Browser AI TIPS集トップへ