手書きした画像を保存したい

手書き操作

２

手書きした画像を保存したい

２

CanvasViewクラスでは、背景画像を設定することや、描画内容を画像として取得することが可能です。

画像を設定するにはSetImageメソッドを使用します。設定された画像は、CanvasViewクラスの描画領域に合わせて自動的に拡大・縮小されます。画像を削除するにはResetImageメソッドを使用します。

描画内容の取得にはSnapshotメソッドを使用します。Snapshotメソッドの第１引数には倍率、
第２引数には背景画像を含めるか否かを設定することができます。
引数の設定がない場合、等倍かつ背景画像を含めない画像が取得されます。

[実行イメージ] ・引数設定あり(背景画像あり)で保存した画像

[実行イメージ] ・引数設定なし(背景画像なし)で保存した画像

[ サンプルコード ]

Form Form2 {
    X = 0;
    Y = 0;
    Width = 486;
    Height = 368;
    
    CanvasView CanvasView1 {
        X = 15;
        Y = 50;
        Width = 454;
        Height = 276;
    }
    
    Button Button1 {
        X = 98;
        Y = 21;
        Width = 120;
        Height = 24;
        title = "描画線の変更(赤)";
        Function OnTouch(e) {
            /* 描画線の設定(太さ2、赤色) */
            ^.CanvasView1.SetStroke(2.0, $RED);
        }
    }
    
    Button Button2 {
        X = 224;
        Y = 21;
        Width = 120;
        Height = 24;
        title = "描画線の変更(青)";
        Function OnTouch(e) {
            /* 描画線の設定(太さ4、青色) */
            ^.CanvasView1.SetStroke(4.0, $BLUE);
        }
    }
    
    Button Button3 {
        X = 349;
        Y = 21;
        Width = 120;
        Height = 24;
        title = "描画線の変更(黒)";
        Function OnTouch(e) {
            /* 描画線の設定(太さ1、黒色) */
            ^.CanvasView1.SetStroke(1.0, $BLACK);
        }
    }
    
    Button Button4 {
        X = 100;
        Y = 330;
        Width = 120;
        Height = 24;
        title = "画像を設定";
        Function OnTouch(e) {
            /* 画像をCanvasViewに設定する
                ※任意の画像を用意し、URLを変更してお試しください */
            var img = new Image;
            img.loadImage("http://localhost/biz/sample/test.png");
            ^.CanvasView1.SetImage(img);
        }
    }
    
    Button Button5 {
        X = 223;
        Y = 330;
        Width = 120;
        Height = 24;
        title = "画像を消去";
        Function OnTouch(e) {
            /* CanvasView上の画像を消去する */
            ^.CanvasView1.ResetImage();
        }
    }
    
    Button Button6 {
        X = 348;
        Y = 330;
        Width = 120;
        Height = 24;
        title = "画像を保存";
        Function OnTouch(e) {
            /* 画像を取得する
                ※第2引数にTRUEを設定すると背景画像が含まれた状態で保存されます */
            var retImg = ^.CanvasView1.Snapshot(1.0, TRUE);
            
            /* 画像をサーバに保存する
                ※URLを変更してお試しください */
            var fs = new FileSystem;
            var fp = fs.Open("sample1.png", FileSystem.OPEN_WRITE);
            retImg.Save(fp, Image.FORMAT_PNG);
            fp.close();
            
            var fp2 = fs.Open("sample1.png", FileSystem.OPEN_READ);
            var session = HttpSession.FindSession("http://localhost");
            var res = session.Put("/biz/sample/sample1.png", fp2);
            fp2.close();
        }
    }
}

管理番号：CvsSd_002


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