javascript - Choose file, set image and upload without blocking UI -

-

समस्या

मैं निम्नलिखित चरणों को सफलतापूर्वक प्राप्त कर सकता हूं, लेकिन यूआई 2 एमबी या अधिक की फ़ाइलों के लिए अनुत्तरदायी हो सकता है ये फ़ाइलें उनके कैमरे या डेस्कटॉप से ​​जो अपलोड हो सकती हैं, उनके आकार की सीमा में हैं, इसलिए मुझे उन्हें संभालना होगा।

  1. उपयोगकर्ता फ़ाइल को मानक फ़ाइल इनपुट HTML तत्व :

    & lt; इनपुट वर्ग = "रद्द करें" प्रकार = "फ़ाइल" नाम = "userFile" id = "userFile" स्वीकार = "छवि / *" />

  2. क्लाइंट साइड पर मैं फ़ाइल का आकार बदलता हूं ताकि चौड़ाई 500 पिक्स या उससे कम हो (विशेष रूप से बड़ी फ़ाइलों के लिए छवि आकार को कम करने के लिए) और छवि दिखाएं।

  3. क्लाइंट साइड पर मैं रीसेट की गई छोटी फ़ाइल अपलोड कर रहा हूं I

    डेमो

    देखें।

    वहां आप देख सकते हैं कि बड़ी फ़ाइलों को अपलोड करते समय - चलती रोकता है फ़ायरफ़ॉक्स की तुलना में क्रोम में देरी अधिक महत्वपूर्ण दिखती है, लेकिन यह फ़ायरफ़ॉक्स पर अभी भी ध्यान देने योग्य है।

    अवरुद्ध करने का कारण

    1. डेटा यूआरएल img src पर सेट है यह आवश्यक है ताकि छवि का कैनवास में पुनःआकार किया जा सके।

      img.src = e.target.result; // यहाँ अवरुद्ध

    2. जब आईएमजी कैनवास पर लिखा जाता है

      ctx.drawImage (आईएमजी, 0, 0, चौड़ाई, ऊंचाई); // यहां अवरुद्ध करने के लिए < / Ol>

      मैं मानता हूं विकल्प

      1. वेब वर्कर में अवरुद्ध क्रियाओं को करना। यह संभव नहीं है क्योंकि वेब वर्कर DOM तत्वों में हेरफेर नहीं कर सकते हैं और ब्लॉकिंग कॉल्स दोनों डोम को जोड़ते समय उत्पन्न करते हैं।

      2. एक वेब वर्कर में कच्चे छवि डेटा का आकार बदलना दुर्भाग्य से, मुझे नहीं पता है कि आईएमजी का प्रारूप इतना आकार बदल जाएगा कि सभी छवि प्रकारों को संभाल करने की आवश्यकता होगी। मैं किसी भी जावास्क्रिप्ट लाइब्रेरी से अवगत नहीं हूं जो यह करेंगे और मैं विशेष रूप से अपना क्रॉस-फ़ॉर्मेट छवि संपीड़न पुस्तकालय लिखना नहीं चाहता हूं।

      3. आईएमजी को सीधे रीसाइज़ करना, लेकिन यह अंतर्निहित डेटा आकार को नहीं बदलता है जिसे अपलोड करने की आवश्यकता है

      4. सर्वर पर साइज़िंग करना एक विकल्प नहीं है क्योंकि मैं अपलोड आकार को कम करना चाहता हूं। क्लाइंट पर रीसाइज करना भी बेहतर है चूंकि बड़ी छवि के लिए स्मृति जल्दी जारी की जाती है और पुनःआकारित छवि तुरंत प्रदर्शित होती है।

        अन्य विचार < / P>

        मुझे पता है कि img src सेट करना async है, इसलिए मुझे लगता है कि यह उस डेटा की प्रतिलिपि है जो अवरुद्ध कर रहा है। मुझे आश्चर्य है कि प्रतिलिपि बनाने के बजाय समान डेटा साझा करने का कोई तरीका है?

        मैं डेटा कोड प्राप्त करने के लिए FileReader का उपयोग करने के लिए एक मानक दृष्टिकोण के रूप में विश्वास करता हूं, फिर डेटा कोड को img.src और canvas.drawImage आकार बदलने के लिए (इस के कई उदाहरण हैं, एक है)। इस दृष्टिकोण या किसी अन्य दृष्टिकोण की प्रतिक्रिया में सुधार करने में कोई सहायता की सराहना की जाएगी।

        मुझे क्या लगता है कि आप ऐसा करने की कोशिश कर रहे हैं

        1. उपयोगकर्ता अपलोड की गई छवि
        2. क्लाइंट उपयोगकर्ता को कम गुणवत्ता वाला चित्र दिखाता है।
        3. क्लाइंट तब आपके द्वारा बाद में उपयोग के लिए कम गुणवत्ता वाली छवि अपलोड करता है।

          आप जिस समस्या में चल रहे हैं, आप जावास्क्रिप्ट (ग्राहक) को उन चीजों को करने के लिए मजबूर कर रहे हैं जो सबसे ज्यादा संभवतः सर्वर साइड पर किया जाएगा छवि को कम संकल्प पर प्रदर्शित करने के लिए जो आसानी से उपयोग करके प्राप्त किया जा सकता है। क्लाइंट साइड पर उपयोगकर्ता को वास्तविक कम फ़ाइल तुरंत प्रदर्शित करने का कोई कारण नहीं है। यहां आपके उपयोग के प्रवाह का संस्करण है।

          1. उपयोगकर्ता अपलोड की गई छवि।
          2. DrawImage का उपयोग कर कम संकल्प संस्करण प्रदर्शित करते हुए ग्राहक उसे सर्वर पर अपलोड करता है। < Li> सर्वर एक स्क्रिप्ट चलाता है जैसे कि इसे आकार के आकार के आकार में बदलता है।
          3. फिर जब भविष्य में छवि का उपयोग करने की आवश्यकता होती है, तो सर्वर का आकार बदलकर संस्करण खांसी हो जाता है।

            मुझे उम्मीद है कि यह मदद करता है !!!

Comments

Post a Comment

Popular posts from this blog

python - Writing Greek in matplotlib labels, titles -

-
Image
I'm trying to write some text for labels, shape titles etc. with my plots, but no benefit till now Has not happened . I do not want to print specific characters (I know how to use special characters), I want to write the entire text in Greek (maybe Unicode and text ' ?). , suggesting that I would like to mention that for some reason I can not get matplotlib to cooperate with Tex (using IPython notebook from Anaconda in Ubuntu 14.10) so that there really is an option Will not be the first. I tried loading the Arial font and it loads successfully but again I get square blocks instead of characters. I import matplotlib.font_manager FM PROP = FM Font Properties (fname = '/ usr / share / fonts / truetype / msttcorefonts / Arial.ttf') And then to display the string I u'Î? ? I ?? Î¿Ï ?? ÎμÎ »second ?? μΠ± i ?? I ± i ?? I ?? Used ο किया? ? Î¿Î¼Î¿Î¯Ï ?? I ?? I · I ?? ' . Ariel is considered to be fully presented to Greek and I have used it many times ...
Read more

c# - LINQ to Entities does not recognize the method 'Int32 IndexOf(System.String, System.StringComparison)' method -

-
I have performed a linq query using Entityframework as below GroupMaster getGroup = Null; GetGroup = DataContext.Groups.FirstOrDefault (item = & gt; keyword.IndexOf (item.Keywords, StringComparison.OrdinalIgnoreCase)> = 0 & amp; amp; item.ISNAmd) I found an exception like the method when executing it LINQ units do not recognize the 'Inter 32 index of (system string, system. String compromise)' method, and This method can not be translated to Store expression. Includes () method is sensitive by default, then I need to convert to minimize. Is there any method in which a string match match is examined and whether there is any method to solve the index question of the method? You actually have four options Databases globally Change the colon of it can be done in many ways, a simple Google search should reveal to them. Change the mix of individual tables or columns. Use a stored procedure and specify the call statement on your query Perform...
Read more

Pygame memory leak with transform.flip -

-
Today I came across an interesting issue which, by writing a small side scroller, instead of a sprite sheet, I was planning to use because I lacked a good "packer" for making phantom sheets (and honestly with patience and passion as it is only a test project). Anyway, I showed the animation running on the right of 8 PNG (with transparency). I considered it a good idea to prepare the flipped images to run on the left in the consultant, and the frame is not framed when the game is running (Flip actually consumes a lot of CPU like I Was measured). > To get access to the loop, I get the memory leak self.move_l = [# 8 PNG images with transparency to the right] For the self in IMG. Move_l: self.move_r.append (pygame.transform.flip (img, true, false) error traceback: traceback (most recent Call final): The file "D: \ Python 34 \ _Projects \ efg \ efg.py", in line 196, in the & lt; module & gt; main = master program ((1024, 680)) "D: \ Python ...
Read more