FireShot capturing API demonstration

Contents:

Introduction.
Demo #1: Implementing addon check .
Demo #2: Using addon to capture web pages.
Demo #3: Live FireShot application.

Introduction

Using this API and javascript you can embed web page capturing functions into your website. For example, this can be a button or event, that launch FireShot and after that you can edit the screenshot and/or:

save it to disk
upload to free image hosting resource
copy to clipboard
email
export to 3rd-party editor
print
get BASE64-encoded copies of captures (saved according to MIME type data:image/png;base64) for further processing (uploading, editing, etc)

The embedding is quick and simple.

IMPORTANT NOTICE: To be able taking web page captures using JavaScript, the following stuff should be installed and set up:

Mozilla Firefox 2 or above (http://getfirefox.com)
FireShot addon (v. 0.91 and higher) for Firefox (http://screenshot-program.com/fireshot)

Download API library and demos (3 KB)

Demo #1: Implementing addon check

FireShot addon status: unknown, press "Check Status" button

Source code:

<html>
<head>
<script type="text/javascript" src="fsapi.js" onerror="alert('Error: failed to load ' + this.src)">
</script>
<script type="text/javascript">
<//!--
	function checkFSAPI()
	{
		var element = document.getElementById("spnPluginStatus");

		if (typeof(FireShotAPI) != "undefined" && FireShotAPI.isAvailable())
			element.innerHTML = "<b>Installed and ready!</b>";
		else
			element.innerHTML = "<b>Not installed</b>, " +
			"<a href='javascript:FireShotAPI.installPlugin()'>install plugin now</a>";
	}
-->
</script>
</head>

<body>
	<p>FireShot addon status: <span id="spnPluginStatus">unknown, press "Check Status" button</span>
		<br>
		<br>
		<input type="button" onClick="checkFSAPI()" value="Check Status"/>
	</p>
</body>
</html>

Demo #2: Using addon to capture web pages

This demo shows all available ways FireShot may be used.

Source code:

<html>
<head>
<script type="text/javascript" src="fsapi.js" onerror="alert('Error: failed to load ' + this.src)">
</script>
<script>
	// Set this to *false* to avoid addon auto-installation if missed.
	FireShotAPI.AutoInstall = true;

   	function openScreenshot(mode)
	{
		var w = window.open('','View captured image','width=800,height=600,toolbar=1,scrollbars=1');
		w.document.write('<p><b>This is a captured image embedded into HTML by JavaScript.</b></p>');
		var img = w.document.createElement("IMG");
		img.src = "data:image/png;base64," +  FireShotAPI.base64EncodePage(mode);
		w.document.body.appendChild(img);
	}

</script>
</head>

<body onLoad="FireShotAPI.checkAvailability()">
<div align="center">
<form>
<p>Capture entire webpage and:</p>
<input type="button" onClick="FireShotAPI.editPage(true)" value="Edit">
<input type="button" onClick="FireShotAPI.savePage(true)" value="Save">
<input type="button" onClick="FireShotAPI.copyPage(true)" value="Copy">
<input type="button" onClick="FireShotAPI.emailPage(true)" value="E-Mail">
<input type="button" onClick="FireShotAPI.exportPage(true)" value="Export">
<input type="button" onClick="FireShotAPI.uploadPage(true)" value="Upload">
<input type="button" onClick="FireShotAPI.printPage(true)" value="Print">
<input type="button" onClick="openScreenshot(true)" value="Embed screenshot into webpage">
<br><br>

<p>Capture visible part and:</p>
<br>
<input type="button" onClick="FireShotAPI.editPage(false)" value="Edit">
<input type="button" onClick="FireShotAPI.savePage(false)" value="Save">
<input type="button" onClick="FireShotAPI.copyPage(false)" value="Copy">
<input type="button" onClick="FireShotAPI.emailPage(false)" value="E-Mail">
<input type="button" onClick="FireShotAPI.exportPage(false)" value="Export">
<input type="button" onClick="FireShotAPI.uploadPage(false)" value="Upload">
<input type="button" onClick="FireShotAPI.printPage(false)" value="Print">
<input type="button" onClick="openScreenshot(false)" value="Embed screenshot into webpage">
</form>
</div>
</body>
</html>

Demo #3: Live FireShot application

This demo shows how to check whether FireShot is installed and how to capture current web page and send it via e-mail.

Source code:

<html>
<head>
<script type="text/javascript" src="fsapi.js" onerror="alert('Error: failed to load ' + this.src)">
</script>
<script>
<//!--
	// Set this to *false* to avoid addon auto-installation if missed.
	FireShotAPI.AutoInstall = true;
-->
</script>
</head>

<body onLoad="FireShotAPI.checkAvailability()">
<div align="center">
<form>
	<p>See errors at the page?</p>
	<input type="button" onClick="FireShotAPI.emailPage(true)"
		value="Click to email this page how you see it.">
</form>

</div>
</body>
</html>

Download API library and demos (3 KB)

FireShot API at Google code

Features requests / Bug reports


Firefox	Chrome	Thunderbird	SeaMonkey	Internet Explorer