image-ghost-canvas はブラウザにある canvas の機能を用いて画像の縦横比を保ったまま拡大または縮小した後に正方形にトリミングを行うライブラリツールです。
ブラウザ上でアイコンの画像をトリミングして表示したい時などに便利なツールです。

使い方

使い方は非常に簡単です。現時点ではトリミング機能を行う「resizeImage」メソッドしか用意しておりませんが、機能の拡張も検討しております。また、Plunker に anugularJS 上で動く物をアップしてあります。そちらの方も確認してみてください。

インストール

npm コマンドでインストールします。

npm i image-ghost-canvas

インポート

import します。下記は javascript の import を例にした場合です。

import  ImageGhostCanvas  from  'image-ghost-canvas';

インスタンス化

import したら今度はインスタンス化します。「new ImageGhostCanvas」はオプションとして size を渡すことができます。size はリサイズ後の画像サイズを指定できます。オプションの詳細はこちらから確認することができます。

public imageGhostCanvas = new ImageGhostCanvas();

resizeImage メソッドを実行

トリミングには resizeImage メソッドを使用します。data URL 化した画像データの情報を resizeImage メソッドに渡すと、Promise を返します。この Promise は成功すると、結果を data URL の形式で返し、失敗した場合は Error オブジェクトを返します。

const reader = new FileReader();  

// data.srcElement.files[0] is file information from image was upload via input file tag.
reader.readAsDataURL(data.srcElement.files[0]);  
reader.onload = () => {
 // success
 imageGhostCanvas.resizeImage(reader.result)
 .then((data) => {
     imageSrc = data;
 });

 // error
 imageGhostCanvas.resizeImage(reader.result)
 .catch((error) => {
     // when it result error, do something for error.
 });
};

npm ライブラリ

https://www.npmjs.com/package/image-ghost-canvas

コメントの投稿