डेल्टा PNG आउटपुट फॉर्मेट

API कुंजी प्राप्त करें

किसी अन्य प्रदाता से माइग्रेट कर रहे हैं? Check out our migration guide

डेल्टा PNG आउटपुट फॉर्मेट बहुत सारी विलंबता और बैंडविड्थ को सेव कर सकता है, और मोबाइल ऐप्स जैसे विलंबता और बैंडविड्थ-महत्वपूर्ण परिदृश्यों में विशेष रूप से उपयोगी होता है।

इसके लिए आवश्यक है कि मूल तस्वीर में पिक्सेल क्लाइंट पर लोड किए जाएँ, और फिर परिणामी तस्वीर बनाने के लिए डेल्टा PNG को मूल तस्वीर पर एप्लाई किया जाए।

एक उदाहरण:

ओरिजनल

778 × 639 px

सामान्य PNG

4,09,048 बाइट्स

डेल्टा PNG

1,10,904 बाइट्स
73% सेव कर रहा है।

यहाँ तक ​​कि इस बालों पर केंद्रित उदाहरण में भी (जो डेल्टा PNG फॉर्मेट के लिए सबसे खराब स्थिति है), की गई सेविंग्स महत्वपूर्ण है: 73%

डेल्टा PNG को डिकोड करना

डेल्टा PNG केवल एक नियमित PNG फ़ाइल है और इसे PNG पढ़ने में योग्य किसी भी सॉफ़्टवेयर लाइब्रेरी द्वारा पढ़ा जा सकता है। नियमित PNG परिणाम की तुलना में एकमात्र अंतर स्वयं पिक्सेल वैल्यूज़ में है। बैकग्राउंड को पारदर्शी काले 0x00000000 और फोरग्राउंड को पारदर्शी सफेद के रूप में एन्कोड किया जाता है 0x00FFFFFF। अपूर्ण रूप से पारदर्शी पिक्सेल के अपने वास्तविक कलर वैल्यूज़ होते हैं।

पिक्सेल की किस्म ओरिजनल सामान्य PNG डेल्टा PNG आउटपुट स्रोत
फोरग्राउंड 0xFFrrggbb 0xFFrrggbb 0x00FFFFFF ओरिजनल
बैकग्राउंड 0xFFrrggbb 0x00000000 0x00000000 डेल्टा PNG
किनारा 0xFFrrggbb 0x80rrggbb 0x80rrggbb डेल्टा PNG

इसका मतलब यह है कि जब आप डेल्टा PNG पिक्सेल वैल्यूज़ को डिकोड कर रहे हैं, तो आपको पारदर्शी सफेद रंग 0x00FFFFFF मिलने पर मूल से वास्तविक पिक्सेल वैल्यू निकालने की आवश्यकता होती है। अन्य पिक्सेल की वैल्यूज़ नियमित PNG फॉर्मेट के समान होती हैं।

डेल्टा PNG फॉर्मेट को डिकोड करने के लिए यहाँ एक टाइपस्क्रिप्ट कोड उदाहरण दिया गया है:

export function decodeDeltaPngInPlace(originalPixels: Uint8Array, deltaPngPixels: Uint8Array): Uint8Array {
    const N = originalPixels.length / 4; // Array of RGBA values, div 4 to get number of pixels
    for (let i = 0; i < N; i++) {
        const i4 = i * 4;
        const alpha = deltaPngPixels[i4 + 3]; // JavaScript is RGBA, +3 to get alpha
        if (alpha == 0) {
            const r = deltaPngPixels[i4]; // JavaScript is RGBA, +0 to get red
            if (r == 0xFF) {
                // Transparent white => foreground => take values from original
                deltaPngPixels[i4] = originalPixels[i4];
                deltaPngPixels[i4 + 1] = originalPixels[i4 + 1];
                deltaPngPixels[i4 + 2] = originalPixels[i4 + 2];
                deltaPngPixels[i4 + 3] = originalPixels[i4 + 3];
            } // else transparent black => background => keep values
        } // else partially transparent => keep values
    }
    return deltaPngPixels;
}

जावास्क्रिप्ट में तस्वीर और पिक्सेल डेटा पर संचालन के बारे में अधिक जानने के लिए, मोज़िला डेवलपर नेटवर्क पर कैनवस ट्यूटोरियल के साथ बेहतरीन पिक्सेल का हेरफेर देखें।

चेतावनियाँ

आपकी तस्वीर लोडिंग लाइब्रेरी पारदर्शी पिक्सेल के लिए पूरी तरह से पिक्सेल वैल्यूज़ को संरक्षित करने में सफल होनी चाहिए, जो कि सामान्य रूप से इसी तरह काम करती है।

हालाँकि, उदाहरण के लिए यदि आप पायथन और प्रसिद्ध ओपनसीवी लाइब्रेरी का इस्तेमाल कर रहे हैं, तो आपको cv2.IMREAD_UNCHANGEDतस्वीर को इस प्रकार फ्लैग और लोड करने की आवश्यकता होती है: cv2.imread(path, cv2.IMREAD_UNCHANGED)। अन्यथा ओपनसीवी पूरी तरह से पारदर्शी पिक्सेल के वास्तविक पिक्सेल वैल्यूज़ को रोक लेता है।

दुर्भाग्य से जब आप उस फ्लैग का इस्तेमाल करते हैं तो ओपनसीवी तस्वीर में संग्रहीत किसी भी रोटेशन जानकारी को एप्लाई नहीं करता है। यही कारण है कि हम X-Input-Orientationहेडर वापस भेजते हैं ताकि आप इस परिस्थिति में तस्वीर पर सही ओरिएंटेशन एप्लाई कर सकें।

ओरिएंटेशन एप्लाई करने के लिए यहाँ Python+OpenCV कोड का उदाहरण दिया गया है:

def apply_exif_rotation(im: np.ndarray, orientation: int) -> np.ndarray:
    # https://note.nkmk.me/en/python-opencv-numpy-rotate-flip/
    if 1 < orientation <= 8:
        if 2 == orientation:  # TOP-RIGHT, flip left-right, [1, 1] -> [-1, 1]
            im = cv2.flip(im, 1)
        elif 3 == orientation:  # BOTTOM-RIGHT, rotate 180
            im = cv2.rotate(im, cv2.ROTATE_180)
        elif 4 == orientation:  # BOTTOM-LEFT, flip up-down, [1, 1] -> [1, -1]
            im = cv2.flip(im, 0)
        elif 5 == orientation:  # LEFT-TOP, Rotate 90 and flip left-right
            im = cv2.rotate(im, cv2.ROTATE_90_CLOCKWISE)
            im = cv2.flip(im, 1)
        elif 6 == orientation:  # RIGHT-TOP, Rotate 90
            im = cv2.rotate(im, cv2.ROTATE_90_CLOCKWISE)
        elif 7 == orientation:  # RIGHT-BOTTOM,
            im = cv2.rotate(im, cv2.ROTATE_90_CLOCKWISE)
            im = cv2.flip(im, 0)
        else:  # 8 == orientation:  # LEFT-BOTTOM, Rotate 270
            im = cv2.rotate(im, cv2.ROTATE_90_COUNTERCLOCKWISE)
    return im
API कुंजी प्राप्त करें