wPaintプラグインを使用して、Webサイドの描画と画像のグラフィティを実現（思考分析とソースコード）

B / S側にオンライングラフィティを実装し、グラフィティの後に写真を保持することは確かに困難です。ここでは、HTML5キャンバスに基づいているため、互換性が非常に良いため、wPaintプラグインを選択します。

1.実現のアイデア

キャンバス全体の設定と画像の保存という2つのステップでプロセス全体を実装する必要があります。

1.キャンバスを設定します。wPaintオブジェクトを初期化し、キ​​ャンバスをペイントする必要がある画像に設定します。

1.画像を保存します。描画した画像オブジェクトを取得します。これがバイナリストリームデータで、背景に転送して保存します。

第二に、ソースコードの実装

$.fn.wPaint.defaults = {
        path: '../../../../Scripts/Component/js/wPaint/',
        theme: 'standard classic',
        autoScaleImage: true,
        autoCenterImage: true,
        menuHandle: true,
        menuOrientation: 'horizontal',
        menuOffsetLeft: 5,
        menuOffsetTop: 280,
        bg: null,
        image: null,
        imageStretch: false,
        onShapeDown: null,
        onShapeMove: null,
        onShapeUp: null
    };

     var url = '../../../../Content/img/AnalysisPic/' + handle + data.F_pictureName;
                    $('#img').wPaint({
                        image: url,
                        menuOffsetLeft: -35,
                        menuOffsetTop: -50,
                        mode: 'Pencil',  // set mode
                        lineWidth: '2',       // starting line width
                        fillStyle: 'transparent', // starting fill style
                        strokeStyle: '#FF0000'  // start stroke style

                    });

3、レンダリングの実現

落書き

 

 

 

保存済みの落書き写真

4つ以上

ここには明確に書かれていない手順がいくつかあります。Tuyaのデータをサーバーに転送して保存するにはどうすればよいですか？

何も見つからない場合は

.NETバージョンのバックグラウンドコードが必要な場合は、

一緒に勉強して話し合いましょう。

JAVAバージョンのバックグラウンドコードが必要な場合...

私たちの拠点に参加できます。拠点の住所は450342630（QQグループ番号）です。