「asshuku」フロントエンドで画像を圧縮する！

はじめに

初めまして、KouKinです。
フロントエンド開発歴5年。

出身は中国、日本の文化が大好きです。前は約2年ぐらい東京のIT会社で働きました。いろんな原因で2021年に帰国しました。今は中国の会社で働いています。

このような文章を作るのは初めてなんですが、多分何か文法的な間違いがあると思ういます。この原因で読みづらい、理解できない部分があれば、ご了承いただけますと幸いです。

今回はみなさんに共有したいことは「asshuku」です。
「asshuku」はフロントエンドで画像を圧縮することをできるnpmのpackageです。

「asshuku」 作成原因

ある日僕と上司のやり取り：

上司「コウ君、フロントエンドで画像を圧縮できるの？サーバー側の原因で圧縮しないとエラーが発生する可能性が高くになるそう。」

僕　「アップロードする画像の最大ファイルサイズを制限することは一般的な処理方ですが、圧縮の方は試してみます。」

上司「おお、頼むぞ。」

大体2、3日ぐらい、画像を圧縮に関するコードが書き終わりました。その時は偶然に、別のグループの業務システムもこの機能を求めているということを聞きました。

「意外と人気があるね。でも毎回違うシステムでこの似たような機能を書くのは時間の無駄だ（多分コードもほぼ同じ）。npm の package がつくってみよう！」

さて、「asshuku」が完成しました。

インストール

好きなパッケージマネージャーを使って、asshukuをインポートする。

npm install asshuku

or

yarn add asshuku

例

必要なところにasshukuをインポートする。

import { asshukuImage } from "asshuku";
s
... // other codes

const _file = await asshukuImage(file, {
    quality : 50,
    multAsshukuOptions : {
        targetSize: 500 * 1024, // 500KB
        maxRetryNum: 5, // 綜合六回を圧縮する
        qualityChangeFn : (quality) => quality / 3
    }
});

オプション

基礎オプション

Property	Description	Type	Default	Required
file	圧縮したい画像ファイル	File		true
asshukuOptions	オプション	AsshukuOptions	-	false

AsshukuOptions

Property	Description	Type	Default	Required
quality	圧縮質 (0 ~ 100)	Number	80	true
multAsshukuOptions	複数回圧縮する場合のオプション	MultAsshukuOptions	-	false

MultAsshukuOptions

Property	Description	Type	Default	Required
targetSize	希望する圧縮後のファイルサイズ	Number	-	true
maxRetryNum	最大再試行回数（ファイルが大きすぎると、何度圧縮しても目標サイズに到達できませんのため、このパラメーターを設置する）	Number	-	true
qualityChangeFn	quality減らす方法、qualityはマイナスには減らない。（マイナスの場合は0をリターン）	Function	(quality) => quality / 2	false

サポート

✅　ES2015とその以後のバージョン。
✅　Typescript。
✅　すべてのコードをオープンソース化しました、ご必要があればご自由にお使いください。

最後

最後までお読みいただきありがとうございます。
[asshuku]があなたのお仕事に少しでもお役に立てれば光栄です。

リンク

npm
github