Canvasの画像認識技術とインテリジェントデザインについて考える

[[403856]]

著者は最近、フロントエンドの視覚化と構築の技術を研究しています。最近、設計図に基づいて画像情報を自動的に抽出し、インテリジェントなコードを生成するという非常に興味深いトピックに出会いました。もちろん、この記事では多くのわかりにくい技術的概念を紹介するつもりはありません。いくつかの実用的なアプリケーションシナリオから始めて、キャンバス画像認識技術を使用していくつかの興味深い機能を実現する方法を紹介します。最後に、インテリジェンスに関するいくつかの考えとローコード方向の計画をまとめ、皆さんのインスピレーションになれば幸いです。

キャンバス画像認識技術

フロントエンドに精通している友人は、キャンバスに馴染みがないわけではないかもしれません。次に、キャンバス画像認識テクノロジーを深く理解するために、次のアプリケーションシナリオを実装する方法を説明します。

• 写真に基づいてウェブサイトのメインカラーとグラデーションカラーを動的に生成します
• ワンクリックで写真やデザインに基づいたウェブサイトの配色を生成
• 画像認識技術ソリューション

写真に基づいてウェブサイトのメインカラーとグラデーションカラーを動的に生成します

画像に基づいて Web サイトのメインカラーとグラデーションカラーを動的に生成することで、どのような問題を解決できるのか、アプリケーションシナリオは何かと尋ねる人もいるかもしれません。ここでは、実際のアプリケーションの例をいくつか紹介します。

NetEase Cloud Music をよくご存知かもしれません。注意深い友人は、Web サイトのバナーの背景がバナーとよく統一されていることに気付いたかもしれません。

各カルーセルの背景は、現在の画像の色のグラデーションまたはぼかしに基づいており、カルーセルとの完全な統一性を実現していることがわかります。画像ウェブサイトの背景や画像カードの背景など、同様のテクニックを適用した同様の例が多数あります。

実施原則

キャンバス オブジェクトには 3 つのメソッドがあることがわかっています。

• createImageData() 新しい空のImageDataオブジェクトを作成します
• getImageData() キャンバス上の指定された四角形のピクセル データをコピーする ImageData オブジェクトを返します。
• putImageData() 画像データ（指定されたImageDataオブジェクトから）をキャンバスに戻します

画像データを分析するには、前述の 2 番目のメソッド getImageData を使用する必要があります。ImageData オブジェクトは画像ではなく、キャンバス上の部分 (四角形) を指定し、四角形内の各ピクセルに関する情報を格納します。 ImageData オブジェクトの各ピクセルには、RGBA 値という 4 つの情報があります。

• R - 赤 (0-255)
• G - 緑 (0-255)
• B - 青 (0-255)
• A - アルファ チャネル (0 ～ 255、0 は透明、255 は完全に表示されます)

色/アルファ情報は配列の形式で、ImageData オブジェクトのデータ プロパティに保存されます。

上記の技術的基礎があれば、画像の色情報を抽出し、画像の主な色を分析することは完全に可能です。したがって、実装プロセスは次のとおりです。

実装の参照コードは次のとおりです。

 img.onload =関数（）{
    ctx.drawImage(画像, 0, 0)
    img.style.display = 'なし'  
    // ピクセルデータを取得する
    data = context.getImageData(0, 0, img.width, img.height).data とします。
    // ImageData.data は、Uint8ClampedArray 型の 1 次元配列です。配列の 4 つの要素はそれぞれピクセルの RGBA 情報を表し、各要素の値は 0 から 255 の範囲です。
    r = 0 とすると、
        0,
        0 です
         
    // すべてのピクセルの平均値を取得する
(行 = 0、行 < img.height、行++ とします) {
 (let col = 0; col < img.width; col++) {
            r += データ[(画像の幅 * 行 + 列) * 4]
            g += データ[(画像の幅 * 行 + 列) * 4 + 1]
            b += データ[(画像の幅 * 行 + 列) * 4 + 2]
        }
    } 
     
    // 平均を計算する
    r /= 画像の幅 * 画像の高さ
    g /= 画像の幅 * 画像の高さ
    b /= 画像の幅 * 画像の高さ
 
    // 結果を丸める
    r = Math.round(r)
    g = Math.round(g)
    b = Math.round(b) 
     
    // 背景にグラデーションを設定する
    bgBox.style.backgroundImage = `線形グラデーション(rgb(${r}), rgb(${g}), rgb(${b})`;
  }

さまざまな値のシナリオに応じて、次のような他のアルゴリズムも使用できることに言及する価値があります。

• 平均値アルゴリズム（メインカラーを取得）
• 中央値分割法（png画像の主な色を取得）
• 補色計算方法

ワンクリックで写真やデザインに基づいたウェブサイトの配色を生成

上記では、キャンバスを使用したカラースキームを紹介しました。次に、さらに一歩進んで、画像/デザインに基づいてワンクリックで Web サイトのカラースキームを生成する方法を見てみましょう。

実際、上記の例に基づいて、Web サイトのカラー生成ツールのセットを自分で完全に実装できます。時間を節約するために、著者は同様の機能を実現するのに役立つ、より強力なプラグインを推奨しています。

そうです、colorthief です。ブラウザとノード環境をサポートしているので、フロントエンドとして簡単に使用して、画像/デザインの配色を取得できます。

GitHub ポータル: 画像カラースキーム ライブラリのオンライン生成

簡単な使用例は次のとおりです。

 ColorThiefをインポートする  './node_modules/colorthief/dist/color-thief.mjs'   
 
 const colorThief = 新しい ColorThief();
定数 img = document.querySelector( 'img' ); 
 
 （画像が完全である場合）{
  colorThief.getColor(画像);
 }それ以外{
  image.addEventListener( 'load' 、関数() {
    colorThief.getColor(画像);
  });
 }

このライブラリには、生成されるデータの品質や粒度を制御するなど、詳細な API も多数用意されているため、これを使用してよりスマートなツールを作成することができます。

画像認識技術ソリューション

画像認識テクノロジーは、技術者がコンピューターを使用して画像を処理および分析し、さまざまなパターンのターゲットをより適切に識別するのに役立ちます。画像認識には多くのプロセスと内容があり、主に画像の前処理と画像のセグメンテーションが含まれます。画像処理に効果的に応用することで、画像の特性に応じて判断およびマッチングを行うことができ、ユーザーは画像内の必要な情報をより迅速に検索できるようになります。

ニューラル ネットワークに詳しい友人は、画像認識テクノロジの真のソリューションが畳み込みニューラル ネットワーク (CNN または ConvNet) であることをご存知かもしれません。

画像認識技術の面では、畳み込みニューラル ネットワークは関連の度合いに基づいて不要な接続を除外し、画像認識プロセスをより計算的に実現可能にします。畳み込みニューラル ネットワークは、画像認識中に意図的に接続を制限し、ニューロンが前のレイヤーの小さなセグメント (3×3 または 5×5 ピクセルと想定) からの入力のみを受け取るようにして、過度の計算負荷を回避します。したがって、各ニューロンは画像のごく一部を処理するだけで済みます。

もちろん、フロントエンドエンジニアとして、そのような詳細な内容に関与することはできないかもしれませんが、心配しないでください。根本的な分析の問題を解決するのに役立つツールはたくさんあります。たとえば、中国では比較的有名なimgcookは、認識技術を使用してブラウザーで使用できるHTMLコードを生成します。

その動作メカニズムは次のとおりです。

その基礎となる認識技術も、画像情報要素の分析、抽出、変換に基づいており、インテリジェントな配置の目的を達成します。もちろん、ある程度の認識機能を実現するのに役立つオープンソースライブラリもいくつかあります。これらのソリューションに基づいて、開発用のよりインテリジェントなツールを作成できます。

ここで参考までに画像認識ライブラリ GOCR.js を紹介したいと思います。

GOCR.js は、自動変換に Emscripten を使用する、GOCR (オープンソースの光学式文字認識プログラム) プロジェクトの純粋な JavaScript バージョンです。これは、画像内の単語をスキャンしてテキストに戻すことができるシンプルな OCR (光学式文字認識) プログラムです。

このライブラリの使い方も非常に簡単です。ライブラリをインポートして次のコードを入力するだけです。

 var 文字列 = GOCR(画像);
アラート(文字列);

デモンストレーションは次のとおりです。

chrome-capture (1).gif (オリジナル画像)

知的な思考

近年、国内外のローコードおよびノー​​コードプラットフォームは急速に発展しており、基本的な構築だけではテクノロジー企業のニーズを満たすことができなくなり、インテリジェント/自動化構築プラットフォームが次々と登場しています。著者は前回の記事で、2021年の海外ローコード開発プラットフォームのトップ10を紹介し、多くの優れた海外ローコードプラットフォームを紹介しました。その多くは、インテリジェント化の実用的な実装も多くなっています。著者は次のように簡潔に説明しています。

最近、H5-Dooringビジュアルエディタは継続的に反復され、データソースは基本的に構築されました。将来的には、よりインテリジェントになります。ビジュアル大画面V6.Dooringの最初のバージョンもリリースされました。

国産ローコードプラットフォームはまだまだこれからですが、皆様のご協力を期待しております??!

この記事はWeChatの公開アカウント「Fun Talk about Front-end」から転載したもので、以下のQRコードからフォローできます。この記事を転載する場合は、Qutan フロントエンド パブリック アカウントにご連絡ください。