फ़ायरफ़ॉक्स एक्सटेंशन में स्क्रीनशॉट कार्यक्षमता जोड़ना

Question

क्या फ़ायरफ़ॉक्स एक्सटेंशन से स्क्रीनशॉट लेने के लिए कोई क्रॉस-प्लेटफ़ॉर्म दृष्टिकोण है?

आदर्श रूप में मैं एक डोम तत्व (चाहे वह पृष्ठ पर दिखाई दे रहा है पर ध्यान दिए बिना या नहीं) का एक स्क्रीनशॉट लेने में सक्षम होना चाहते हैं, की तरह कुछ:

वर स्क्रीनशॉट = स्क्रीनशॉट (document.getElementById (' उदाहरण ');

किसी भी संकेत दिए गए या सुझाव, अच्छा होगा https://developer.mozilla.org/ खोज केवल स्क्रीनशॉट वे विभिन्न गाइड में उपयोग किया है पैदावार

Answer 1

कई एक्सटेंशन के कोड की जांच करने के बाद। मैंने निम्नलिखित दृष्टिकोण लिया (एक विशेष डोम तत्व का स्नैपशॉट लेने के लिए)। इस पूरे पेज के स्क्रीनशॉट लेने के लिए, ब्राउज़र विंडो के स्क्रीनशॉट लेने के लिए और एक विशेष डोम तत्व के स्क्रीनशॉट लेने के लिए एक Firefox विस्तार में इस्तेमाल किया जा सकता है (और उसके बच्चे नोड्स के सभी):

1. को कैनवास जोड़े xul।
2. तत्व के आयाम और शीर्ष-बाएं समन्वय खोजें।
3. खिड़की के कैनवास के हिस्से को कॉपी करें।
4. कैनवास को बेस 64 पीएनजी फ़ाइल में कनवर्ट करें।

function getElementScreenshot(elm) { 
    var x = findPosX(elm); 
    var y = findPosY(elm); 
    var width = elm.clientWidth; 
    var height = elm.clientHeight; 
    var cnvs = document.getElementById("aCanvas"); 
    cnvs.width = width; 
    cnvs.height = height; 
    var ctx = cnvs.getContext("2d"); 
    // To take a snapshot of entire window 
    // ctx.drawWindow(mainWindow.content, 0, 0, mainWindow.innerWidth, mainWindow.innerHeight, "rgb(255,255,255)"); 
    ctx.drawWindow(mainWindow.content, x, y, width, height, "rgb(255,255,255)"); 
    return(cnvs.toDataURL()); 
} 

---

ऊपरी बाएँ एक तत्व के समन्वय को खोजने के लिए

function findPosX(obj) { 
    var curleft = 0; 
    if (obj.offsetParent) { 
     while (1) { 
      curleft += obj.offsetLeft; 
      if (!obj.offsetParent) { 
       break; 
      } 
      obj = obj.offsetParent; 
     } 
    } else if (obj.x) { 
     curleft += obj.x; 
    } 
    return curleft; 
} 

function findPosY(obj) { 
    var curtop = 0; 
    if (obj.offsetParent) { 
     while (1) { 
      curtop += obj.offsetTop; 
      if (!obj.offsetParent) { 
       break; 
      } 
      obj = obj.offsetParent; 
     } 
    } else if (obj.y) { 
     curtop += obj.y; 
    } 
    return curtop; 
} 

---

साइडबार से browser.xul तक पहुंचने के लिए

var mainWindow = window.QueryInterface(Components.interfaces.nsIInterfaceRequestor) 
         .getInterface(Components.interfaces.nsIWebNavigation) 
         .QueryInterface(Components.interfaces.nsIDocShellTreeItem) 
         .rootTreeItem 
         .QueryInterface(Components.interfaces.nsIInterfaceRequestor) 
         .getInterface(Components.interfaces.nsIDOMWindow); 

mainWindow.gBrowser.addTab(...); 

Answer 2

कई फ़ायरफ़ॉक्स स्क्रीन कैप्चर एक्सटेंशन के डाउनलोड एक है, और देखने के लिए अपने कोड को देखो। वे इसे कैसे करते हैं। Screengrab, Fireshot , या Page Saver

Answer 3

मुझे लगता है कि यह कुछ इस तरह होगा: एक अलग iframe या ब्राउज़र के लिए प्रश्न में

1. कॉपी डोम तत्व (जो उपयोगकर्ता को दिखाई नहीं देता)
2. की खिड़की पेंट drawWindow() का उपयोग कर एक एचटीएमएल कैनवास पर iframe। यह कैसे किया जाता है यह देखने के लिए टैब पूर्वावलोकन एडन का स्रोत देखें।