সুতরাং যদি সমস্ত ব্রাউজারগুলি (প্রকৃতপক্ষে, ক্রোম 5 আমাকে বেশ ভাল দেয়) আপনি কীভাবে পুনরায় মডেলিংয়ের মানটি যথেষ্ট পরিমাণে দিতে না চান? আপনি নিজে এগুলি তখন বাস্তবায়ন করুন! ওহে আসুন, আমরা ওয়েব 3.0 এর নতুন যুগে প্রবেশ করছি, এইচটিএমএল 5 কমপ্লায়েন্ট ব্রাউজারগুলি, সুপার অপ্টিমাইজড জেআইটি জাভাস্ক্রিপ্ট সংকলক, মাল্টি-কোর (†) মেশিন, টন মেমরি নিয়ে, আপনি কীসের ভয় পাচ্ছেন? আরে, জাভাস্ক্রিপ্টে জাভা শব্দ আছে, তাই এর পারফরম্যান্সের গ্যারান্টি দেওয়া উচিত, তাই না? দেখুন, থাম্বনেইল তৈরির কোড:
// 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);
};
এখন সময়টি আপনার সেরা ব্রাউজারগুলিকে খোলার এবং দেখার জন্য কোনটি সম্ভবত আপনার ক্লায়েন্টের রক্তচাপ বাড়িয়ে তুলবে!
উম্মে, আমার বিদ্রূপের ট্যাগটি কোথায়?
(যেহেতু কোডের অনেকগুলি অংশ অ্যানিরিফ গ্যালারী জেনারেটরের উপর ভিত্তি করে এটিও জিপিএল 2 এর আওতায় আসে? আমি জানি না)
J আসলে জাভাস্ক্রিপ্টের সীমাবদ্ধতার কারণে, বহু-কোর সমর্থিত নয়।
