イメージエディタ

導入

CamanJS はJavaScript ( js )のNVAS ( man ) ipulationを行うために使用されます.それは非常に新しいフィルタとプラグインで拡張するのは簡単です、そしてそれは成長を続けて画像編集機能の広い配列が付属しています.それは完全にライブラリの独立しており、NodeJsとブラウザの両方で動作します.

始める

ライブラリの異なる機能を使用する前に、プロジェクトに含める必要があります.これは、ライブラリをダウンロードするか、CDNに直接リンクすることで行うことができます.

<script src="https://cdnjs.cloudflare.com/ajax/libs/camanjs/4.1.2/caman.full.min.js" integrity="sha512-JjFeUD2H//RHt+DjVf1BTuy1X5ZPtMl0svQ3RopX641DWoSilJ89LsFGq4Sw/6BSBfULqUW/CfnVopV5CfvRXA==" crossorigin="anonymous"></script>

基礎

ライブラリを使う方法は二つあります.

使用data-caman イメージ要素と属性.この属性は、その値として異なるCamanjsフィルタの組み合わせを受け入れることができます.

  <img src="path/to/image.jpg"
    data-caman="brightness(10) contrast(30) sepia(60) saturation(-30)">

呼び出しCaman() with the id of the canvas ここで、レンダリングされたイメージに適用するイメージと異なるフィルターをレンダリングしました.このメソッドは、すでにページにキャンバス要素を持っていると仮定します.また、CamanJSで編集するために、URLを介して画像をキャンバスにロードしたいと思います.我々が好むならば、我々はストリングの代わりにDOMオブジェクトを与えることもできます.

  Caman("#canvas-id", "path/to/image.jpg", function () {
    this.brightness(10);
    this.contrast(30);
    this.sepia(60);
    this.saturation(-30);
    this.render();
  });

この記事では、JavaScriptのイメージエディタを構築する方法について説明します.

画像をアップロードする

私たちは、ユーザーがさらなる操作のためにキャンバスにそれらをレンダリングできるように編集したいイメージをアップロードする方法をユーザに提供する必要があります.

<input type="file" id="upload-file"></input>
<canvas id="canvas"></canvas>

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const uploadFile = document.getElementById("upload-file");
let img = new Image();
let fileName = "";
// upload File
uploadFile.addEventListener("change", () => {
      const file = document.getElementById("upload-file").files[0];
      // init FileReader API
      const reader = new FileReader();
      if (file) {
        fileName = file.name;
        // read data as URL
        reader.readAsDataURL(file);
      }

      // add image to canvas
      reader.addEventListener(
        "load",
        () => {
          img = new Image();
          img.src = reader.result;
          img.onload = function () {
            canvas.width = img.width;
            canvas.height = img.height;
            ctx.drawImage(img, 0, 0, img.width, img.height);
            canvas.removeAttribute("data-caman-id");
          };
        },
        false
      );
});

上記のコードを歩きましょう.
HTMLスニペット:

<input> エレメント付きtype="file" : ユーザーは、デバイスのストレージから1つまたは複数のファイルを選択してみましょう.

<canvas> 要素:スクリプトを介してWebページにグラフィックスを描画するために使用します.

JSスニペット

The <canvas> 要素と呼ばれるメソッドがありますgetContext() , レンダリングコンテキストとその描画関数を取得するために使用します.このgetContext() つのパラメータをとりますtype of context . この記事でカバーされているような2 Dグラフィックスについては2d 得るCanvasRenderingContext2D .

The File API にアクセスできますFileList 含むFile ユーザーが選択したファイルを表すオブジェクト.古典的なDOMセレクターを使用しましたconst file = document.getElementById("upload-file").files[0] を選択します.

The FileReader オブジェクトは、ユーザーのコンピュータに保存されているファイルの内容を非同期で読み取ります.オブジェクトはreadAsDataURL 指定した内容を読み込む方法File .
それから、私たちはload 読み取りが正常に完了したときに発行されるイベントです.

The Image() コンストラクタHTMLImageElement インスタンス.それは機能的に等価ですdocument.createElement('img') . 私たちはsrc 属性reader.result ファイルのデータを表すURLです.

イメージが正常にロードされると、幅と高さを設定します<canvas> ユーザーが選択した画像の幅と高さに等しい.最後に、我々のイメージを描く<canvas> 使用drawImage(image,x,y) メソッド.

フィルタの適用

Camanjsは、基本的なイメージフィルタから色変換ユーティリティ機能、および大いに多くのビルトイン機能の豊富を持っています.これらのフィルタはすべてコアライブラリに含まれます.

<div role="group">
    <button className="filter-btn brightness-add" type="button">+</button>
    <span>Brightness</span>
    <button className="filter-btn brightness-remove" type="button">-</button>
</div>
<div role="group">
    <button className="filter-btn contrast-add" type="button">+</button>
    <span>Contrast</span>
    <button className="filter-btn contrast-remove" type="button">-</button>
</div>
<!--preset filters-->
<button className="filter-btn vintage-add" type="button">
    Vintage
</button>
<button className="filter-btn nostalgia-add" type="button">
    Nostalgia
</button>

    document.addEventListener("click", (e) => {
      if (e.target.classList.contains("filter-btn")) {
        if (e.target.classList.contains("brightness-add")) {
          Caman("#canvas", img, function () {
            this.brightness(5).render();
          });
        } else if (e.target.classList.contains("brightness-remove")) {
          Caman("#canvas", img, function () {
            this.brightness(-5).render();
          });
        } else if (e.target.classList.contains("contrast-add")) {
          Caman("#canvas", img, function () {
            this.contrast(5).render();
          });
        } else if (e.target.classList.contains("contrast-remove")) {
          Caman("#canvas", img, function () {
            this.contrast(-5).render();
          });
        } else if (e.target.classList.contains("vintage-add")) {
          Caman("#canvas", img, function () {
            this.vintage().render();
          });
        } else if (e.target.classList.contains("nostalgia-add")) {
          Caman("#canvas", img, function () {
            this.nostalgia().render();
          });
        }
      }
    });

上記のコードを歩きましょう.
HTMLスニペット:

フィルタのようなbrightness and contrast 増加し、減少ボタンを与えられている.

プリセットフィルタvintage and nostalgia パラメータを必要としません.

JSスニペット

代わりに、各フィルタボタンのイベントリスナーを持って、我々はすべてのを聞いているclick 中でイベントdocument . ターゲットイベントプロパティーe.target イベントをトリガーした要素を返します.

それから、我々はif 要素がクラスを持っているかどうかのチェック文filter-btn イベントが我々のフィルタボタンのうちの1つから引き起こされることを確認してください.我々の中に入れ子がありますif-elseif さらに、どのボタンをクリックしたかをチェックしますclick イベント.

最後に、我々はCaman() ボタンをクリックしてそれぞれのフィルタを適用します.

ダウンロード

一旦ユーザーが変化をしたならば、彼らは編集されたイメージをダウンロードすることもできなければなりません.

<button id="download" type="button">
    Download
</button>

const downloadBtn = document.getElementById("download");
    if (downloadBtn) {
      downloadBtn.addEventListener("click", () => {
        // get extension
        const fileExtension = fileName.slice(-4);
        let newFilename;

        // check image type
        if (fileExtension === ".jpg" || fileExtension === ".png") {
          newFilename =
            fileName.substring(0, fileName.length - 4) + "-edited.jpg";
        }
        download(canvas, newFilename);
      });

      function download(canvas, filename) {
        // init event
        let e;
        // create link
        const link = document.createElement("a");
        link.download = filename;
        link.href = canvas.toDataURL("image/jpeg", 0.8);
        e = new MouseEvent("click");
        link.dispatchEvent(e);
      }
    }

上記のコードを歩きましょう.

上記のコードは、ユーザーが選択したイメージファイルの名前からファイル拡張子を削除し、-edited.jpg . この名前はdownload 機能は、我々がレンダリングし、画像を編集キャンバスに参照と一緒に.

The download 関数はlink を設定し、download ファイル名への属性.The href 属性がcanvas.toDataURL(type, encoderOptions) を返します.type パラメータとencoderOptions . これらの2つの属性の値を設定した後、プログラムをclick 我々の新しく作成されたリンクのためのイベント.このイベントは、編集された画像のダウンロードを開始します.

下記demo 動作中のスニペットを示します.

Some filters & bigger images might take some time before you see their final outcome. In such cases, users might think that the filter is not working. We can make use of events to keep a track on the progress of a filter.

結論

さて、アップロードとダウンロード機能を備えたイメージエディタを構築する方法についての基本的な理解があります.Camanjsは、多くの先進的で効率的なイメージ/キャンバス編集技術を提供します.必ず読んでくださいdocumentation 可能性を探る.