छवि डाउनलोडर विषय को बंद करना

प्रस्तावना

सभी को नमस्कार। मैंने पहले ही एक छवि डाउनलोडर बनाने के बारे में लिखा था। सबसे पहले, बूटलोडर फ्लैश पर , फिर एचटीएमएल 5 पर । बाई एंड लार्ज, ये दो विकल्प पर्याप्त हैं। और यदि आप तर्कसंगतता के प्रशंसक हैं, और विषय स्वयं विशेष रुचि का नहीं है, तो आप अब पढ़ नहीं सकते हैं।
मैं सिल्वरलाइट 4 पर बूटलोडर का काम करने का उदाहरण यहां देता हूं: हां, यह यहां है ।

मैं आपको कार्य याद दिलाता हूं। छवियों के बैच अपलोड को लागू करना, क्लाइंट पर आकार देना, साथ ही सर्वर पर फ़ाइलों की सुविधाजनक रसीद (उदाहरण के लिए, php में $ _FILES सरणी में) आवश्यक है। खैर, एक सुविधाजनक इंटरफ़ेस, निश्चित रूप से।
अब टूलकिट पर चलते हैं। इस स्थिति में, हम Silverlight 4 का उपयोग करते हैं, जिसका अर्थ है कि हमारे पास .Net, स्थिर टाइपिंग (हाँ, मुझे पता है, डायनेमिक टैक्सी) और एक शांत मुक्त संपादक (Microsoft विज़ुअल वेब डेवलपर 2010 एक्सप्रेस) की शक्ति है।

छवियों के साथ काम करें

तो सी #। मुझे भाषा पसंद है (मैंने इस पर एक डिप्लोमा भी लिखा है), लेकिन जावास्क्रिप्ट, एक्शनस्क्रिप्ट और php के बाद यह बहुत परिचित नहीं है। हालांकि, यह जल्दी से गुजर रहा है।
फ़ाइलों की सूची प्राप्त करने के लिए, हमें OpenFileDialog की आवश्यकता है। फ़ाइलें अपलोड करना कोई समस्या नहीं है: FileStream का उपयोग करना आसान है। हमारे पास सिल्वरलाइट में डेटा है, अब हमें इसे छवियों के रूप में प्रस्तुत करने और फिर आकार बदलने की आवश्यकता है।
हैरानी की बात है कि हम बिटमैप (रिटिटेबल बिटमैप) में डेटा पेश कर सकते हैं, लेकिन आकार बदलने के लिए कोई अंतर्निहित तरीके नहीं हैं, और इससे भी अधिक वापस पीएनजी या जेपीईजी के लिए एन्कोडिंग के लिए। यह सब, ज़ाहिर है, मैन्युअल रूप से किया जा सकता है। लेकिन यह एक अलग लेख के लिए एक विषय है, इस तरह के सभी सवालों को कई बार चबाया गया, जिसमें हैबे भी शामिल है। इसलिए, हम एक पुस्तकालय लेते हैं जो अधिक अवसर देगा। मैंने ImageTools का उपयोग किया। अपनी आवश्यकताओं के लिए, मैंने MyImage क्लास लिखा, जो कि मेरी ज़रूरत की कार्यक्षमता को लागू करता है:

using System; using System.Net; using System.Windows; using System.IO; using System.Windows.Media.Imaging; using ImageTools; using ImageTools.IO.Bmp; using ImageTools.IO.Jpeg; using ImageTools.IO.Png; using ImageTools.Helpers; using ImageTools.Filtering; using ImageTools.IO; namespace Uploader.Libs { public class MyImage { private ExtendedImage im; //    ImageTools public string name { get; set; } public string extension { get; set; } public FileInfo origin { get; set; } public int originSize { get { return origin != null ? Utils.ByteToKB((int)origin.Length) : 0; //Utils -     . } } public MyImage(FileInfo fileinfo) { name = fileinfo.Name; extension = fileinfo.Extension; origin = fileinfo; WriteableBitmap bmp = new WriteableBitmap(1, 1); bmp.SetSource(origin.OpenRead()); im = bmp.ToImage(); } public MyImage(ExtendedImage im, string name, string extension) { this.name = name; this.extension = extension; this.im = im; } public MyImage resize(int width, int height) { string prefix = width.ToString() + "_" + height.ToString() + "_"; ExtendedImage rImage = ExtendedImage.Resize(im, width, height, new ImageTools.Filtering.NearestNeighborResizer()); //     return new MyImage(rImage, prefix + name, extension); } //,   public MyImage scale(int value) { double width = im.PixelWidth; double height = im.PixelHeight; double max = width > height ? width : height; double sc = max > value ? value / max : 1; int nWidth = (int)Math.Round(sc * width); int nHeight = (int)Math.Round(sc * height); return resize(nWidth, nHeight); } //     public byte[] getOrigin() { byte[] buffer; if (origin != null) { FileStream fStream = origin.OpenRead(); buffer = new byte[fStream.Length]; fStream.Read(buffer, 0, buffer.Length); } else buffer = null; return buffer; } //    byte-,      public byte[] toByte(string extension = "") { MemoryStream mStream = new MemoryStream(); string ext = extension != String.Empty ? extension : this.extension; dynamic encoder; //    ,   ,   dynamic switch (ext) { case ".png": encoder = new PngEncoder(); break; default: encoder = new JpegEncoder(); break; } encoder.Quality = 100; //    encoder.Encode(im, mStream); return mStream.ToArray(); } //base64      html   public string toBase64(byte[] data = null) { byte[] iData = data != null ? data : toByte(); return "data:image/" + extension.Substring(1) + ";base64," + Convert.ToBase64String(iData); } } } 

तो, हमारे पास छवियां हैं, उनके साथ काम करने के लिए कार्यक्षमता है, अंत में सर्वर को भेजने के लिए बाइट [] की एक सरणी है।

टोपी

सामान्य तौर पर, सिल्वरलाइट पर सर्वर के साथ बातचीत एक अलग लेख के लिए एक विषय है (मैं इसे अधिक समझूंगा और लिखूंगा, सबसे अधिक संभावना है)। यह कहने के लिए पर्याप्त है कि केवल सर्वर के लिए चर पारित करना (वेब ​​सेवा, साबुन का उपयोग किए बिना) इतना सरल नहीं है। नतीजतन, फ्लैश के लिए, आपको स्वयं अनुरोध हेडर बनाना होगा, इस प्रकार फॉर्म सबमिशन का अनुकरण करना होगा। परिणाम शीर्षक बनाने के लिए मेरी कक्षा का एक और पुनर्जन्म था:

 using System; using System.Collections.Generic; using System.Text; using System.Windows.Browser; namespace Uploader.Libs { public class FormBuilder { private string BOUND; private string ENTER = "\r\n"; private string ADDB = "--"; UTF8Encoding encoding; private List<byte> Data; public string bound { get { return BOUND; } } public FormBuilder() { BOUND = getBoundary(); Data = new List<byte>(); encoding = new UTF8Encoding(); } public void addFile(string name, byte[] buffer) { string encode_name = HttpUtility.UrlEncode(name); StringBuilder header = new StringBuilder(); header.Append(ADDB + BOUND); header.Append(ENTER); header.Append("Content-Disposition: form-data; name='" + encode_name + "'; filename='" + encode_name + "'"); header.Append(ENTER); header.Append("Content-Type: application/octet-stream"); header.Append(ENTER); header.Append(ENTER); Data.AddRange(encoding.GetBytes(header.ToString())); Data.AddRange(buffer); Data.AddRange(encoding.GetBytes(ENTER)); } public void addParam(string name, string value) { StringBuilder header = new StringBuilder(); header.Append(ADDB + BOUND); header.Append(ENTER); header.Append("Content-Disposition: form-data; name='" + name + "'"); header.Append(ENTER); header.Append(ENTER); header.Append(value); header.Append(ENTER); Data.AddRange(encoding.GetBytes(header.ToString())); } public byte[] getForm() { StringBuilder header = new StringBuilder(); header.Append(ENTER); header.Append(ENTER); header.Append(ADDB + BOUND + ADDB); Data.AddRange(encoding.GetBytes(header.ToString())); byte[] formData = new byte[Data.Count]; Data.CopyTo(formData); return formData; } private string getBoundary() { string _boundary = ""; Random rnd = new Random(); for (int i = 0; i < 0x20; i++) { _boundary += (char)(97 + rnd.NextDouble() * 25); } return _boundary; } } } 

asynchrony

तो हम सबसे दिलचस्प पर चले गए। दरअसल, सर्वर में डेटा डाउनलोड करने और प्रतिक्रिया प्राप्त करने के तंत्र के लिए। हमारे मामले में, हमें HttpWebRequest की आवश्यकता है। सामान्य तौर पर, इस वर्ग के साथ और चांदी के प्रकाश में अनुरोधों के साथ काम करने की विचारधारा इतनी स्पष्ट नहीं है, इसलिए यह कार्रवाई के अनुक्रम को चित्रित करने के लिए समझ में आता है:

1) HttpWebRequest का एक उदाहरण बनाना, गंतव्य url को निर्दिष्ट करना, विधि (पोस्ट, गेट), हेडर (सामग्री-प्रकार) भेजना।

2) अगला, BeginGetRequestStream विधि को कॉल करें। इस विधि में 2 पैरामीटर हैं। पहला फ़ंक्शन का प्रतिनिधि है, जिसे बुलाया जाएगा। दूसरा इस फ़ंक्शन के लिए दिए गए पैरामीटर हैं। सामान्य तौर पर, हमें इस सुविधा की आवश्यकता क्यों है? यह स्ट्रीम (स्ट्रीम) तक पहुंचने के लिए आवश्यक है, जो सर्वर को डेटा लिखता है। स्ट्रीम EndGetRequestStream विधि द्वारा प्राप्त किया जा सकता है।

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

3) अगला, हम केवल लिखने के माध्यम से डेटा लिखते हैं (आप तुरंत लोड का प्रतिशत ट्रैक कर सकते हैं)।

4) अगला, BeginGetResponse विधि के लिए एक कॉल, जो सर्वर से प्रतिक्रिया का अनुरोध करता है। विधि पैरामीटर BeginGetRequestStream के समान हैं, और फ़ंक्शन को अतुल्यकालिक भी कहा जाता है।

5) इस फ़ंक्शन में, हमें HttpWebResponse (HttpWebRequest ऑब्जेक्ट की EndGetResponse विधि का उपयोग करके) का एक उदाहरण मिलता है।

6) आगे, हमें एक प्रतिक्रिया के साथ एक धारा मिलती है (गेटप्रोसेसस्ट्रीम विधि को HttpWebResponse ऑब्जेक्ट के रूप में कॉल करके)। और स्ट्रीम से हमें पहले ही जवाब मिल जाता है (स्ट्रीमरएडर के माध्यम से। ReadToEnd)।

मैं समझता हूं कि स्पष्टीकरण अनाड़ी है, लेकिन मैं एक अलग तरीके से विफल रहा। मुझे उम्मीद है कि नमूना कोड स्पष्ट होगा (ठीक है, कुछ टिप्पणियाँ भी कोड में मौजूद हैं):

  SynchronizationContext sync; //      Dictionary<string, MyImage> images; //   HtmlView mainView; //       html string script = "../upload.php"; //php-,    private void upload() { if (images.Count > 0) { MyImage im = (MyImage)(images.First().Value); MyImage mini = im.scale(300); // FormBuilder builder = new FormBuilder(); //   builder.addFile(im.name, im.getOrigin()); builder.addFile(mini.name, mini.toByte()); byte[] formData = builder.getForm(); Uri uri = new Uri(script, UriKind.Relative); HttpWebRequest request = (HttpWebRequest)WebRequestCreator.BrowserHttp.Create(uri); //    Browser Http Stack  ,      request.Method = "POST"; request.ContentType = "multipart/form-data; boundary=" + builder.bound; request.ContentLength = formData.Length; List<object> uploadState = new List<object>(); // ,      uploadState.Add(request); uploadState.Add(formData); request.BeginGetRequestStream(new AsyncCallback(GetRequestStream), uploadState); } } private void GetRequestStream(IAsyncResult result) { List<object> state = (List<object>)result.AsyncState; HttpWebRequest request = (HttpWebRequest)state[0]; byte[] data = (byte[])state[1]; int k = 0; int h = data.Length / 100; int ost = data.Length % 100; int dLength = data.Length - ost; Stream writeStream = request.EndGetRequestStream(result); //  for (int i = 0; i < dLength; i += h) { writeStream.Write(data, i, h); k++; Dispatcher.BeginInvoke(() => { mainView.setPercent(k); //  }); } if (ost > 0) writeStream.Write(data, dLength, ost); writeStream.Close(); request.BeginGetResponse(new AsyncCallback(GetResponse), request); } private void GetResponse(IAsyncResult result) { HttpWebRequest request = (HttpWebRequest)result.AsyncState; HttpWebResponse response = (HttpWebResponse)request.EndGetResponse(result); sync.Post(onComplete, response); //      } private void onComplete(object state) { HttpWebResponse response = (HttpWebResponse)state; if (response.StatusCode == HttpStatusCode.OK) { StreamReader reader = new StreamReader(response.GetResponseStream()); string responseText = reader.ReadToEnd(); reader.Close(); } images.Remove(images.First().Key); //     mainView.setRowComplete(); upload(); //    } 

ऐसा डाउनलोड है। लेकिन सर्वर पर, कुछ भी हमें एक भोज और परिचित स्क्रिप्ट का उपयोग करने से रोकता है:

 foreach($_FILES as $key => $value){ $filename = substr_replace($key, '.', -4, 1); move_uploaded_file($value['tmp_name'], "upload/". urldecode($filename)); } echo 'complete'; 

विचार

सवाल यह है कि, बूटलोडर इंटरफ़ेस (xaml या html) कैसा दिखना चाहिए। यहां हर कोई तय करता है कि उसे सबसे अच्छा कैसे पसंद है। मैंने html के रूप में बनाया। यही है, फ़ाइल चयन संवाद खोलने के लिए बटन, निश्चित रूप से, चांदी की रोशनी (सुरक्षा प्रतिबंधों के कारण) पर है। लेकिन बाकी सब HTML में है (छवियों के पूर्वावलोकन सहित, मैंने उन्हें बेस 64 रूप में प्रदर्शित किया है)। अद्भुत एचटीएमएल ब्रिज क्लासेस ने मुझे इससे मदद दी, जिससे मुझे सिल्वरलाइट से डोम ट्री के साथ काम करने की अनुमति मिली।

यहाँ बूटलोडर डेमो है:

कोष्ठक के बाहर

मैं एक ही विषय पर उत्कृष्ट लेखों के लिए डेमेट्रोस हब्रायुज़र के लिए धन्यवाद कहना चाहता हूं, साथ ही साथ हब्रुएज़र्स जो मेरे पिछले लेखों की टिप्पणियों में तैयार समाधानों के लिंक दिए थे। जो लोग इस विषय में रुचि रखते हैं, वे अपने कार्यों के लिए कुछ पा सकते हैं।

नव वर्ष की शुभकामनाएं और मैं आपके काम को आपके शौक का एक निरंतरता बनना चाहता हूं!