画像の拡大縮小(バイキュービック Lanczos)+高速化o(n^2)⇒o(n) for JavaScript
※Nは解像度ではなく影響範囲 N*N ⇒ (1+1/scale)*N
※計算誤差等により処理結果が微妙に異なります
有名な拡大縮アルゴリズムを実装してみました。高解像度では計算に時間がかかるため高速化もしてみました。
デモツール(Webアプリ)を無料公開、ソースコード(TypeScript)は有料
デモツール拡大画像比較
計算方法
基本計算式
画像の拡大縮小はピクセル間の色補間です。
すべての方法で同じ計算を行います。異なるのは、重み関数の計算式だけです。
重み関数
バイキュービック
たぶん1番使われている方式。aの値で滑らかさを調整します。
Lanczos
sinc関数を使用した再サンプリングの計算を省略(窓関数)、近似したものです。省略の度合い(Nの値)で画質と計算時間が変わります。N=3が良く使われるようです。
高速化
横方向に拡大した後、縦方向に拡大するだけです(または縦⇒横)。
1ピクセルあたりのバイキュービックの重み計算の回数は
5*5=25回
高速化(冗長な計算をメモリに保存、再利用)で
(1 + 1/scale )*5
まで減らすことが可能です。
証明
同じ結果が得られることの証明です。横方向に拡大した後、縦方向に拡大した場合に上記の基本計算式と同じになることを示します。
計算誤差
浮動小数や整数割り算の切り捨てなどの計算誤差、量子化誤差に注意
(a+b+c)*d ≒ a*d + b*d + c*d
全く同じ処理結果にはなりません。
デモツール
enobiru 1.0 - 画像拡大縮小 - (zerogram.info)
対応ブラウザ(動作確認)
Windows10 Chrome/Edge
マウス必須、タブレット、スマホのタッチ操作では一部の操作しかできません。iPad、Andorid9での読み込みと保存の動作確認済み、画面のスクロール不可。
ソースコード
デモツールのソースコード(TypeScript)です。開発環境はnpm、typescript、webpackなど。ソースコード(srcフォルダ以下、開発環境関連除く)にオープンソースなどの外部のソースコードは使用していません。
※Windows10のEdge(Chrome)用、スマホなどで動作させるには改造が必要です
開発環境(package.json)
npmと下記(devDependencies)の開発ツールを利用しています。
ビルド方法などはreadme.txtをご覧ください。
{
"name": "enobiru",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack --watch --config webpack.dev.js",
"build": "webpack --config webpack.prod.js"
},
"private": true,
"author": "zerogram",
"license": "private",
"browserslist": [
"last 1 Chrome version",
"last 1 Safari version",
"last 1 Edge version"
],
"devDependencies": {
"css-loader": "^5.0.1",
"style-loader": "^2.0.0",
"ts-loader": "^8.0.3",
"typescript": "^4.0.2",
"webpack": "^5.41.1",
"webpack-cli": "^4.7.2",
"webpack-merge": "^5.7.3"
}
}
ダウンロード
ここから先は
¥ 600
この記事が役に立ったという方は、サポートお願いします。今後の製作の励みになります。