जावास्क्रिप्ट में कैनवास का उपयोग करके छवियों का आकार बदलने के दौरान समस्याओं को हल करना

जावास्क्रिप्ट में कैनवास का उपयोग करके छवियों का आकार बदलने से कभी-कभी ध्यान देने योग्य टेढ़े-मेढ़े किनारे या धुंधलापन आ सकता है। सुचारू आकार बदलने के लिए, डाउन-स्टेपिंग नामक तकनीक को नियोजित किया जा सकता है।

अधिकांश ब्राउज़रों में, डिफ़ॉल्ट रूप से आकार बदलने के लिए रैखिक इंटरपोलेशन का उपयोग किया जाता है। द्वि-घन प्रक्षेप, जो सहज परिणाम उत्पन्न करता है, में पिक्सेल के एक बड़े पड़ोस का उपयोग शामिल है। हालाँकि, ब्राउज़र आमतौर पर बाई-क्यूबिक इंटरपोलेशन को सीधे लागू नहीं करते हैं।

डाउन-स्टेपिंग दृष्टिकोण में छोटे पैमाने के कारक का उपयोग करके हर बार छवि का बार-बार आकार बदलना शामिल होता है। यह अंतर्निहित ब्राउज़र में रैखिक इंटरपोलेशन का उपयोग करते हुए द्वि-घन इंटरपोलेशन के व्यवहार की नकल करता है। "कैनवास"); var ctx = कैनवास.getContext('2d'); var img = नई छवि(); img.onload = फ़ंक्शन () { // छवि के अनुपात में आकार सेट करें कैनवास.ऊंचाई = कैनवास.चौड़ाई * (img.height / img.width); // चरण 1 - 50% तक आकार बदलें var oc = document.createElement('कैनवास'), Octx = oc.getContext('2d'); oc.width = img.width * 0.5; oc.ऊंचाई = img.ऊंचाई * 0.5; Octx.drawImage(img, 0, 0, oc.width, oc.height); // चरण दो Octx.drawImage(oc, 0, 0, oc.width * 0.5, oc.height * 0.5); // चरण 3, अंतिम आकार में आकार बदलें ctx.drawImage(oc, 0, 0, oc.width * 0.5, oc.height * 0.5, 0, 0, कैनवास.चौड़ाई, कैनवास.ऊंचाई); } img.src = "//i.imgur.com/SHo6Fub.jpg";

यह कोड एक अस्थायी कैनवास, ओसी बनाता है, और पुनरावृत्त रूप से छवि का आकार बदलता है, अंततः इसे अंतिम कैनवास पर खींचता है। प्रत्येक आकार बदलने वाला चरण रैखिक इंटरपोलेशन का उपयोग करता है, लेकिन उन्हें संयोजित करने से, समग्र प्रभाव द्वि-घन इंटरपोलेशन का अनुमान लगाता है।

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var img = new Image();

img.onload = function () {

    // set size proportional to image
    canvas.height = canvas.width * (img.height / img.width);

    // step 1 - resize to 50%
    var oc = document.createElement('canvas'),
        octx = oc.getContext('2d');

    oc.width = img.width * 0.5;
    oc.height = img.height * 0.5;
    octx.drawImage(img, 0, 0, oc.width, oc.height);

    // step 2
    octx.drawImage(oc, 0, 0, oc.width * 0.5, oc.height * 0.5);

    // step 3, resize to final size
    ctx.drawImage(oc, 0, 0, oc.width * 0.5, oc.height * 0.5,
    0, 0, canvas.width, canvas.height);
}
img.src = "//i.imgur.com/SHo6Fub.jpg";