मेरे पास एक निश्चित बॉक्स है जहां मैं पीडीएफ.जे द्वारा प्रस्तुत पीडीएफ प्रदर्शित करना चाहता हूं। चूंकि PDF.js दस्तावेज़ वास्तव में पहुंच योग्य नहीं है (उनकी स्रोत फ़ाइलों के माध्यम से थूकना), मैं जानना चाहता हूं कि एक निश्चित चौड़ाई पर एक प्रस्तुत पीडीएफ को स्केल करना संभव है या नहीं। जब मैं सीएसएस के रूप में सेट करता हूं: canvas { width: 600px; }
पीडीएफ प्रदर्शित करने वाले कैनवास के लिए, पीडीएफ बढ़ाया जाता है, और गुणवत्ता खराब हो जाती है।पीडीएफ.जेएस स्केल पीडीएफ निश्चित चौड़ाई
उत्तर
मैंने एक निश्चित कैनवास चौड़ाई के लिए ठीक से स्केल करने के लिए Pdf.js github http://jsbin.com/pdfjs-prevnext-v2/edit#html,live से उदाहरण अपडेट किया। मेरे कोड के लिए http://jsfiddle.net/RREv9/ देखें।
महत्वपूर्ण लाइन
var viewport = page.getViewport(canvas.width/page.getViewport(1.0).width);
क्योंकि अभिव्यक्ति canvas.width/page.getViewport(1.0).width
हमें उचित स्केलिंग कारक देता है।
आपको सीएसएस के साथ नहीं बल्कि कैनवास के width
विशेषता के अनुसार अपने कैनवास की चौड़ाई बदलनी चाहिए। देखें Canvas width and height in HTML5
यह सुनिश्चित करने के लिए कि स्केलिंग सभी पेज आकारों (पत्र, ए 4, ए 5, आदि) के साथ काम करती है, आपको यह ध्यान रखना चाहिए कि पेज आकार बदलते समय ऊंचाई और चौड़ाई के बीच अनुपात अलग-अलग होते हैं। उदाहरण के लिए एक लोकप्रिय पृष्ठ आकार (इंच में) कर रहे हैं:
- पत्र: 8.5 x 11 .. 0,772
- ए 4 के अनुपात: 8.27 × 11.7 .. 0.706
- ए 5 के अनुपात: 5.83 × 8.27। 0.704
आप ऊंचाई और चौड़ाई दोनों पर विचार करके और केवल छोटी राशि को स्केल करके सही स्केलिंग की गणना कर सकते हैं। यह सुनिश्चित करेगा कि सबकुछ आपके कैनवास पर फिट बैठता है। इसके अतिरिक्त, क्या आपको अपने कैनवास की चौड़ाई या ऊंचाई बदलनी चाहिए, आप कुछ भी तोड़ नहीं पाएंगे।
var unscaledViewport = page.getViewport(1);
var scale = Math.min((canvas.height/unscaledViewport.height), (canvas.width/unscaledViewport.width));
var viewport = page.getViewport(scale);
- 1. पीडीएफ.जेएस
- 2. पीडीएफ.जेएस दर्शक
- 3. एक निश्चित पिक्सेल चौड़ाई
- 4. स्केल पीडीएफ एकल पृष्ठ
- 5. सीएसएस स्केल करें 100% चौड़ाई
- 6. पीडीएफ.जेएस आईई 9
- 7. निश्चित चौड़ाई लिखना, पाइथन
- 8. पार्स निश्चित-चौड़ाई फ़ाइलों
- 9. पीडीएफ.जेएस में पीडीएफ को गठबंधन करने का कोई तरीका है?
- 10. jqgrid कॉलम की निश्चित चौड़ाई?
- 11. Imagemagick: निश्चित ऊंचाई, आनुपातिक चौड़ाई
- 12. थोक सम्मिलित निश्चित चौड़ाई फ़ील्ड
- 13. पढ़ें निश्चित चौड़ाई पाठ फ़ाइल
- 14. एक टेबल लेआउट स्टाइलिंग निश्चित और निश्चित चौड़ाई कॉलम + colspan
- 15. एक निश्चित चौड़ाई स्ट्रिंग संरेखित कैसे छोड़ें?
- 16. निश्चित चौड़ाई कॉलम के साथ WPF ट्रीव्यू
- 17. निश्चित तत्वों के लिए प्रतिशत चौड़ाई?
- 18. टेबल लेआउट: निश्चित टीडी की न्यूनतम चौड़ाई
- 19. यूआईएलएबल निश्चित चौड़ाई और लचीला ऊंचाई
- 20. क्या आइसोटोप एक निश्चित चौड़ाई div
- 21. कच्चे डेटा से पीडीएफ प्रदर्शित करने के लिए पीडीएफ.जेएस का उपयोग
- 22. प्रिंटिंग के लिए एचटीएमएल/पीडीएफ दस्तावेज की सर्वोत्तम चौड़ाई
- 23. पीडीएफ
- 24. पीडीएफ
- 25. पीडीएफ ए 4 आकार
- 26. ffmpeg: स्केल आउटपुट फसल चौड़ाई/ऊंचाई काम नहीं करता
- 27. ggplot geom_errorbar चौड़ाई जब पहलू (और स्केल = "मुक्त")
- 28. स्केल
- 29. एचटीएमएल 5 में पीडीएफ रेंडरिंग कैनवास
- 30. कुछ निश्चित चौड़ाई कॉलम के साथ द्रव लेआउट
बहुत बहुत धन्यवाद, मुझे कैनवास तत्व की सीएसएस चौड़ाई और HTML5 चौड़ाई गुणों के बीच अंतर के बारे में पता नहीं था। – Roger
तो, यदि कैनवास की चौड़ाई: 100% '(_css property_) है, तो मैं' canvas.width' के बजाय 'window.screen.width' मान का उपयोग कर सकता हूं? मेरा मतलब है, 'var viewport = page.getViewport (window.screen.width/page.getViewport (1.0)। विड्थ); '(_btw, यह मेरे लिए ठीक काम कर रहा है) –
' कैनवासकंटनर.क्लिएंटविड्थ 'का उपयोग करना था, फिर यह काम किया। धन्यवाद! – lony