पीडीएफ.जेएस स्केल पीडीएफ निश्चित चौड़ाई

Question

मेरे पास एक निश्चित बॉक्स है जहां मैं पीडीएफ.जे द्वारा प्रस्तुत पीडीएफ प्रदर्शित करना चाहता हूं। चूंकि PDF.js दस्तावेज़ वास्तव में पहुंच योग्य नहीं है (उनकी स्रोत फ़ाइलों के माध्यम से थूकना), मैं जानना चाहता हूं कि एक निश्चित चौड़ाई पर एक प्रस्तुत पीडीएफ को स्केल करना संभव है या नहीं। जब मैं सीएसएस के रूप में सेट करता हूं: canvas { width: 600px; } पीडीएफ प्रदर्शित करने वाले कैनवास के लिए, पीडीएफ बढ़ाया जाता है, और गुणवत्ता खराब हो जाती है।

Answer 1

मैंने एक निश्चित कैनवास चौड़ाई के लिए ठीक से स्केल करने के लिए 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

Answer 2

यह सुनिश्चित करने के लिए कि स्केलिंग सभी पेज आकारों (पत्र, ए 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);