HTML5キャンバスで画像のサイズを変更する
私は、JavaScriptとキャンバス要素を使用してクライアント側でサムネイル画像を作成しようとしていますが、画像を縮小すると、ひどく見えます。それはそれがBicubicの代わりに '最近隣'に設定されたリサンプリングでphotoshopで縮小されたかのように見えます。 このサイト でも同様にキャンバスを使ってそれをうまくやることができるので、私はこれを正しく見せることが可能であることを知っています。 「[Source]」リンクに表示されているのと同じコードを使用してみましたが、それでもひどいようです。足りないもの、設定が必要な設定、または何かがありますか。
編集：
JPGのサイズを変更しようとしています。リンク先のサイトとフォトショップで同じjpgのサイズを変更しようとしましたが、サイズを縮小しても問題ありません。
関連するコードは次のとおりです。
reader.onloadend = function(e)
{
var img = new Image();
var ctx = canvas.getContext("2d");
var canvasCopy = document.createElement("canvas");
var copyContext = canvasCopy.getContext("2d");
img.onload = function()
{
var ratio = 1;
if(img.width > maxWidth)
ratio = maxWidth / img.width;
else if(img.height > maxHeight)
ratio = maxHeight / img.height;
canvasCopy.width = img.width;
canvasCopy.height = img.height;
copyContext.drawImage(img, 0, 0);
canvas.width = img.width * ratio;
canvas.height = img.height * ratio;
ctx.drawImage(canvasCopy, 0, 0, canvasCopy.width, canvasCopy.height, 0, 0, canvas.width, canvas.height);
};
img.src = reader.result;
}
編集2：
私が間違っていたようだ、リンクされたウェブサイトは画像を縮小する仕事をこれ以上うまくいっていなかった。私は他の方法を試してみましたが、どれも良く見えません。これが異なる方法の結果です。
フォトショップ：
キャンバス：
画像をレンダリングする画像：optimizeQualityを設定し、幅/高さで拡大/縮小します。
画像レンダリングを伴う画像：optimizeQualityが設定され、-moz-transformを用いて拡大縮小されます。
キャンバスはpixasticでリサイズします：
これは、Firefoxが想定していたようにバイキュービックサンプリングを使用していないことを意味します。実際に追加するまで待つ必要があります。
編集3：
それで、すべてのブラウザ（実際には、Chrome 5で私には非常に良いブラウザが提供されています）で十分なリサンプリング品質が得られない場合はどうしますか？あなたはそれらを自分で実装します。さて、私たちはWeb 3.0の新時代、HTML5準拠のブラウザ、超最適化されたJIT Javascriptコンパイラ、大量のメモリを搭載したマルチコア（†）マシン、に何を恐れていますか？こんにちは、JavaScriptでWord Javaがあるので、それによりパフォーマンスが保証されるはずです。サムネイル生成コードを見てください。
// returns a function that calculates lanczos weight
function lanczosCreate(lobes) {
return function(x) {
if (x > lobes)
return 0;
x *= Math.PI;
if (Math.abs(x) < 1e-16)
return 1;
var xx = x / lobes;
return Math.sin(x) * Math.sin(xx) / x / xx;
};
}
// elem: canvas element, img: image element, sx: scaled width, lobes: kernel radius
function thumbnailer(elem, img, sx, lobes) {
this.canvas = elem;
elem.width = img.width;
elem.height = img.height;
elem.style.display = "none";
this.ctx = elem.getContext("2d");
this.ctx.drawImage(img, 0, 0);
this.img = img;
this.src = this.ctx.getImageData(0, 0, img.width, img.height);
this.dest = {
width : sx,
height : Math.round(img.height * sx / img.width),
};
this.dest.data = new Array(this.dest.width * this.dest.height * 3);
this.lanczos = lanczosCreate(lobes);
this.ratio = img.width / sx;
this.rcp_ratio = 2 / this.ratio;
this.range2 = Math.ceil(this.ratio * lobes / 2);
this.cacheLanc = {};
this.center = {};
this.icenter = {};
setTimeout(this.process1, 0, this, 0);
}
thumbnailer.prototype.process1 = function(self, u) {
self.center.x = (u + 0.5) * self.ratio;
self.icenter.x = Math.floor(self.center.x);
for (var v = 0; v < self.dest.height; v++) {
self.center.y = (v + 0.5) * self.ratio;
self.icenter.y = Math.floor(self.center.y);
var a, r, g, b;
a = r = g = b = 0;
for (var i = self.icenter.x - self.range2; i <= self.icenter.x + self.range2; i++) {
if (i < 0 || i >= self.src.width)
continue;
var f_x = Math.floor(1000 * Math.abs(i - self.center.x));
if (!self.cacheLanc[f_x])
self.cacheLanc[f_x] = {};
for (var j = self.icenter.y - self.range2; j <= self.icenter.y + self.range2; j++) {
if (j < 0 || j >= self.src.height)
continue;
var f_y = Math.floor(1000 * Math.abs(j - self.center.y));
if (self.cacheLanc[f_x][f_y] == undefined)
self.cacheLanc[f_x][f_y] = self.lanczos(Math.sqrt(Math.pow(f_x * self.rcp_ratio, 2)
+ Math.pow(f_y * self.rcp_ratio, 2)) / 1000);
weight = self.cacheLanc[f_x][f_y];
if (weight > 0) {
var idx = (j * self.src.width + i) * 4;
a += weight;
r += weight * self.src.data[idx];
g += weight * self.src.data[idx + 1];
b += weight * self.src.data[idx + 2];
}
}
}
var idx = (v * self.dest.width + u) * 3;
self.dest.data[idx] = r / a;
self.dest.data[idx + 1] = g / a;
self.dest.data[idx + 2] = b / a;
}
if (++u < self.dest.width)
setTimeout(self.process1, 0, self, u);
else
setTimeout(self.process2, 0, self);
};
thumbnailer.prototype.process2 = function(self) {
self.canvas.width = self.dest.width;
self.canvas.height = self.dest.height;
self.ctx.drawImage(self.img, 0, 0, self.dest.width, self.dest.height);
self.src = self.ctx.getImageData(0, 0, self.dest.width, self.dest.height);
var idx, idx2;
for (var i = 0; i < self.dest.width; i++) {
for (var j = 0; j < self.dest.height; j++) {
idx = (j * self.dest.width + i) * 3;
idx2 = (j * self.dest.width + i) * 4;
self.src.data[idx2] = self.dest.data[idx];
self.src.data[idx2 + 1] = self.dest.data[idx + 1];
self.src.data[idx2 + 2] = self.dest.data[idx + 2];
}
}
self.ctx.putImageData(self.src, 0, 0);
self.canvas.style.display = "block";
};
...これであなたはこれらのような結果を生み出すことができます！
とにかく、これはあなたの例の '修正'バージョンです。
img.onload = function() {
var canvas = document.createElement("canvas");
new thumbnailer(canvas, img, 188, 3); //this produces lanczos3
// but feel free to raise it up to 8. Your client will appreciate
// that the program makes full use of his machine.
document.body.appendChild(canvas);
};
今すぐあなたの最高のブラウザを売り込み、どれがクライアントの血圧を上昇させる可能性が最も低いかを見る時が来ました！
うーん、私の皮肉のタグはどこですか？
（コードの多くの部分は Anrieff Gallery Generator に基づいているため、GPL2でもカバーされていますか？いいえ、違います）。
†実際にはJavaScriptの制限により、マルチコアはサポートされていません。
JavaScriptでHermiteフィルタを使用した高速画像サイズ変更/リサンプリングアルゴリズム。透明性をサポートし、良い品質を与えます。プレビュー：
アップデート：GitHubにバージョン2.0を追加しました（高速、Webワーカー+譲渡可能なオブジェクト）。最後に私はそれがうまくいった！
Git： https://github.com/viliusle/Hermite-resize
デモ： http://viliusle.github.io/miniPaint/
/**
* Hermite resize - fast image resize/resample using Hermite filter. 1 cpu version!
*
* @param {HtmlElement} canvas
* @param {int} width
* @param {int} height
* @param {boolean} resize_canvas if true, canvas will be resized. Optional.
*/
function resample_single(canvas, width, height, resize_canvas) {
var width_source = canvas.width;
var height_source = canvas.height;
width = Math.round(width);
height = Math.round(height);
var ratio_w = width_source / width;
var ratio_h = height_source / height;
var ratio_w_half = Math.ceil(ratio_w / 2);
var ratio_h_half = Math.ceil(ratio_h / 2);
var ctx = canvas.getContext("2d");
var img = ctx.getImageData(0, 0, width_source, height_source);
var img2 = ctx.createImageData(width, height);
var data = img.data;
var data2 = img2.data;
for (var j = 0; j < height; j++) {
for (var i = 0; i < width; i++) {
var x2 = (i + j * width) * 4;
var weight = 0;
var weights = 0;
var weights_alpha = 0;
var gx_r = 0;
var gx_g = 0;
var gx_b = 0;
var gx_a = 0;
var center_y = (j + 0.5) * ratio_h;
var yy_start = Math.floor(j * ratio_h);
var yy_stop = Math.ceil((j + 1) * ratio_h);
for (var yy = yy_start; yy < yy_stop; yy++) {
var dy = Math.abs(center_y - (yy + 0.5)) / ratio_h_half;
var center_x = (i + 0.5) * ratio_w;
var w0 = dy * dy; //pre-calc part of w
var xx_start = Math.floor(i * ratio_w);
var xx_stop = Math.ceil((i + 1) * ratio_w);
for (var xx = xx_start; xx < xx_stop; xx++) {
var dx = Math.abs(center_x - (xx + 0.5)) / ratio_w_half;
var w = Math.sqrt(w0 + dx * dx);
if (w >= 1) {
//pixel too far
continue;
}
//hermite filter
weight = 2 * w * w * w - 3 * w * w + 1;
var pos_x = 4 * (xx + yy * width_source);
//alpha
gx_a += weight * data[pos_x + 3];
weights_alpha += weight;
//colors
if (data[pos_x + 3] < 255)
weight = weight * data[pos_x + 3] / 250;
gx_r += weight * data[pos_x];
gx_g += weight * data[pos_x + 1];
gx_b += weight * data[pos_x + 2];
weights += weight;
}
}
data2[x2] = gx_r / weights;
data2[x2 + 1] = gx_g / weights;
data2[x2 + 2] = gx_b / weights;
data2[x2 + 3] = gx_a / weights_alpha;
}
}
//clear and resize canvas
if (resize_canvas === true) {
canvas.width = width;
canvas.height = height;
} else {
ctx.clearRect(0, 0, width_source, height_source);
}
//draw
ctx.putImageData(img2, 0, 0);
}
試してみてください pica - それは選択可能なアルゴリズムを持つ高度に最適化されたリサイズです。 デモ をご覧ください。
たとえば、最初の投稿の元の画像は、Lanczosフィルタと3pxウィンドウで120ms、Boxフィルタと0.5pxウィンドウで60msにサイズ変更されます。巨大な17MBの画像の場合、5000x3000pxのサイズ変更にはデスクトップで1秒、モバイルで3秒かかります。
すべてのサイズ変更の原則はこのスレッドで非常によく説明されており、picaはロケット科学を追加するものではありません。しかし、それは現代のJITのために非常によく最適化されており、箱から出して（npmまたはbower経由で）すぐに使用できる状態にあります。また、インターフェイスがフリーズするのを防ぐために、利用可能であればWebワーカーを使用します。
また、縮小後に非常に役立つので、私はすぐにアンシャープマスクのサポートを追加する予定です。
私はこれが古いスレッドであることを知っていますが、それは私のような何人かの人々が初めてこの問題にぶつかった後に役に立つかもしれません。
これは、画像をリロードするたびに画像のサイズを変更するコードです。これはまったく最適ではないことを私は認識していますが、概念実証として提供しています。
また、単純なセレクターにjQueryを使用して申し訳ありませんが、構文に慣れすぎています。
$(document).on('ready', createImage);
$(window).on('resize', createImage);
var createImage = function(){
var canvas = document.getElementById('myCanvas');
canvas.width = window.innerWidth || $(window).width();
canvas.height = window.innerHeight || $(window).height();
var ctx = canvas.getContext('2d');
img = new Image();
img.addEventListener('load', function () {
ctx.drawImage(this, 0, 0, w, h);
});
img.src = 'http://www.ruinvalor.com/Telanor/images/original.jpg';
};html, body{
height: 100%;
width: 100%;
margin: 0;
padding: 0;
background: #000;
}
canvas{
position: absolute;
left: 0;
top: 0;
z-index: 0;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<meta charset="utf-8" />
<title>Canvas Resize</title>
</head>
<body>
<canvas id="myCanvas"></canvas>
</body>
</html>私のcreateImage関数は、ドキュメントがロードされた後に一度呼び出され、その後ウィンドウがサイズ変更イベントを受け取るたびに呼び出されます。
私は両方ともMac上のChrome 6とFirefox 3.6でテストした。この「テクニック」はまるで夏にアイスクリームだったかのようにプロセッサを食べますが、それはトリックをします。
私はここで役に立つかもしれないhtmlキャンバスピクセル配列に画像補間をするためにいくつかのアルゴリズムを出しました：
https://web.archive.org/web/20170104190425/http://jsperf.com:80/pixel-interpolation/2
これらはコピー/貼り付けが可能で、画像のサイズを変更するためにWebワーカーの内部で使用することができます（または補間を必要とする他の操作 - 私は今のところ画像を修正するためにそれらを使用しています）。
私は上記のlanczosのものを追加していないので、ご希望の場合は比較としてそれを追加してください。
このリンク をチェックアウトして、それがtrueに設定されていることを確認してください。
画像の拡大縮小動作を制御する
Gecko 1.9.2（Firefox 3.6/Thunderbird 3.1/Fennec 1.0）で導入されました。
Gecko 1.9.2では、canvas要素にmozImageSmoothingEnabledプロパティが導入されました。このブール値がfalseの場合、画像は拡大/縮小されてもスムージングされません。このプロパティはデフォルトではtrueです。プレーンプリントを見る
- cx.mozImageSmoothingEnabled = false;
これは@ Telanorのコードを応用したJavaScript関数です。関数に最初の引数としてimage base64を渡すと、サイズ変更された画像のbase64を返します。 maxWidthとmaxHeightはオプションです。
function thumbnail(base64, maxWidth, maxHeight) {
// Max size for thumbnail
if(typeof(maxWidth) === 'undefined') var maxWidth = 500;
if(typeof(maxHeight) === 'undefined') var maxHeight = 500;
// Create and initialize two canvas
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
var canvasCopy = document.createElement("canvas");
var copyContext = canvasCopy.getContext("2d");
// Create original image
var img = new Image();
img.src = base64;
// Determine new ratio based on max size
var ratio = 1;
if(img.width > maxWidth)
ratio = maxWidth / img.width;
else if(img.height > maxHeight)
ratio = maxHeight / img.height;
// Draw original image in second canvas
canvasCopy.width = img.width;
canvasCopy.height = img.height;
copyContext.drawImage(img, 0, 0);
// Copy and resize second canvas to first canvas
canvas.width = img.width * ratio;
canvas.height = img.height * ratio;
ctx.drawImage(canvasCopy, 0, 0, canvasCopy.width, canvasCopy.height, 0, 0, canvas.width, canvas.height);
return canvas.toDataURL();
}
単に画像のサイズを変更しようとしているのであれば、CSSを使用して画像のwidthとheightを設定することをお勧めします。これは簡単な例です。
.small-image {
width: 100px;
height: 100px;
}
heightとwidthはJavaScriptを使っても設定できることに注意してください。これが簡単なサンプルコードです。
var img = document.getElement("my-image");
img.style.width = 100 + "px"; // Make sure you add the "px" to the end,
img.style.height = 100 + "px"; // otherwise you'll confuse IE
また、サイズ変更された画像が美しく見えるようにするには、画像セレクタに次のCSSルールを追加します。
-ms-interpolation-mode: bicubic：IE7で導入image-rendering: optimizeQuality：FireFox 3.6で導入されました
私が言うことができる限り、IEを除くすべてのブラウザは、デフォルトでバイキュービックアルゴリズムを使用して画像のサイズを変更します。
Css widthとheightを設定してもうまくいかない場合は、css transformを使用してください。
何らかの理由でキャンバスを使用する必要がある場合、画像のサイズを変更する方法は2つあります。cssを使用してキャンバスのサイズを変更するか、画像を小さいサイズで描画することです。
詳細については この質問 をご覧ください。
私はFirefoxでキャンバス要素を右クリックして名前を付けて保存することでこの画像を取得しました。
var img = new Image();
img.onload = function () {
console.debug(this.width,this.height);
var canvas = document.createElement('canvas'), ctx;
canvas.width = 188;
canvas.height = 150;
document.body.appendChild(canvas);
ctx = canvas.getContext('2d');
ctx.drawImage(img,0,0,188,150);
};
img.src = 'original.jpg';
とにかく、これはあなたの例の '修正'バージョンです。
var img = new Image();
// added cause it wasnt defined
var canvas = document.createElement("canvas");
document.body.appendChild(canvas);
var ctx = canvas.getContext("2d");
var canvasCopy = document.createElement("canvas");
// adding it to the body
document.body.appendChild(canvasCopy);
var copyContext = canvasCopy.getContext("2d");
img.onload = function()
{
var ratio = 1;
// defining cause it wasnt
var maxWidth = 188,
maxHeight = 150;
if(img.width > maxWidth)
ratio = maxWidth / img.width;
else if(img.height > maxHeight)
ratio = maxHeight / img.height;
canvasCopy.width = img.width;
canvasCopy.height = img.height;
copyContext.drawImage(img, 0, 0);
canvas.width = img.width * ratio;
canvas.height = img.height * ratio;
// the line to change
// ctx.drawImage(canvasCopy, 0, 0, canvasCopy.width, canvasCopy.height, 0, 0, canvas.width, canvas.height);
// the method signature you are using is for slicing
ctx.drawImage(canvasCopy, 0, 0, canvas.width, canvas.height);
};
// changed for example
img.src = 'original.jpg';
元の幅より小さい幅の画像にサイズ変更するには、次のようにします。
function resize2(i) {
var cc = document.createElement("canvas");
cc.width = i.width / 2;
cc.height = i.height / 2;
var ctx = cc.getContext("2d");
ctx.drawImage(i, 0, 0, cc.width, cc.height);
return cc;
}
var cc = img;
while (cc.width > 64 * 2) {
cc = resize2(cc);
}
// .. than drawImage(cc, .... )
そしてそれは動作します=）。
この解決策のいくつかに伴う問題は、それらがピクセルデータに直接アクセスし、それを通してループダウンサンプリングを実行することである。画像のサイズによっては、これはリソースを大量に消費する可能性があるため、ブラウザの内部アルゴリズムを使用することをお勧めします。
drawImage（）関数は、線形補間、最近傍リサンプリング方法を使用しています。元のサイズの半分を超えてサイズを変更しない場合は、うまく機能します。
一度に最大半分のサイズだけを変更するようにループすると、結果はかなり良くなり、ピクセルデータにアクセスするよりもはるかに速くなります。
この関数は、目的のサイズに達するまで、一度に半分にダウンサンプリングします。
function resize_image( src, dst, type, quality ) {
var tmp = new Image(),
canvas, context, cW, cH;
type = type || 'image/jpeg';
quality = quality || 0.92;
cW = src.naturalWidth;
cH = src.naturalHeight;
tmp.src = src.src;
tmp.onload = function() {
canvas = document.createElement( 'canvas' );
cW /= 2;
cH /= 2;
if ( cW < src.width ) cW = src.width;
if ( cH < src.height ) cH = src.height;
canvas.width = cW;
canvas.height = cH;
context = canvas.getContext( '2d' );
context.drawImage( tmp, 0, 0, cW, cH );
dst.src = canvas.toDataURL( type, quality );
if ( cW <= src.width || cH <= src.height )
return;
tmp.src = dst.src;
}
}
// The images sent as parameters can be in the DOM or be image objects
resize_image( $( '#original' )[0], $( '#smaller' )[0] );
この投稿へのクレジット
アルゴリズムを適用せずにカラーデータを平均化して保存するため、私が書いたモジュールはphotoshopと同様の結果が得られると思います。それは少し遅いですが、私にはそれがすべての色データを保存するので、それは最高です。
https://github.com/danschumann/limby-resize/blob/master/lib/canvas_resize.js
最近傍を取って他のピクセルを落としたり、グループをサンプリングしてランダムな平均をとることはしません。各ソースピクセルがデスティネーションピクセルに出力する正確な比率を取ります。ソースの平均のピクセルカラーはデスティネーションの平均のピクセルカラーになります。これらの他の式は、私は彼らがそうではないと思います。
使い方の例は、 https://github.com/danschumann/limby-resize の最後にあります
UPDATE OCT 2018：最近の私の例は他の何よりも学術的なものです。 Webglはほぼ100％なので、同様の結果を得るためにはサイズを変更したほうが賢明ですが、速いです。 PICA.jsがこれを行います、と私は思います。 -
それで、キャンバスを使って作業している間に私が少し前に見つけた興味深い何かが、役に立つかもしれません：
キャンバスコントロールを単独でサイズ変更するには、height=""およびwidth=""属性（またはcanvas.width/canvas.height要素）を使用する必要があります。 CSSを使用してキャンバスのサイズを変更すると、キャンバスの領域を単に拡大または縮小するのではなく、実際にキャンバスのコンテンツがキャンバス全体に合うように拡大（つまりサイズ変更）されます。
高さと幅の属性を画像のサイズに設定してキャンバスコントロールに画像を描画し、次にCSSを使用してキャンバスのサイズを目的のサイズに変更することをお勧めします。おそらくこれは異なるサイズ変更アルゴリズムを使用するでしょう。
また、キャンバスは、ブラウザが異なると（およびブラウザのバージョンが異なると）、効果が異なることにも注意してください。ブラウザで使用されているアルゴリズムとテクニックは時間の経過とともに変わる可能性があります（特にFirefox 4とChrome 6が近日中に登場するため、キャンバスのレンダリングパフォーマンスに重点が置かれます）。
さらに、SVGは異なるアルゴリズムを使用している可能性があるため、SVGにもショットを適用したい場合があります。
頑張って！
私は、@ syockitの回答とステップダウンのアプローチを、興味のある人のために再利用可能なAngularサービスに変換しました。 https://Gist.github.com/fisch0920/ 37bac5e741eaec60e983
どちらも独自の長所と短所があるため、両方のソリューションを含めました。 lanczos畳み込みアプローチはより遅いという犠牲を払ってより高い品質ですが、段階的なダウンスケーリングアプローチは適度にアンチエイリアスされた結果を生み出し、そしてかなり速いです。
使用例
angular.module('demo').controller('ExampleCtrl', function (imageService) {
// EXAMPLE USAGE
// NOTE: it's bad practice to access the DOM inside a controller,
// but this is just to show the example usage.
// resize by lanczos-sinc filter
imageService.resize($('#myimg')[0], 256, 256)
.then(function (resizedImage) {
// do something with resized image
})
// resize by stepping down image size in increments of 2x
imageService.resizeStep($('#myimg')[0], 256, 256)
.then(function (resizedImage) {
// do something with resized image
})
})
速くて簡単なJavascript画像リサイズ：
https://github.com/calvintwr/Hermite-resize
つかいます：
h.resize({
source: document.getElementById('image'), // any canvas or image elements, jQuery or native
width: 400,
height: 600,
output: 'image', // [optional] `image` or `canvas`. If not entered output is same as input element.
quality: 0.7, // [optional] applicable for `image` output only
}, function(output) {
//your callback
});
歴史
これは実際に何度もの研究、読み、そして試みの後です。
リサイズアルゴリズムは@ ViliusLのHermiteスクリプトを使用します（Hermiteリサイズは本当に最速で、適度に良い出力を与えます）。あなたが必要とする機能で拡張されました。
他のすべてのJSリサイズとは異なり、リサイズ時にブラウザがフリーズしないように1人の作業者がリサイズを行うようにします。
素晴らしい答えをくれてありがとう@syockit。しかし、私はそれを機能させるために次のように少し再フォーマットしなければなりませんでした。おそらくDOMスキャンの問題が原因です。
$(document).ready(function () {
$('img').on("load", clickA);
function clickA() {
var img = this;
var canvas = document.createElement("canvas");
new thumbnailer(canvas, img, 50, 3);
document.body.appendChild(canvas);
}
function thumbnailer(elem, img, sx, lobes) {
this.canvas = elem;
elem.width = img.width;
elem.height = img.height;
elem.style.display = "none";
this.ctx = elem.getContext("2d");
this.ctx.drawImage(img, 0, 0);
this.img = img;
this.src = this.ctx.getImageData(0, 0, img.width, img.height);
this.dest = {
width: sx,
height: Math.round(img.height * sx / img.width)
};
this.dest.data = new Array(this.dest.width * this.dest.height * 3);
this.lanczos = lanczosCreate(lobes);
this.ratio = img.width / sx;
this.rcp_ratio = 2 / this.ratio;
this.range2 = Math.ceil(this.ratio * lobes / 2);
this.cacheLanc = {};
this.center = {};
this.icenter = {};
setTimeout(process1, 0, this, 0);
}
//returns a function that calculates lanczos weight
function lanczosCreate(lobes) {
return function (x) {
if (x > lobes)
return 0;
x *= Math.PI;
if (Math.abs(x) < 1e-16)
return 1
var xx = x / lobes;
return Math.sin(x) * Math.sin(xx) / x / xx;
}
}
process1 = function (self, u) {
self.center.x = (u + 0.5) * self.ratio;
self.icenter.x = Math.floor(self.center.x);
for (var v = 0; v < self.dest.height; v++) {
self.center.y = (v + 0.5) * self.ratio;
self.icenter.y = Math.floor(self.center.y);
var a, r, g, b;
a = r = g = b = 0;
for (var i = self.icenter.x - self.range2; i <= self.icenter.x + self.range2; i++) {
if (i < 0 || i >= self.src.width)
continue;
var f_x = Math.floor(1000 * Math.abs(i - self.center.x));
if (!self.cacheLanc[f_x])
self.cacheLanc[f_x] = {};
for (var j = self.icenter.y - self.range2; j <= self.icenter.y + self.range2; j++) {
if (j < 0 || j >= self.src.height)
continue;
var f_y = Math.floor(1000 * Math.abs(j - self.center.y));
if (self.cacheLanc[f_x][f_y] == undefined)
self.cacheLanc[f_x][f_y] = self.lanczos(Math.sqrt(Math.pow(f_x * self.rcp_ratio, 2) + Math.pow(f_y * self.rcp_ratio, 2)) / 1000);
weight = self.cacheLanc[f_x][f_y];
if (weight > 0) {
var idx = (j * self.src.width + i) * 4;
a += weight;
r += weight * self.src.data[idx];
g += weight * self.src.data[idx + 1];
b += weight * self.src.data[idx + 2];
}
}
}
var idx = (v * self.dest.width + u) * 3;
self.dest.data[idx] = r / a;
self.dest.data[idx + 1] = g / a;
self.dest.data[idx + 2] = b / a;
}
if (++u < self.dest.width)
setTimeout(process1, 0, self, u);
else
setTimeout(process2, 0, self);
};
process2 = function (self) {
self.canvas.width = self.dest.width;
self.canvas.height = self.dest.height;
self.ctx.drawImage(self.img, 0, 0);
self.src = self.ctx.getImageData(0, 0, self.dest.width, self.dest.height);
var idx, idx2;
for (var i = 0; i < self.dest.width; i++) {
for (var j = 0; j < self.dest.height; j++) {
idx = (j * self.dest.width + i) * 3;
idx2 = (j * self.dest.width + i) * 4;
self.src.data[idx2] = self.dest.data[idx];
self.src.data[idx2 + 1] = self.dest.data[idx + 1];
self.src.data[idx2 + 2] = self.dest.data[idx + 2];
}
}
self.ctx.putImageData(self.src, 0, 0);
self.canvas.style.display = "block";
}
});