2013-06-10 8 views
15

मुझे आपकी मदद चाहिए। मैं अपनी स्थिति की व्याख्या करता हूं: मैं अपने आवेदन में आकार, टेक्स्ट इत्यादि रखने के लिए fabric.js लाइब्रेरी का उपयोग कर रहा हूं। मेरा कैनवास आकार 1000x1000 पिक्सेल (लगभग 26.45x26.45 सेंटीमीटर) है। मेरे पास केवल उच्च गुणवत्ता वाले अपलोड छवियों के लिए एक छवि अपलोड स्क्रिप्ट है, जैसे 300 डीपीआई।उच्च गुणवत्ता वाली छवियों के साथ कैनवास निर्यात करने का सबसे अच्छा अभ्यास क्या है?

मूल रूप से मैं क्या निम्नलिखित है: - कैनवास आकर्षित (छवियों को अपलोड करने, पाठ डाल, आदि ...); - 300 डीपीआई के साथ एक छवि रखने के अंत में सक्षम होने के लिए स्केल फैक्टर द्वारा गुणा कैनवास का आकार बदलें; - पीएनजी प्रारूप में कैनवास को सहेजें; - php/AJAX और Imagick का उपयोग करके, 300 डीपीआई गुणवत्ता के साथ कैनवास डालें, जेपीजी प्रारूप में बचत करें।

समस्या यह है: जब मैं कैनवास को सहेजता हूं, अपलोड की गई छवियों की गुणवत्ता घट जाती है, क्योंकि मैं कैनवास का आकार बदलता हूं 72 डीपीआई (फिलहाल मैं पीएनजी में सहेजता हूं)।

मुझे लगता है कि एक संभव समाधान है: जब छवियों को अपलोड करने, पूरी प्रक्रिया के अंत के लिए x और y स्थिति और आकार के साथ एक सरणी में स्थिति को बचाने जेपीजी में छवि को बदल। यदि यह सबसे अच्छा तरीका है, तो इसे इमेजिक लाइब्रेरी या PHP में बनाना संभव है?

मैं इसके बारे में आपकी राय जानना चाहता हूं।

धन्यवाद।

उत्तर

37

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

स्केलिंग तुम यहाँ मदद नहीं करेगा - याद है कि आप एक पिक्सेल डिवाइस, वैक्टर नहीं के साथ काम कर रहे हैं, तो कैनवास आकार में पहले से ही करने की आवश्यकता है आप प्रिंट आदि के लिए उपयोग करना चाहते हैं या आप की वजह से गुणवत्ता को कम कर दिया जाएगा इसे स्केल करते समय इंटरपोलेशन।

आप क्या आकार आप अंतिम चरण में चाहते हैं के संबंध में पिक्सल में अपने कैनवास आकार पूर्व Calulate की जरूरत है:

यहाँ कैसे।

चलें कहते हैं कि तुम @ 300dpi उत्पादन एक 15 x 10 सेमी छवि (या के बारे में 6 x 4 इंच) प्रिंट करना चाहते हैं। तुम तो पिक्सल की गणना: (! में 4 = 10 सेमी तो थोड़ा अलग परिणाम, संख्या सादगी के लिए उठाया)

Width : 10 cm * 300/2.54 = 1181 pixels 
Height: 15 cm * 300/2.54 = 1772 pixels 

इंच बस डीपीआई के साथ गुणा के लिए:

Width : 4 in * 300 = 1200 pixels 
Height: 6 in * 300 = 1800 pixels 

के लिए अपने 26.45 सेमी पर छवि @ 300 डीपीआई कैनवास की आवश्यकता होगी होने के लिए:

26.45 cm * 300 DPI/2.54 inches = 3124 pixels. 

स्क्रीन पर एक छोटे क्षेत्र में है कि कैनवास आप सीएसएस प्रदर्शित करने के लिए का उपयोग प्रदर्शित करने के लिए टी वह तत्व है, उदाहरण के लिए -

<canvas width="3124" height="3124" style="width:600px;height:600px;"></canvas> 

अब आप अपने वास्तविक पिक्सेल स्थिति में कैनवास को आकर्षित कर सकते हैं और यह स्क्रीन पर छोटा दिखाई देगा (लेकिन कैनवास पर ही सभी जानकारी को बनाए रखने)। आप का उपयोग करते हैं माउस निर्देशांक तुम सिर्फ आनुपातिक माउस स्थिति पैमाने (कैनवास स्थिति = माउस coord * 3124px/600px)।

ज़ूमिंग आदि के लिए यह एक और अधिक जटिल हो जाता है, लेकिन सिद्धांत बना रहता है: आपकी छवि का अंतिम आकार अंतिम परिणाम होना चाहिए।

डीपीआई के बारे में: यदि यह छवि 72 डीपीआई या 300 डीपीआई थी तो पिक्सल की संख्या बिल्कुल वही होगी। जैसा कि पहले से ही उल्लेख किया गया है कि छवियों को पिक्सल में मापा जाता है।

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

+1

एक और दृष्टिकोण यहां है http://stackoverflow.com/questions/28778396/how-to-export-draw-canvas-fabricjs-tojson-in-php-using-imagick-in-high-qua – AZinkey

+0

@ K3N : मैंने आपके सुझाव का पालन किया, लेकिन मैं एक समस्या पर फंस गया हूं, जो ग्रंथों को रखा जा रहा है वे बहुत छोटे हैं। कृपया झटके को देखें http://jsfiddle.net/Q3TMA/1042/ – Abhinav

+0

@ अहिनाव फ़ॉन्ट आकार को स्केल किया जाना चाहिए तैयार होने से पहले अग्रिम में। आप इसके लिए स्केल() का उपयोग कर सकते हैं या सीधे फ़ॉन्ट ऊंचाई के साथ प्रयास कर सकते हैं। फ़ॉन्ट कैसे बनाया जाता है, इसके बाद उत्तरार्द्ध हमेशा रैखिक नहीं होता है, लेकिन आप करीब पहुंचने में सक्षम होना चाहिए। – K3N

संबंधित मुद्दे

 संबंधित मुद्दे