firefox addon sdk 1.17 take screenshot - javascript

I'm developing a Firefox add-on using sdk 1.17. It contains a panel with a button inside (Developed using ExtJs), I want to take the screen shot of the current page when user clicks the button. In Google chrome there is an API (chrome.page-capture) is there. But I could not find the similar one in Firefox. In firefox how to do this task from the main.js.

O.k I have found the answer. This code can be used to take the full page screen shot.
In your main.js add this code.
var window = require('sdk/window/utils').getMostRecentBrowserWindow();
var tab = require('sdk/tabs/utils').getActiveTab(window);
var myData;
tabs.activeTab.attach({
contentScript: "self.postMessage(document.body.scrollHeight);",//recieves the total scroll height of tab
onMessage: function(data)
{
console.log("Tab data received: " + data);
myData = data;
var thumbnail = window.document.createElementNS("http://www.w3.org/1999/xhtml", "canvas");
window = tab.linkedBrowser.contentWindow;
thumbnail.width = window.screen.availWidth ;
thumbnail.height = window.screen.availHeight ;
var ctx = thumbnail.getContext("2d");
var snippetWidth = window.outerWidth ;
var snippetHeight = window.outerHeight ;
ctx.canvas.left = 0;
ctx.canvas.top = 0;
ctx.canvas.width = window.innerWidth;
ctx.canvas.height = myData;//canvas height is made equal to the scroll height of window
ctx.drawWindow(window, 0, 0, snippetWidth, snippetHeight+myData, "rgb(255,255,255)");//
var imageDataUri=thumbnail.toDataURL('image/png');
imageDataUri = imageDataUri.replace("image/png", "image/octet-stream");
tabs.open(imageDataUri);
}
});
This is done with addon sdk 1.17. Works cool.

Related

Can I "freeze" fixed elements to take a screenshot with getDisplayMedia?

I'm implementing a chrome extension with javascript to take a screenshot of a full page, so far I've managed to take the screenshot and make it into a canvas in a new tab, it shows the content of a tweet perfectly, but as you can see, the sidebars repeat all the time (Ignore the red button, that's part of my extension and I know how to delete it from the screenshots) screenshot of a tweet
This is the code I'm using to take the screenshot:
async function capture(){
navigator.mediaDevices.getDisplayMedia({preferCurrentTab:true}).then(mediaStream=>{
scrollTo(0,0);
var defaultOverflow = document.body.style.overflow;
//document.body.style.overflow = 'hidden';
var totalHeight = document.body.scrollHeight;
var actualHeight = document.documentElement.clientHeight;
var leftHeight = totalHeight-actualHeight;
var scroll = 200;
var blob = new Blob([document.documentElement.innerHTML],{ type: "text/plain;charset=utf-8" });
console.log('total Height:'+totalHeight+'client height:'+actualHeight+'Left Height:'+leftHeight);
var numScreenshots = Math.ceil(leftHeight/scroll);
var arrayImg = new Array();
var i = 0;
function myLoop() {
setTimeout(function() {
var track = mediaStream.getVideoTracks()[0];
let imgCapture = new ImageCapture(track);
imgCapture.grabFrame().then(bitmap=>{
arrayImg[i] = bitmap;
window.scrollBy(0,scroll);
console.log(i);
i++;
});
if (i <= numScreenshots) {
myLoop();
}else{
document.body.style.overflow = defaultOverflow;
saveAs(blob, "static.txt");
printBitMaps(arrayImg, numScreenshots, totalHeight);
}
}, 250)
}
myLoop();
})
}
async function printBitMaps(arrayImg, numScreenshots, totalHeight){
var win = window.open('about:blank', '_blank');
win.document.write('<canvas id="myCanvas" width="'+arrayImg[0].width+'px" height="'+totalHeight+'px" style="border:5px solid #000000;"></canvas>');
var e = numScreenshots+1;
function printToCanvas(){
setTimeout(function(){
var canvas = win.document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.drawImage(arrayImg[e], 0, 200*e);
e--;
if(e>=0){
printToCanvas();
}
},10);
}
printToCanvas();
}
Do you know any way by CSS or javascript that I can use to make the sidebars stay at the top of the page so they don't keep coming down with the scroll?
It's not really a case of "the sidebars ... coming down with the scroll" - the code you're using is taking a first screenshot, scrolling the page, taking another screenshot and then stitching it onto the last one and iterating to the bottom of the page. Thus it's inevitable you're seeing what you see on the screen at the point you take the subsequent screenshots.
To resolve your issue, after your first screenshot you would need to set the div element for the side bar to be display=None by use of CSS. You can find details of the side bar by using the browser Dev Tools, right clicking an using "Inspect" in Chrome.
From what I can see, Twitter seems to use fairly cryptic class names, so it might be easiest and more robust to identify the div for the side bar with some other attribute. It appears they set data-testid="sidebarColumn" on it so give using that a go (but YMMV).

Jquery height resize not working on mobile

I'm using jquery to resize an image on a mobile website: http://www.loiristorantino.com.br/mobile
On browser, if you resize your screen, it works fine but on mobile it's not working. Here's the code that I'm using:
var $inner = $('.inner');
var height = parseInt($inner.height()) + parseInt($inner.css('top'));
$('.tumb-img-border').css('height', height);
var doit;
function resizedw(){
var $inner = $('.inner');
var height = parseInt($inner.height()) + parseInt($inner.css('top'));
$('.tumb-img-border').css('height', height);
}
window.onresize = function() {
clearTimeout(doit);
doit = setTimeout(function() {
resizedw();
fontResuze();
}, 100);
};
I think it's something related with Jquery but I don't know how to change it to javascript.
Can you guys help me with this issue?
Ok, so I found the solution by myself. Since I got this resize function on google, this solution might help others. I just changed the following line and it worked:
//var height = parseInt($inner.clientHeight());// + parseInt($inner.css('top'));
var newheight = $('.inner').height();
$('.tumb-img-border').css('height', newheight);

Display annotations/hyperlinks using pdf.js

I've managed to display a sample PDF file using mozilla's pdf.js. On the 1st page of the PDF file there is one internal link to page 2 and one external link to google.com.
My next step is getting the links in the sample PDF to work (be clickable) and I'm struggling with this one.
At the moment all I can do is get the links/annotations and print them to the console. Can anyone help me render these links to the annotations div layer?
I've looked through the pdf.js docs but I can't quite find what I'm looking for... I'm just looking to add this clickable links feature to the simple code below.
Here is a code pen of my progress so far: http://codepen.io/laurencemeah/pen/ONrJXj
var pdfFile = 'URL PATH TO PDF FILE';
var pageNum = 1;
PDFJS.getDocument(pdfFile).then(function(pdf) {
pdf.getPage(pageNum).then(function(page) {
var desiredWidth = document.getElementById('pdf-holder').getBoundingClientRect().width;
var viewport = page.getViewport(1);
var scale = desiredWidth / viewport.width;
var scaledViewport = page.getViewport(scale);
var canvas = document.getElementById('pdf-canvas');
var context = canvas.getContext('2d');
canvas.height = scaledViewport.height;
canvas.width = scaledViewport.width;
var renderContext = {
canvasContext: context,
viewport: scaledViewport
};
page.render(renderContext);
page.getAnnotations().then(function(data) {
console.log(data);
// now display them in annotation layer div
});
});
});
#pdf-holder {
width: 100%;
height: auto;
<script src="http://mozilla.github.io/pdf.js/build/pdf.js"></script>
<div id="pdf-holder">
<canvas id="pdf-canvas"></canvas>
<div id="annotation-layer"></div>
</div>

Transit js code to newly opened window

Sorry for my Bad language skills.
I rewrite this question 10 times. But still hard to express my question...
My Question
I hope to know how to transit js code to newly opened window.
My situation
I have opening new window event and window resizing event js code
//When user click <a id="new-window">new window</a>, new window come up.
$('#new-window').click(function (){
var videoWidth = $(window).width()/2;
var videoHeight = videoWidth/5*3;
var windowWidth = videoWidth + 20;
var windowHeight = videoHeight + 20;
var w = window.open('', '', 'width=' + windowWidth + ', height=' + windowHeight);
//$(#video) is the
var html = $("#video").clone().attr({
"width" : videoWidth,
"height" : videoHeight
});
$(w.document.body).html(html);
event.preventDefault();
});
function videoFit() {
var videoScreen = $(window).width();
$('#video').css({'width': videoScreen, 'height':videoScreen/5 * 3});
}
$( window ).resize(function(){
videoFit();
});
But when I open developTool(chrome) in new window, there are no js files and css files which I put in the parent window.
following code just adjusted to parent window.
Is there any solution to transit js code?
Thank you for read my questions.

jQuery changing the size of Video players

James here. I'm working on a project (actually two projects that both require the same code) that deals with posts, except the content is always 100% of the users screen, and uses jquery to divide the width to make the same amount of columns no matter what screen resolution. I'm having a trouble with video posts however. If anyone could help me write (or write, that'd be way more helpful) a script that forces a default 500px video to the width of the posts? The script that I'm using to divide posts is as follows. Any answers at ALL would be helpful. Oh and I'm bumping this because it's almost a week old, and I have still not received a working script.
var container = function(){
var posts = $(document).width() - 40;
var entry = (posts - 200) / 5;
$("#posts").css("width", posts);
$(".entry").css("width", entry);
$("img.photo").css("width", entry - 22);
}
container();
The site I'm doing this on is http://jamestestblog5.tumblr.com
Thank you to anyone who can help with this, it's REALLY bothering me!
Hiya please see demo here : http://jsfiddle.net/ytcAk/
you can read the logic when you click grow button.
fork from old solution. :) (please let me know if this is what you are looking for if not I will remove this post)
Jquery code
function increaseVideoSize() {
var columnWidth = 450; // width of your content column - any
var defaultVideoWidth = 400; // theme tag width - 400,500
var increaseRatio = columnWidth/defaultVideoWidth;
$(".video-post").each(function() {
var iframe = $("iframe", this);
if(iframe.length>0) {
var currHeight = iframe.height();
var newHeight = currHeight * increaseRatio;
iframe.height(newHeight).width(columnWidth);
} else {
var object = $("object", this);
var embed = $("embed", object);
var currHeight = object.attr('height');
var newHeight = currHeight * increaseRatio;
object.width(columnWidth).attr('height', newHeight);
embed.width(columnWidth).attr('height', newHeight);
};
});
};​

Categories