सभी को शुभकामनाएँ!

आज मैं नेटवर्क से डाउनलोड होने वाली सिंक्रोनस और अतुल्यकालिक छवि के तरीकों में से एक के बारे में बात करना चाहता हूं। ताकि लेख उबाऊ न हो, हम क्यूटी का उपयोग करके अपलोड की गई छवियों को किसी तरह से संसाधित करने का प्रयास करेंगे।

हम कैसे अपलोड करेंगे?

छवियों को डाउनलोड करने के लिए, हम QNetworkAccessManager और QEventLoop , साथ ही कुछ मेटा ऑब्जेक्ट्स का उपयोग करेंगे। हम समर्थित Qt से किसी भी प्रारूप में HTTP के माध्यम से छवि अपलोड करेंगे। खैर, हम अभी भी पुनर्निर्देशन की प्रक्रिया कर रहे हैं।

हम इसे कैसे प्रोसेस करेंगे?

उपवर्गों के साथ एक महान QGraphicsEffect वर्ग है। लेकिन हम इस लेख के ढांचे में उनके साथ काम नहीं करेंगे, सामंजस्य! और मैं यह भी बताऊंगा कि क्यों। उदाहरण के लिए, Qt 4.8.0 में, ये प्रभाव Mac OS X 10.7। + में एक अनुप्रयोग क्रैश का कारण बनते हैं, और Qt 4.7.4 में उसी प्रणाली पर जो वे बिल्कुल भी काम नहीं करते हैं। मुझे नहीं पता कि यह कैसे हुआ, लेकिन मैंने क्यूटी बग ट्रैकर में एक बग सेट किया ।

इसलिए, हम इमेज प्रोसेसिंग के लिए अपना वर्ग बनाएंगे। वह निम्नलिखित कार्य कर सकेगा:

• ग्रेस्केल छवि बदलें
• Colorize (मैं रूसी में यह कैसे कह सकता हूं?)
• छाया जोड़ें
• पारदर्शिता बदलें
• केंद्र के चारों ओर घुमाएँ
• Kvadratizirovat
• कोने की गोलाई से चौकोर
• एक बोनस के रूप में, #RRGGBBAA प्रारूप में कस्टम रंग पढ़ना सीखें

मैं तुरंत ध्यान देता हूं कि परीक्षण परियोजना का पूरा कोड जीथब पर डाउनलोड किया जा सकता है, लेख के अंत में लिंक।

तो छवि लोड कर रहा है

शुरू करने के लिए, हम तय करते हैं कि हम क्या चाहते हैं। लेकिन हम यह चाहते हैं: हम एक निश्चित वर्ग के एक निश्चित तरीके को कहते हैं, चित्र का URL इसमें पास करें, साथ ही साथ परिणामी छवि को किस विधि से और किस पद्धति से पारित करें। और जब छवि लोड हो जाती है, तो हमारी कक्षा को वांछित वस्तु का वांछित तरीका कॉल करना चाहिए और उसमें डाउनलोड की गई छवि को पास करना चाहिए। और यह सब अतुल्यकालिक है। अच्छा लगता है?

कारण के लिए! हम Networking क्लास बनाते हैं (मैंने इसे स्थिर बना दिया है, लेकिन यह एक बड़ी भूमिका नहीं निभाता है), और वास्तविक काम के लिए NetworkingPrivate क्लास बनाएं -।

 // networking.h class Networking { public: static QImage httpGetImage(const QUrl& src); static void httpGetImageAsync(const QUrl& src, QObject * receiver, const char * slot); private: static NetworkingPrivate * networkingPrivate; static void init(); } // networking_p.h class NetworkingPrivate : public QObject { Q_OBJECT public: NetworkingPrivate(); ~NetworkingPrivate(); QImage httpGetImage(const QUrl& src) const; void httpGetImageAsync(const QUrl& src, QObject * receiver, const char * slot); public slots: void onFinished(QNetworkReply* reply); private: QNetworkAccessManager * nam; QEventLoop * loop; QMap<QNetworkReply*, QPair<QObject*, QPair<QUrl, const char *> > > requests; }; 

दरअसल, हमारी कक्षा समकालिक और अतुल्यकालिक रूप से चित्रों को लोड करने में सक्षम होगी। तो एक विकल्प है।

उपयोग उदाहरण:

 // myclass.h class MyClass: public QObject { // ... public slots: void loadImage(const QString & urlString); void onImageReady(const QUrl& url, const QImage & image); } // myclass.cpp void MyClass::loadImage(const QString & urlString) { Networking::httpGetImageAsync(QUrl(urlString), this, "onImageRead"); } 

बीमा योग्य निजी वर्ग के बारे में थोड़ा स्पष्टीकरण। हमें तुल्यकालिक अनुरोधों के मामले में प्रतिक्रिया के लिए प्रतीक्षा करने के लिए QNetworkAccessManager की आवश्यकता है, QEventLoop , सिंक्रोनस अनुरोधों के मामले में प्रतिक्रिया की प्रतीक्षा करने के लिए, और यह डरावना QMap<QNetworkReply*, QPair<QObject*, QPair<QUrl, const char *> > > requests - सभी अनुरोधों को संग्रहीत करने के लिए, जानिए किस चित्र को किस वस्तु को लोड करने के बाद डिलीवर करना चाहिए

अब सबसे दिलचस्प हिस्सा निजी वर्ग ( Networking वर्ग के कार्यों का कार्यान्वयन है, जैसा कि आपने अनुमान लगाया होगा, केवल अपने निजी वर्ग को कॉल पुनर्निर्देशित करता है)।

 NetworkingPrivate::NetworkingPrivate() { nam = new QNetworkAccessManager(); loop = new QEventLoop(); connect(nam, SIGNAL(finished(QNetworkReply*)), loop, SLOT(quit())); connect(nam, SIGNAL(finished(QNetworkReply*)), SLOT(onFinished(QNetworkReply*))); } NetworkingPrivate::~NetworkingPrivate() { nam->deleteLater(); loop->deleteLater(); } QImage NetworkingPrivate::httpGetImage(const QUrl& src) const { QNetworkRequest request; request.setUrl(src); QNetworkReply * reply = nam->get(request); loop->exec(); QVariant redirectedUrl = reply->attribute(QNetworkRequest::RedirectionTargetAttribute); QUrl redirectedTo = redirectedUrl.toUrl(); if (redirectedTo.isValid()) { // guard from infinite redirect loop if (redirectedTo != reply->request().url()) { return httpGetImage(redirectedTo); } else { qWarning() << "[NetworkingPrivate] Infinite redirect loop at " + redirectedTo.toString(); return QImage(); } } else { QImage img; QImageReader reader(reply); if (reply->error() == QNetworkReply::NoError) reader.read(&img); else qWarning() << QString("[NetworkingPrivate] Reply error: %1").arg(reply->error()); reply->deleteLater(); return img; } } void NetworkingPrivate::httpGetImageAsync(const QUrl& src, QObject * receiver, const char * slot) { QNetworkRequest request; request.setUrl(src); QPair<QObject*, QPair<QUrl, const char *> > obj; obj.first = receiver; obj.second.first = src; obj.second.second = slot; QNetworkReply * reply = nam->get(request); requests.insert(reply, obj); } void NetworkingPrivate::onFinished(QNetworkReply* reply) { if (requests.contains(reply)) { QPair<QObject*, QPair<QUrl, const char *> > obj = requests.value(reply); QVariant redirectedUrl = reply->attribute(QNetworkRequest::RedirectionTargetAttribute); QUrl redirectedTo = redirectedUrl.toUrl(); if (redirectedTo.isValid()) { // guard from infinite redirect loop if (redirectedTo != reply->request().url()) { httpGetImageAsync(redirectedTo, obj.first, obj.second.second); } else { qWarning() << "[NetworkingPrivate] Infinite redirect loop at " + redirectedTo.toString(); } } else { QImage img; QImageReader reader(reply); if (reply->error() == QNetworkReply::NoError) reader.read(&img); else qWarning() << QString("[NetworkingPrivate] Reply error: %1").arg(reply->error()); if (obj.first && obj.second.second) QMetaObject::invokeMethod(obj.first, obj.second.second, Qt::DirectConnection, Q_ARG(QUrl, obj.second.first), Q_ARG(QImage, img)); } requests.remove(reply); reply->deleteLater(); } } 

अब हम इन कार्यों का विश्लेषण करेंगे। कंस्ट्रक्टर में, हम एक QEventLoop , QNetworkAccessManager और QEventLoop::quit() साथ अनुरोध को पूरा करने के लिए सिग्नल को कनेक्ट करते हैं QEventLoop::quit() और हमारी onFinished विधि।

एक तुल्यकालिक डाउनलोड के लिए, हम अनुरोध को निष्पादित करते हैं और ईवेंट लूप चलाते हैं, जो डाउनलोड के अंत में पूरा हो जाएगा। उसी समय, हम अभी भी रीडायरेक्ट और इसकी फिक्सेशन की जांच कर रहे हैं ताकि उपयोगकर्ता तस्वीरों के किसी भी लिंक को दर्ज कर सके, जिसमें लिंक शॉर्टर्स के माध्यम से पारित हो गए।

खैर, जब हमें अपनी तस्वीर मिली, तो QImageReader और डेटा को अंतिम QImage में पढ़ें, जिसे हम वापस करते हैं।

अतुल्यकालिक लोडिंग के साथ, सब कुछ पेचीदा है। हम अपने डरावने QMap में अनुरोध (अधिक सटीक, प्रतिक्रिया लिंक), लक्ष्य ऑब्जेक्ट और इसकी विधि को QMap और फिर अनुरोध चलाते हैं। और अनुरोध के अंत में, हम समकालिक अनुरोध (रीडायरेक्ट, इसकी चक्रीयता और चित्र को पढ़ने के लिए जाँच) के साथ सब कुछ वैसा ही करते हैं, लेकिन हम प्राप्त QImage को QMetaObject::invokeMethod का उपयोग करके लक्ष्य ऑब्जेक्ट को पास करते हैं। पैरामीटर के रूप में - URL और चित्र का अनुरोध करें।

ठीक है, आप एक सरल रूप बना सकते हैं जिसमें आप URL चला सकते हैं, बटन पर क्लिक कर सकते हैं और नेटवर्क से छवि प्राप्त कर सकते हैं। तुल्यकालिक या अतुल्यकालिक रूप से। और आनन्द मनाओ।

लेकिन हम आगे बढ़ेंगे, और परिणामस्वरूप छवि बदल जाएगी।

छवि प्रसंस्करण के लिए कक्षा

हम एक और वर्ग बनाते हैं (मेरे पास फिर से स्थिर है, हालांकि बिना किसी कारण के), चलो इसे ImageManager कहते हैं। और हमारे पास निम्नलिखित तरीके होंगे:

 class ImageManager { public: static QImage normallyResized(const QImage & image, int maximumSideSize); static QImage grayscaled(const QImage & image); static QImage squared(const QImage & image, int size); static QImage roundSquared(const QImage & image, int size, int radius); static QImage addShadow(const QImage & image, QColor color, QPoint offset, bool canResize = false); static QImage colorized(const QImage & image, QColor color); static QImage opacitized(const QImage & image, double opacity = 0.5); static QImage addSpace(const QImage & image, int left, int top, int right, int bottom); static QImage rotatedImage(const QImage & image, qreal angle); static QColor resolveColor(const QString & name); }; 

यह हमें ऐसा कुछ प्राप्त करने की अनुमति देगा (लेख के अंत में परीक्षण परियोजना देखें):



क्रम में चलते हैं। पहली विधि कम से कम दिलचस्प है, यह अधिकतम करने के लिए छवि का आकार सामान्य करता है। तीसरा तरीका भी बहुत दिलचस्प नहीं है - यह छवि को चौकोर बनाता है (आकार को समायोजित करना और अतिरिक्त फसल करना)। मैं लेख में उनके स्रोत कोड को भी शामिल नहीं करूंगा।

आगे और भी काफी दिलचस्प होगा।

भूरे रंग।

मुझे ऐसा करने के दो तरीके भी मिले, लेकिन मैंने गति के लिए दोनों का परीक्षण करने की जहमत नहीं उठाई। इसलिए मैं दो को चुनकर लाता हूं।

पहला तरीका छवि को QImage :: Format_Indexed8 में रूपांतरित करना है, जिसका अर्थ है कि छवि को अनुक्रमित 8-बिट रंग में बदलना। ऐसा करने के लिए, सफेद से काले तक - 256 तत्वों का एक "रंग मानचित्र" बनाएं।

 QImage gray(image.size(), QImage::Format_ARGB32); gray.fill(Qt::transparent); static QVector<QRgb> monoTable; if (monoTable.isEmpty()) { for (int i = 0; i <= 255; i++) monoTable.append(qRgb(i, i, i)); } QPainter p(&gray); p.drawImage(0, 0, image.convertToFormat(QImage::Format_Indexed8, monoTable)); p.end(); return gray; 

दूसरी विधि छवि बिट्स के साथ सीधे काम पर आधारित है। हम सभी पिक्सेल के माध्यम से जाते हैं और उन्हें ग्रे में सेट करते हैं।

 QImage img = image; if (!image.isNull()) { int pixels = img.width() * img.height(); if (pixels*(int)sizeof(QRgb) <= img.byteCount()) { QRgb *data = (QRgb *)img.bits(); for (int i = 0; i < pixels; i++) { int val = qGray(data[i]); data[i] = qRgba(val, val, val, qAlpha(data[i])); } } } return img; 

दूसरी विधि, मेरी राय में, तेजी से काम करना चाहिए, क्योंकि कोई अतिरिक्त छवि नहीं बनाई गई है। इसके अलावा, यह पारदर्शिता के साथ छवियों के लिए भी उपयुक्त है, जो बहुत अच्छा है। इसलिए यह वह है जिसे फिनाले में इस्तेमाल किया जाता है।

गोल कोनों

यहां एल्गोरिथ्म काफी दिलचस्प है। मेरा पहला विचार एक मुखौटा बनाना और उस पर छवि बनाना था। लेकिन QPainter का उपयोग करके इस मास्क को सही ढंग से खींचने के लंबे समय के असफल प्रयासों के बाद: [Ellipse | Arc |ededRect | Path], मैंने इस विचार को छोड़ दिया। किसी कारण के लिए, यह दृष्टिकोण केवल कुछ पट्टिका रेडी के लिए एक अच्छा परिणाम देता है। इसके अलावा, परिणाम विभिन्न ऑपरेटिंग सिस्टम में भिन्न हो सकते हैं, जो इस पद्धति का सम्मान नहीं करता है। यह, जाहिरा तौर पर, बिटमस्क के लिए एंटीएलियासिंग करने में असमर्थता के कारण है - इसमें केवल दो रंग होने चाहिए, काले और सफेद। नई विधि इन समस्याओं पर हंसती है, और एंटी-अलियासिंग के साथ एक चिकनी पट्टिका के रूप में एक अतिरिक्त रोटी देती है।

 QImage shapeImg(QSize(size, size), QImage::Format_ARGB32_Premultiplied); shapeImg.fill(Qt::transparent); QPainter sp(&shapeImg); sp.setRenderHint(QPainter::Antialiasing); sp.setPen(QPen(Qt::color1)); sp.setBrush(QBrush(Qt::color1)); sp.drawRoundedRect(QRect(0, 0, size, size), radius + 1, radius + 1); sp.end(); QImage roundSquaredImage(size, size, QImage::Format_ARGB32_Premultiplied); roundSquaredImage.fill(Qt::transparent); QPainter p(&roundSquaredImage); p.drawImage(0, 0, shapeImg); p.setCompositionMode(QPainter::CompositionMode_SourceIn); p.drawImage(0, 0, squared(image, size)); p.end(); return roundSquaredImage; 

सार लगभग तस्वीर को मास्किंग के समान है। एक गोल काला वर्ग (एंटीएलियासिंग के साथ) बनाएं, और फिर इसके शीर्ष पर QPainter::CompositionMode_SourceIn मोड QPainter::CompositionMode_SourceIn साथ मूल छवि बनाएं। जैसा कि वे कहते हैं, सरल और स्वादिष्ट।

छाया जोड़ें

अब छवि पर एक छाया जोड़ने का प्रयास करें। इसके अलावा, पारदर्शिता को ध्यान में रखते हुए। परिणामस्वरूप चित्र, निश्चित रूप से, मूल से भिन्न आयाम हो सकते हैं।

 QSize shadowedSize = image.size(); if (canResize) { shadowedSize += QSize(qAbs(offset.x()), qAbs(offset.y())); } QImage shadowed(shadowedSize, QImage::Format_ARGB32_Premultiplied); shadowed.fill(Qt::transparent); QPainter p(&shadowed); QImage shadowImage(image.size(), QImage::Format_ARGB32_Premultiplied); shadowImage.fill(Qt::transparent); QPainter tmpPainter(&shadowImage); tmpPainter.setCompositionMode(QPainter::CompositionMode_Source); tmpPainter.drawPixmap(QPoint(0, 0), QPixmap::fromImage(image)); tmpPainter.setCompositionMode(QPainter::CompositionMode_SourceIn); tmpPainter.fillRect(shadowImage.rect(), color); tmpPainter.end(); QPoint shadowOffset = offset; if (canResize) { if (offset.x() < 0) shadowOffset.setX(0); if (offset.y() < 0) shadowOffset.setY(0); } p.drawImage(shadowOffset, shadowImage); QPoint originalOffset(0, 0); if (canResize) { if (offset.x() < 0) originalOffset.setX(qAbs(offset.x())); if (offset.y() < 0) originalOffset.setY(qAbs(offset.y())); } p.drawPixmap(originalOffset, QPixmap::fromImage(image)); p.end(); return shadowed; 

यहां हम पहले अलग-अलग कंपोज़िशन मोड्स के साथ आर्टिफ़िश ड्राइंग का उपयोग करके एक शैडो इमेज बनाते हैं, और फिर इसे और ऊपर की ओरिजिनल इमेज को ड्रा करते हैं। आवश्यक बदलाव के साथ, बिल्कुल।

colorization

रंगीकरण प्रभाव को प्राप्त करने के लिए कई अलग-अलग तरीके हैं। मैंने एक को चुना, मेरी राय में, सबसे सफल।

 QImage resultImage(image.size(), QImage::Format_ARGB32_Premultiplied); resultImage.fill(Qt::transparent); QPainter painter(&resultImage); painter.drawImage(0, 0, grayscaled(image)); painter.setCompositionMode(QPainter::CompositionMode_Screen); painter.fillRect(resultImage.rect(), color); painter.end(); resultImage.setAlphaChannel(image.alphaChannel()); return resultImage; 

यहां, हम मूल छवि को ग्रे के रंगों में खींचते हैं (हम पहले से ही जानते हैं कि कैसे), और फिर स्क्रीन रचना मोड में वांछित रंग की आयत को ओवरले करें। और अल्फा चैनल के बारे में मत भूलना।

पारदर्शिता में बदलाव

अब हम अपनी तस्वीर को पारदर्शी बनाते हैं। यह बहुत सरल है - QPainter::setOpacity का उपयोग करके किया जाता है।

 QImage resultImage(image.size(), QImage::Format_ARGB32); resultImage.fill(Qt::transparent); QPainter painter(&resultImage); painter.setOpacity(opacity); painter.drawImage(0, 0, image); painter.end(); resultImage.setAlphaChannel(image.alphaChannel()); return resultImage; 

चित्र को घुमाएं

हम केंद्र के चारों ओर घूमेंगे। मैं होमवर्क के रूप में पाठकों को एक मनमाना बिंदु के आसपास रोटेशन के कार्यान्वयन को छोड़ दूंगा। यहां सब कुछ भी बेहद सरल है - मुख्य बात यह है कि चिकनी परिवर्तनों के बारे में भूलना नहीं है।

 QImage rotated(image.size(), QImage::Format_ARGB32_Premultiplied); rotated.fill(Qt::transparent); QPainter p(&rotated); p.setRenderHint(QPainter::Antialiasing); p.setRenderHint(QPainter::SmoothPixmapTransform); qreal dx = image.size().width() / 2.0, dy = image.size().height() / 2.0; p.translate(dx, dy); p.rotate(angle); p.translate(-dx, -dy); p.drawImage(0, 0, image); p.end(); return rotated; 

ग्रैंड फाइनल

यही है, अब आप एक परीक्षण कार्यक्रम लिख सकते हैं (या GitHub 'से मेरा डाउनलोड करें) और परिणामों का आनंद लें!

एक बोनस के रूप में, मैं एक स्ट्रिंग मान से रंग के अधिक सुविधाजनक पढ़ने के लिए एक छोटा सा कार्य करूँगा। किसी कारण से, Qt को #RRGGBBAA प्रारूप में रंग समझ में नहीं आता है, जिसे मैंने अपने फ़ंक्शन के लिए बनाया था:

 QColor ImageManager::resolveColor(const QString & name) { QColor color; if (QColor::isValidColor(name)) color.setNamedColor(name); else { // trying to parse "#RRGGBBAA" color if (name.length() == 9) { QString solidColor = name.left(7); if (QColor::isValidColor(solidColor)) { color.setNamedColor(solidColor); int alpha = name.right(2).toInt(0, 16); color.setAlpha(alpha); } } } if (!color.isValid()) qWarning() << QString("[ImageManager::resolveColor] Can\'t parse color: %1").arg(name); return color; } 

इसी समय, सभी मानक रंग (जैसे white , transparent , #ffa0ee ) भी पूरी तरह से समझ में आते हैं।

पुनश्च: उन लोगों के लिए जो संदेह करते हैं कि क्या यह जीथब पर उदाहरण कोड की खोज करने लायक है, मैं यहां कुछ पंक्तियां छोड़ दूंगा। सबसे पहले, लेख में कोड थोड़ा सरलीकृत किया गया है - कुछ उपयोगी चेक और सामान हटा दिए गए हैं। दूसरे, जब अनुरोध किया जाता है, तो पूर्ण उदाहरण कुकीज़ की प्राप्ति और भंडारण / उपयोग का उपयोग करता है। तीसरा, नौ भागों (नौ-भाग वाली छवि) से युक्त एक चित्र बनाने के लिए अतिरिक्त कार्य हैं, जो बटन, इनपुट फ़ील्ड और अन्य समान चीजों के मैनुअल रेंडरिंग को सरल बना सकते हैं। तो बन्स प्रदान की जाती हैं!

PPS: यदि कोई माना गया सभी कार्यों को करने के लिए अधिक सफल एल्गोरिदम जानता है, तो टिप्पणियों में व्यक्त करने के लिए आपका स्वागत है! छवि प्रसंस्करण के अन्य तरीकों पर भी यही बात लागू होती है - मैं उनके बारे में आनंद से पढ़ता हूं।