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

Pass DB Connection parameters to a Kettle a.k.a PDI table Input step dynamically from Excel -

-
Image
I have a requirement whenever I run my own kettle, dynamically took database connection parameters from an excel source Every run should go. I have an Excel column names: hostname, username, database, password. I want to pass these connection parameters to my table input stage dynamically whenever it runs the job. This is what I was trying to do. You can get it Connection parameters from the DB reading source (for example Excel or a CSV file in my example) < / Li> Store the parameters in the variable Using the variable in your connection's settings. Setting Variables Create another conversion for (you can not do it in the same conversion Uses): set variables element variable: The element that reads / writes your data creates a new connection and sets the connection parameter using $ {variable name_} Note that you will need to type in the field field in the field $ {password} Also keep in mind that this can be a security problem as the
Read more

multithreading - PhantomJS-Node in a for Loop -

-
I am trying to implement a screen-scraps application that opens a URL in which a parameter changes as it is for a loop: var data = [ '100', '101', '102', '103', '104']; (Var indexA = 0; indexA & lt; data.length; indexA ++) for {Phantom Generation ({'port': freeport}, function (pH) {ph.create page (function (page) {page.open ("http: //...++ data [index B] +" ... " , Status {console.log ("open site:" + data [index B], position); / * OLD * / indexB ++; page evaluation (function () {// page scrape and an object Return}, function {console.log (result.dataRequest); // here is the problem}); / * new and fixed * / indexB ++} first console Logs it: Open Site: 100 Success Opens Site: 101 Success B Ola Site: 102 Success Opening Site: 103 Success Opened Site: 104 Success Which is good. Data is verified in scrap HTML and from index to array Matches. So in page 101 I scrap '101 and retrieve' and pu
Read more

c++ - MATLAB .m file to .mex file using Matlab Compiler -

-
I know that it can speak as a very famous topic, but something that helps me with it Not found This scenario is: I have my functions function, no matter what's inside, it's a generic function that may depend on other toolboxes. Does. Has input and output; I want to generate the same myFun.mex function; : Lib myFun This way I get some new files: libmyfun.c libmyfun.dll Libmyfun.exp libmyfun.exports libmyfun .h libmyfun.lib Reading around and I think that Creating a myfun.cpp that is very famous is included: / * gateway function * / zero max function (ent NLHS, MXARRA * PLS [], int NRHS, CONST M Xeray * PHS []) Here is the Variable Deals * / / * code here * /} I have tried to do this and are called Regular of Max Generation: Max ('- v', 'myfun.cpp') But I get many errors, and I should say that my myfun.cpp copy / Paste Function is where I have a lot of doubts ... especially on input / output management. My q
Read more