この JS 軽量エディターは、画像を迅速に処理するのに役立ちます。

この記事では、純粋な JS で実装された軽量の画像エディターを紹介します。困っている友人のお役に立てれば幸いです。

はじめに

いくつかの特殊な作業シナリオのため、記事を書くときに一度にいくつかの写真を処理する必要があります上 説明テキストを追加するか、グラフィックを追加します。

PPT を使用して処理を開始し、1 つずつコピーし、境界線のシェーディングを行い、グラフィックを追加してからエクスポートし、次の場所にコピーします。必要なのでエクスポートします。結果として得られる画像はもう使用できない可能性があるため、クリーンアップする必要があります。

画像が増えれば増えるほど、操作を繰り返す必要があり、非常に面倒です。この問題を解決するツールはないかと思い検索してみたところ、重すぎて専門的なソフトウェアか、バッチ要件を満たしていないソフトウェアでした。[推奨: JavaScript ビデオ チュートリアル ]

##私のシナリオの簡単な要約は次のとおりです: ここで 1 つの写真の山が表示されます。すべての写真には「軽い処理」が必要で、一部にはテキストの追加や矢印の追加などが必要です。

• キーは「軽い」ので、開くのに何十秒も待ったり、面倒な処理をする必要はありません

• ダウンロードする必要はなく、閉じるだけで使用できます使用後

##シンプル、使いやすく、視覚的、必要なし 一部の複雑な操作はマウスをクリックするだけで完了できます

純粋な JS で実装された軽量の画像エディタ

#上記のようなシナリオが発生し、いくつかの写真をすばやく簡単に処理したい場合は、このプロジェクトが用意されています

GenOptimizer オンライン デモ アドレス: https://genoptimizer.cn/

複数の画像操作をサポート

• 画像のドラッグ アンド ドロップ追加をサポート

• すべての属性をサポート動的構成

• #修正結果のワンクリック コピーをサポート

• #ブラシ、テキスト、四角形、円、矢印、線、画像をサポート追加

• このプロジェクトはサードパーティのフレームワークに依存せず、次のように実装されています。 pure JS

最後に、非常にシンプルで使いやすい方法でフレームワーク (GenOptimizer) が抽象化されます。プロジェクト全体は次の方法で記述されます。

以下は git アドレスです。著者はフロントエンドの初心者なので、アドバイスをお願いします

Github アドレス: https://github.com /hellojuantu/image_border_optimizer

• ##Gitee アドレス: https://gitee.com/sanbuqu/image_border_optimizer

• 以下は、導入フレームワーク、特殊な軽量、具体的な実装の技術概要です。計画は後で明らかにされます

#オプティマイザー フレームワークの機能

イベント、描画、およびインタラクションのグローバル管理

#カスタム コンポーネントの登録、カスタマイズ可能な構成管理をサポート
オブジェクト指向に基づく、高度に抽象化されたコード
はシンプルで使いやすく、さまざまな効果を迅速に開発できます

• ##オプティマイザー フレームワークの使用

• #スタートアップ

• まずシーンマネージャーが必要で、GenSceneを継承してシーンを作成し、シーン内のページで複数のコントローラーを管理します

  class MainScene extends GenScene {
      constructor(optimizer) {
          super(optimizer)
      }
  }

  インスタンスを使用してグローバルに取得します例、シーンをロードしますマネージャー、最も単純なオプティマイザー プログラムが開始します

GenOptimizer.instance(function(o){
    let scene = MainScene.new(o)
    o.runWithScene(scene)
})

Scene Manager(Scene)

Event(Event)

ページイベント

...
<div class=&#39;gen-auto-button-area&#39;>
    <button class=&#39;gen-auto-button&#39; data-value=&#39;config.arg1&#39;>text</button>
</div>
...
// 注册页面 class, 全局可用
this.registerPageClass({
    "buttonArea": &#39;gen-auto-button-area&#39;,
    ...
})
// 注册全局事件       
this.registerGlobalEvents([     
    {
        eventName: "click",
        // 事件绑定的元素区域
        className: sc.pageClass.buttonArea,
        // 在 所有 configToEvents 响应之 前 触发
        after: function(bindVar, target) {
            // bindVar: 绑定的变量
            // target: 事件触发的目标
        },        
        // 在 所有 configToEvents 响应之 后 触发
        before: function(bindVar, target) {
            // bindVar: 绑定的变量
            // target: 事件触发的目标
        },
        // 事件响应
        configToEvents: {
            // 自定义绑定的变量: 事件触发后的响应
            "config.arg1": function(target) {
                
            },
            "action.arg1": function(target) {
                
            },
            ...
        }
    },
    ...
])

マウスイベント

this.resgisterMouse(function(event, action) { 
    // event 是鼠标点击的事件
    // action 为鼠标点击的事件名称    
    if (action == 'mouseleave') {
        console.log('mouseleave canvas')
    } else if (action == 'up') {
        console.log('up canvas')
    } else if (action == 'down') {
        console.log('down canvas')
    } else if (action == 'move') {
        console.log('move canvas')
    }
})

キーボードイベント

this.registerAction("Backspace", status => {
    // status 为 'down' 时, 表示按下, 为 'up' 时, 表示松开
    console.log("Backspace", status)
})
this.registerAction("s", status => {
    // status 为 'down' 时, 表示按下, 为 'up' 时, 表示松开
    console.log("s", status)
})

コンポーネント(コンポーネント)

登録コンポーネント

class MyComponent extends GenComponent {
    constructor(control) {
        super(control.scene)
        this.control = control
    }
    ...
}
this.bindComponent('attribute', MyComponent.new(this))

使用コンポーネント

// 全局可使用组件
let data = ...
this.getComponent('attribute').buildWith(data)

概要

この記事では、著者が実装したドラッグ アンド ドロップのローコード軽量画像エディタを紹介します。面倒な画像処理の問題を解決します。

時々、いくつかの小さな操作が私たちの思考を引き起こすかもしれませんが、この種の問題をより便利に処理するにはどうすればよいですか?

この例は私の考えであり、あなたに何らかのインスピレーションやインスピレーションを与えることができれば幸いです。

以上がこの JS 軽量エディターは、画像を迅速に処理するのに役立ちます。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。