दिलचस्प पोस्ट
स्ट्रिंग में यूआरएल को जोड़ने के लिए सी # कोड कैसे एक छिपे हुए दिवे (अपडेटेड चित्र) के अंदर Google नक्शे से निपटने के लिए समूह द्वारा खंड के साथ एसक्यूएल अल्पविराम से अलग की गई पंक्ति जावा में डॉक या डॉक फाइल कैसे पढ़ी? डेटा को जोड़ने में एक में 2 एक्सेल तालिकाओं का मिश्रण है? PHP में फाइल अपलोड प्रकार फ़ाइल आकार को कैसे सीमित करें? क्या 'जावा' में बयान 'घुंघराले ब्रेसिज़' की आवश्यकता है? रेट्रोफ़िट 2 के लिए कस्टम कनवर्टर एक SELECT स्टेटमेंट के दो पंक्तियों के बीच MySQL अंतर क्यूटी 5 में अतिभारित सिग्नल और स्लॉट को कनेक्ट करना स्ट्रिंग। (या अन्य स्ट्रिंग संशोधन) बदलें काम नहीं कर रहा है 'Pthread_create' के लिए अपरिभाषित संदर्भ – लिंकर कमांड विकल्प ऑर्डर (ऑब्जेक्ट फ़ाइलों के पहले / बाद में पुस्तकालय)? माइक्रोसॉफ़्ट एसक्यूएल 2005 में प्राकृतिक (मानव अल्फा-न्यूमेरिक) प्रकार .Net Array के आकार पर सीमा अगर किसी डिफ़ॉल्ट का चयन नहीं किया गया है, तो विकल्प को jQuery के साथ चुना गया है या नहीं

ब्राउज़र में जावास्क्रिप्ट के माध्यम से एक छवि को कैसे संक्षिप्त करना है?

टी एल; डॉ;

अपलोड करने से पहले एक छवि (ज्यादातर जेपीईजी, पीएनजी और जीआईएफ) सीधे ब्राउज़र-साइड को संक्षिप्त करने का कोई तरीका है? मुझे पूरा यकीन है कि जावास्क्रिप्ट ऐसा कर सकता है, लेकिन मुझे इसे हासिल करने का कोई रास्ता नहीं मिल रहा है।

यहां पर लागू होने वाला पूरा परिदृश्य है:

  • उपयोगकर्ता मेरी वेबसाइट पर जाता है, और एक input type="file" तत्व के माध्यम से एक छवि का चयन करता है,
  • यह छवि जावास्क्रिप्ट के माध्यम से पुनर्प्राप्त की जाती है, हम कुछ सत्यापन करते हैं जैसे कि सही फ़ाइल स्वरूप, अधिकतम फ़ाइल आकार आदि,
  • अगर सब कुछ ठीक है, छवि का एक पूर्वावलोकन पेज पर प्रदर्शित होता है,
  • उपयोगकर्ता कुछ मूल आपरेशनों जैसे कि 90 डिग्री / -90 डिग्री तक छवि को घुमाएंगे, एक पूर्व-निर्धारित अनुपात आदि के बाद इसे फसल कर सकते हैं या उपयोगकर्ता एक और छवि अपलोड कर सकते हैं और चरण 1 पर लौट सकते हैं,
  • जब उपयोगकर्ता संतुष्ट हो जाता है, तो संपादित छवि तब संकुचित होती है और स्थानीय रूप से "सहेजी" (एक फ़ाइल में सहेजी नहीं जाती, लेकिन ब्राउज़र मेमोरी / पृष्ठ में) –
  • उपयोगकर्ता नाम, आयु आदि जैसे डेटा के साथ एक फ़ॉर्म भरता है,
  • उपयोगकर्ता "फिनिश" बटन पर क्लिक करता है, फिर फॉर्म वाले डेटा + संपीड़ित छवि को सर्वर पर भेजा जाता है (बिना AJAX),

अंतिम चरण तक की पूरी प्रक्रिया क्लाइंट की तरफ होनी चाहिए, और नवीनतम क्रोम और फ़ायरफ़ॉक्स, सफारी 5+ और आईई 8+ पर संगत होना चाहिए। यदि संभव हो तो केवल जावास्क्रिप्ट का उपयोग किया जाना चाहिए (लेकिन मुझे पूरा यकीन है कि यह संभव नहीं है)।

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

Html5please.com और caniuse.com के अनुसार, उन ब्राउज़र का समर्थन करना काफी कठिन है (आईई के लिए धन्यवाद), लेकिन ऐसा किया जा सकता है कि पॉलिफ़िल जैसे फ़्लैश कैनवास और फाइलरिडर ।

दरअसल, लक्ष्य फ़ाइल आकार को कम करना है, इसलिए मैं एक समाधान के रूप में छवि संपीड़न देखता हूं। लेकिन, मुझे पता है कि अपलोड की गई छवियां मेरी वेबसाइट पर प्रदर्शित होने वाली हैं, हर बार एक ही जगह पर, और मुझे पता है कि इस प्रदर्शन क्षेत्र का आयाम (जैसे 200×400)। इसलिए, मैं उन आयामों को फिट करने के लिए छवि का आकार बदल सकता हूं, इस प्रकार फ़ाइल आकार को कम कर सकता है। मुझे नहीं पता कि इस तकनीक के लिए कम्प्रेशन अनुपात क्या होगा।

तुम क्या सोचते हो ? क्या मुझे बताओ कोई सलाह है? क्या आप जावास्क्रिप्ट में छवि ब्राउज़र-साइड को संक्षिप्त करने के लिए कोई भी तरीका जानते हैं? आपके उत्तर के लिए धन्यवाद

वेब के समाधान से एकत्रित समाधान "ब्राउज़र में जावास्क्रिप्ट के माध्यम से एक छवि को कैसे संक्षिप्त करना है?"

संक्षेप में:

  • .readAsArrayBuffer के साथ एचटीएमएल 5 फ़ाइल रीडर एपीआई का इस्तेमाल करते हुए फाइलों को पढ़ें
  • फ़ाइल डेटा के साथ ई ब्लॉब बनाएं और अपने URL को विंडो के साथ प्राप्त करें। URL.createObjectURL (blob)
  • नया इमेज एलिमेंट बनाएं और इसे फाइल ब्लॉब url में src सेट करें
  • कैनवास में छवि भेजें कैनवास का आकार वांछित आउटपुट आकार पर सेट है
  • कैनवास से स्कैन-डाउन डेटा वापस कैनवास के माध्यम से प्राप्त करें। डेटा वैल्यू ("छवि / जेपीईजी", 0.7) (अपना स्वयं का आउटपुट प्रारूप और गुणवत्ता सेट करें)
  • मूल रूप में नए छिपे हुए इनपुट को अटैच करें और मूल पाठ के रूप में मूल रूप से डेटायूआरआई चित्रों को स्थानांतरित करें
  • बैकएंड पर, डेटायूआरआई पढ़ें, बेस 64 से डीकोड करें, और इसे बचाएं

स्रोत: कोड

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

 // Take an image URL, downscale it to the given width, and return a new image URL. function downscaleImage(dataUrl, newWidth, imageType, imageArguments) { "use strict"; var image, oldWidth, oldHeight, newHeight, canvas, ctx, newDataUrl; // Provide default values imageType = imageType || "image/jpeg"; imageArguments = imageArguments || 0.7; // Create a temporary image so that we can compute the height of the downscaled image. image = new Image(); image.src = dataUrl; oldWidth = image.width; oldHeight = image.height; newHeight = Math.floor(oldHeight / oldWidth * newWidth) // Create a temporary canvas to draw the downscaled image on. canvas = document.createElement("canvas"); canvas.width = newWidth; canvas.height = newHeight; // Draw the downscaled image on the canvas and return the new data URL. ctx = canvas.getContext("2d"); ctx.drawImage(image, 0, 0, newWidth, newHeight); newDataUrl = canvas.toDataURL(imageType, imageArguments); return newDataUrl; } 

यह कोड कहीं भी आपके पास डेटा यूआरएल का इस्तेमाल किया जा सकता है और एक डाउनस्कल छवि के लिए डेटा यूआरएल चाहते हैं।

मैं अन्य उत्तरों से दो चीजें देख रहा हूं:

  • canvas.toBlob (जब उपलब्ध होता है) canvas.toDataURL से अधिक performant है। canvas.toDataURL , और भी async
  • फ़ाइल -> छवि -> कैनवास -> फ़ाइल कनवर्ज़न EXIF ​​डेटा खो देता है; विशेष रूप से, छवि रोटेशन के बारे में डेटा जो आमतौर पर आधुनिक फोन / टैबलेट्स द्वारा निर्धारित होता है

निम्न स्क्रिप्ट दोनों बिंदुओं से संबंधित है:

 // From https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob, needed for Safari: if (!HTMLCanvasElement.prototype.toBlob) { Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', { value: function(callback, type, quality) { var binStr = atob(this.toDataURL(type, quality).split(',')[1]), len = binStr.length, arr = new Uint8Array(len); for (var i = 0; i < len; i++) { arr[i] = binStr.charCodeAt(i); } callback(new Blob([arr], {type: type || 'image/png'})); } }); } window.URL = window.URL || window.webkitURL; // Modified from https://stackoverflow.com/a/32490603, cc by-sa 3.0 // -2 = not jpeg, -1 = no data, 1..8 = orientations function getExifOrientation(file, callback) { // Suggestion from http://code.flickr.net/2012/06/01/parsing-exif-client-side-using-javascript-2/: if (file.slice) { file = file.slice(0, 131072); } else if (file.webkitSlice) { file = file.webkitSlice(0, 131072); } var reader = new FileReader(); reader.onload = function(e) { var view = new DataView(e.target.result); if (view.getUint16(0, false) != 0xFFD8) { callback(-2); return; } var length = view.byteLength, offset = 2; while (offset < length) { var marker = view.getUint16(offset, false); offset += 2; if (marker == 0xFFE1) { if (view.getUint32(offset += 2, false) != 0x45786966) { callback(-1); return; } var little = view.getUint16(offset += 6, false) == 0x4949; offset += view.getUint32(offset + 4, little); var tags = view.getUint16(offset, little); offset += 2; for (var i = 0; i < tags; i++) if (view.getUint16(offset + (i * 12), little) == 0x0112) { callback(view.getUint16(offset + (i * 12) + 8, little)); return; } } else if ((marker & 0xFF00) != 0xFF00) break; else offset += view.getUint16(offset, false); } callback(-1); }; reader.readAsArrayBuffer(file); } // Derived from https://stackoverflow.com/a/40867559, cc by-sa function imgToCanvasWithOrientation(img, rawWidth, rawHeight, orientation) { var canvas = document.createElement('canvas'); if (orientation > 4) { canvas.width = rawHeight; canvas.height = rawWidth; } else { canvas.width = rawWidth; canvas.height = rawHeight; } if (orientation > 1) { console.log("EXIF orientation = " + orientation + ", rotating picture"); } var ctx = canvas.getContext('2d'); switch (orientation) { case 2: ctx.transform(-1, 0, 0, 1, rawWidth, 0); break; case 3: ctx.transform(-1, 0, 0, -1, rawWidth, rawHeight); break; case 4: ctx.transform(1, 0, 0, -1, 0, rawHeight); break; case 5: ctx.transform(0, 1, 1, 0, 0, 0); break; case 6: ctx.transform(0, 1, -1, 0, rawHeight, 0); break; case 7: ctx.transform(0, -1, -1, 0, rawHeight, rawWidth); break; case 8: ctx.transform(0, -1, 1, 0, 0, rawWidth); break; } ctx.drawImage(img, 0, 0, rawWidth, rawHeight); return canvas; } function reduceFileSize(file, acceptFileSize, maxWidth, maxHeight, quality, callback) { if (file.size <= acceptFileSize) { callback(file); return; } var img = new Image(); img.onerror = function() { URL.revokeObjectURL(this.src); callback(file); }; img.onload = function() { URL.revokeObjectURL(this.src); getExifOrientation(file, function(orientation) { var w = img.width, h = img.height; var scale = (orientation > 4 ? Math.min(maxHeight / w, maxWidth / h, 1) : Math.min(maxWidth / w, maxHeight / h, 1)); h = Math.round(h * scale); w = Math.round(w * scale); var canvas = imgToCanvasWithOrientation(img, w, h, orientation); canvas.toBlob(function(blob) { console.log("Resized image to " + w + "x" + h + ", " + (blob.size >> 10) + "kB"); callback(blob); }, 'image/jpeg', quality); }); }; img.src = URL.createObjectURL(file); } 

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

 inputfile.onchange = function() { // If file size > 500kB, resize such that width <= 1000, quality = 0.9 reduceFileSize(this.files[0], 500*1024, 1000, Infinity, 0.9, blob => { let body = new FormData(); body.set('file', blob, blob.name || "file.jpg"); fetch('/upload-image', {method: 'POST', body}).then(...); }); }; 

जहाँ तक मुझे पता है, आप कैनवास का उपयोग कर चित्रों को संपीड़ित नहीं कर सकते हैं, इसके बजाए, आप इसका आकार बदल सकते हैं कैनवास का उपयोग करना। ट्यूटोरियल आप उपयोग करने के लिए संपीड़न अनुपात का चयन नहीं करेंगे। आप canimage पर एक नज़र डाल सकते हैं जो वास्तव में आप चाहते हैं: https://github.com/nfroidure/CanImage/blob/master/chrome/canimage/content/canimage.js

वास्तव में, यह केवल छवि के आकार को कम करने के लिए कई बार पर्याप्त होता है, लेकिन अगर आप आगे बढ़ना चाहते हैं, तो आपको नई शुरू की गई विधि फ़ाइल का उपयोग करना होगा। पाठ एएसएरेरेफर बफ़र को छवि डेटा युक्त बनाने के लिए।

उसके बाद, केवल छवि प्रारूप विनिर्देश ( http://en.wikipedia.org/wiki/JPEG या http://en.wikipedia.org/wiki/Portable_Network_Graphics ) के अनुसार इसकी सामग्री पढ़ने के लिए एक डेटाविय का उपयोग करें।

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

आपको एक अन्य बफर पर एक अन्य डेटाव्यू बनाना होगा और इसे फ़िल्टर की गई छवि सामग्री के साथ भरना होगा। उसके बाद, आपको बस डीकोड करने के लिए विंडो की सामग्री का उपयोग करने के लिए,

मुझे बताएं कि क्या आप कुछ समान लागू करते हैं, कोड के माध्यम से जाने के लिए दिलचस्प होगा।

जेपीजी इमेज संपीड़न के लिए आप जेआईसी (जावास्क्रिप्ट इमेज संपीड़न) नामक सर्वश्रेष्ठ संपीड़न तकनीक का उपयोग कर सकते हैं यह निश्चित रूप से आपकी मदद करेगा-> https://github.com/brunobar79/JIC