আমি আমার ব্রাউজারে চিত্রগুলির আকার পরিবর্তন করতে এইচটিএমএল 5 ক্যানভাস উপাদান ব্যবহার করি। দেখা যাচ্ছে যে মানটি খুব কম। আমি এটি পেয়েছি: <স্ক্যানভ্যাস> স্কেল করার সময় ইন্টারপোলেশন অক্ষম করুন তবে এটি গুণমান বাড়াতে সহায়তা করে না।
নীচে আমার সিএসএস এবং জেএস কোডের পাশাপাশি ছবিটি ফটোশপের সাথে বিভক্ত এবং ক্যানভাস এপিআইতে ছোট আকারে দেওয়া আছে।
ব্রাউজারে কোনও চিত্র স্কেল করার সময় অনুকূল মানের পেতে আমার কী করতে হবে?
দ্রষ্টব্য: আমি একটি বৃহত চিত্রকে একটি ছোট করে স্কেল করতে চাই, একটি ক্যানভাসে রঙ পরিবর্তন করতে এবং ক্যানভাস থেকে ফলাফলটি সার্ভারে প্রেরণ করতে চাই।
সিএসএস:
canvas, img {
image-rendering: optimizeQuality;
image-rendering: -moz-crisp-edges;
image-rendering: -webkit-optimize-contrast;
image-rendering: optimize-contrast;
-ms-interpolation-mode: nearest-neighbor;
}জাতীয়:
var $img = $('<img>');
var $originalCanvas = $('<canvas>');
$img.load(function() {
var originalContext = $originalCanvas[0].getContext('2d');
originalContext.imageSmoothingEnabled = false;
originalContext.webkitImageSmoothingEnabled = false;
originalContext.mozImageSmoothingEnabled = false;
originalContext.drawImage(this, 0, 0, 379, 500);
});ছবিটি ফটোশপের সাথে পুনরায় আকার দিয়েছে:
চিত্রটি ক্যানভাসে পুনরায় আকার দিয়েছে:
সম্পাদনা:
প্রস্তাবিত হিসাবে আমি একাধিক পদক্ষেপে ডাউনস্কলিং করার চেষ্টা করেছি:
এইচটিএমএল 5 ক্যানভাস এবং এইচটিএমএল 5 ক্যানভাসের ছবিতে একটি চিত্র পুনরায় আকার দেওয়া হচ্ছে: কীভাবে অ্যান্টিয়ালাইজিং প্রয়োগ করা যায়
এটি আমি ব্যবহৃত ফাংশন:
function resizeCanvasImage(img, canvas, maxWidth, maxHeight) {
var imgWidth = img.width,
imgHeight = img.height;
var ratio = 1, ratio1 = 1, ratio2 = 1;
ratio1 = maxWidth / imgWidth;
ratio2 = maxHeight / imgHeight;
// Use the smallest ratio that the image best fit into the maxWidth x maxHeight box.
if (ratio1 < ratio2) {
ratio = ratio1;
}
else {
ratio = ratio2;
}
var canvasContext = canvas.getContext("2d");
var canvasCopy = document.createElement("canvas");
var copyContext = canvasCopy.getContext("2d");
var canvasCopy2 = document.createElement("canvas");
var copyContext2 = canvasCopy2.getContext("2d");
canvasCopy.width = imgWidth;
canvasCopy.height = imgHeight;
copyContext.drawImage(img, 0, 0);
// init
canvasCopy2.width = imgWidth;
canvasCopy2.height = imgHeight;
copyContext2.drawImage(canvasCopy, 0, 0, canvasCopy.width, canvasCopy.height, 0, 0, canvasCopy2.width, canvasCopy2.height);
var rounds = 2;
var roundRatio = ratio * rounds;
for (var i = 1; i <= rounds; i++) {
console.log("Step: "+i);
// tmp
canvasCopy.width = imgWidth * roundRatio / i;
canvasCopy.height = imgHeight * roundRatio / i;
copyContext.drawImage(canvasCopy2, 0, 0, canvasCopy2.width, canvasCopy2.height, 0, 0, canvasCopy.width, canvasCopy.height);
// copy back
canvasCopy2.width = imgWidth * roundRatio / i;
canvasCopy2.height = imgHeight * roundRatio / i;
copyContext2.drawImage(canvasCopy, 0, 0, canvasCopy.width, canvasCopy.height, 0, 0, canvasCopy2.width, canvasCopy2.height);
} // end for
// copy back to canvas
canvas.width = imgWidth * roundRatio / rounds;
canvas.height = imgHeight * roundRatio / rounds;
canvasContext.drawImage(canvasCopy2, 0, 0, canvasCopy2.width, canvasCopy2.height, 0, 0, canvas.width, canvas.height);
}যদি আমি 2 ধাপ নীচে সাইজিং ব্যবহার করি তবে ফলাফলটি এখানে:
আমি যদি 3 ধাপ নীচে সাইজিং ব্যবহার করি তবে ফলাফলটি এখানে:
আমি যদি 4 টি ধাপ নীচে সাইজিং ব্যবহার করি তবে ফলাফল এখানে:
যদি আমি 20 ধাপ নীচে সাইজিং ব্যবহার করি তবে ফলাফলটি এখানে:
দ্রষ্টব্য: এটি প্রমাণিত হয়েছে যে 1 ধাপ থেকে 2 ধাপে চিত্রের গুণমানের একটি বৃহত্তর উন্নতি হয়েছে তবে আপনি প্রক্রিয়াটিতে আরও পদক্ষেপ যুক্ত করলে চিত্রটি ততই অস্পষ্ট হয়ে যায়।
সমস্যাটি সমাধানের জন্য কি এমন কোনও উপায় আছে যা আপনি আরও বেশি পদক্ষেপ যুক্ত করবেন তা চিত্র আরও अस्पष्ट হয়ে যায়?
2013-10-04 সম্পাদনা করুন: আমি গেমএলকেমিস্টের অ্যালগরিদম চেষ্টা করেছি। এখানে ফটোশপের তুলনায় ফলাফল।
ফটোশপের চিত্র:
গেমএলকেমিস্টের অ্যালগোরিদম:
