Thursday, January 19, 2012

Firefox extension: Full Screen Image Viewer


You can easily view images of a page in full screen with Full Screen Image Viewer extension. Just right-click on the Firefox browser and find the *Full Screen Image Viewer* item from the Context Menu.




The Image Viewer can also open the image links on a web page or your local disk. You can use it as a local image viewing application.


Control Buttons

After you click on the *Full Screen Image Viewer* menu on the Context Menu, the first image is shown. Below the image are the control buttons:

Jump to the first image.
Show the previous image.
Show the next image.
Jump to the last image.
Rotate the image -90°.
Rotate the image 90°.

Toggle image filter. (See Image Filter section below.)
Help.
Close/Exit Image Viewer.

To the left of the control buttons is the information shows the current image number of the total image number.

Image Filter

There could be many small icons on a web page. You usually don't want to view them in Image Viewer. If Image Viewer detects the image is small than the size you want to filter, it will not include the image in its showing list. The default showing size is 100px for both width and height. You can change it in the Options dialog.

You can also select whether to filter images in the Options dialog.

If the size of the image is unknown -- e.g. the image has not been loaded in the web page yet, or it is an image link -- the image will be included into the showing list. After it is loaded, its size is known and will not be included the next time if its size is too small.

Shortcut Keys

    Home : Jump to the first image.
    Left Arrow : Show the previous image.
    Right Arrow : Show the next image.
    End : Jump to the last image.
    Down Arrow : Rotate the image -90°.
    Up Arrow : Rotate the image 90°.

    F2 : Toggle image filter. (See Image Filter section below.)
    F1 : Help.
    ESC : Close/Exit Image Viewer.

Install it from the official Mozilla Firefox Addons website

https://addons.mozilla.org/en-US/firefox/addon/full-screen-image-viewer/

Bookmark and Share
Posted by Zen 0 comments
Labels: ,

Tuesday, January 17, 2012

Javascript: setting image width/height in pixels, cannot use "px"


The *img* element has its own width and height property. You can resize an image by setting its width and height property or by setting its style property, e.g.

   imageElement.width = "100";
      or
   imageElement.style.width = "100px";

They both resize the width of the image to 100 pixels.

You may notice that one is set with "px" at the end, the other is without. If you try the following code, you can find "px" is not needed in the 3rd case:

<html>
<head>
<script type="text/javascript">
function changeSize1()
{
  document.getElementById("b1").style.width="300px";
  document.getElementById("b1").style.height="300px";
}
function changeSize2()
{
  document.getElementById("b2").style.width="300";
  document.getElementById("b2").style.height="300";
}
function changeSize3()
{
  document.getElementById("b3").width="300px";
  document.getElementById("b3").height="300px";
}
function changeSize4()
{
  document.getElementById("b4").width="300";
  document.getElementById("b4").height="300";
}
</script>
</head>
<body>

Click the image to change size. <br /><br />
image 1: <img id="b1" onclick="changeSize1()" src="" /><br />
image 2: <img id="b2" onclick="changeSize2()" src="" /><br />
image 3: <img id="b3" onclick="changeSize3()" src="" /><br />
image 4: <img id="b4" onclick="changeSize4()" src="" /><br />

</body>
</html>

The code of the 3rd function:

  document.getElementById("b3").width="300px";
  document.getElementById("b3").height="300px";

will cause the size of the image becomes 0. "px" cannot be used with the width/height property of *img*.

Bookmark and Share
Posted by Zen 0 comments
Labels: , , , ,

Saturday, January 14, 2012

Firefox extension programming: insert an image to the document


The Firefox extension can insert things to the document you are viewing. This document (or web page) is not the one the Firefox extension is referring as the *document* element. To access it, one of the methods is to use:

      var doc = getBrowser().contentWindow.document;

Now *doc* is the document object of the current page in the content window.

To insert a paragraph to the bottom of the current page, you can simply do:

      var p = doc.createElement('p');
      p.textContent = 'Hello world!';
      doc.body.appendChild(p);

Now back to the topic. If I want to insert an image into the current page, how should I do it? Supposed the image is stored as chrome://myextension/skin/myimg.png, will this work?

      var img = doc.createElement('img');
      img.src = 'chrome://myextension/skin/myimg.png';
      doc.body.appendChild(img);

That would not work. The content document has no access to that image in the local disk.

To make it work, you may put the image on the internet so img.src can point to it. Or you can use an *iframe* to embed chrome://myextension/skin/myimg.png (I haven't tried this but I think it should work.) If the image is not big -- e.g. an icon, here is a more interesting way to do it:

1) Calculate the Base64 encoding of the imge file. If you are using Linux, that is easy, just run:

      $ base64 myimg.png

2) Set the img.src as data type with the output Base64 encoding of the image file.

      img.src = 'data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAA3XAAAN1wFCKJt4AAAAB3RJTUUH1QsKEAYBqzHCKQAAAxFJREFUOMvVlU+IHEUUh7/q6prent6dzc5mFxcUMQZEI4qI6EESwYsHzdGjomchRwmYDZJcPCt4WYIHg+QUTIgg63V1RSNuFmOMJuqazIQ9ZDM7f3u7qp6H6WlnMmiU5GJDUd393vv61e9VvYb/26WWTiy9CyzeY+6xEFg8+PJBsdaqf/IUEf6N3RjD2XNnj4QAzjn1wUdn+HbtZwZ0Afq+gnhBkMIgInikuBcEEXh07wMcfutVAEIApRQr3/zInieeJwgCjHbEseNmQ2OdxzqPcx4A6wTrHNb6EZu1nvXLF1FK/QUGCLWiOp1w/30prxyYpFqp8tnKVb5eSwpAH5yD3G1g52k2dSFNAQ6CgKkk4pl9KXsWXkApw/6nm1zZ2KHbUzjfBzsnOJ/Deg2cTvJ3Qq+mC63DgfCBUlTKEdstTWprGD3NVqNJEu0iCsEPwL4PcTaj0ajTbmwy+eABrPMEAeMZK2AyLlHfnOOL1UtUp3f4ZaPKZLmE91Jk4r3gvfDHT9/hrOVm/QrJ7EPMLTzCb6Ee11gFUEkiUIp2J6HdFkohmCSv/AAswmbtd65eXOXhx/f3ZbRN5mYSTBiMZiwi2Cyju705ujfzLeVFSNMMgF6asr76OcZEZN1bhKbE7vkFdpo3sFlKkOtRZLzdbHHi5BmGN7L3nlanS6vVLYoXhY5ymIEIv9bP47xw/uQ5PIrZSmlUiqKSpQgRcM6ROYe1Qmgm2DUzMboS7+i1b9FqdzBRgqZDZXoeE/pxsAgYExfB8Z26we55bJbS62zz1GP7iCbKTJU19Ru1USm01sxWZ/9Tp9na2qJUinnpxeeYmYoxxrB24QJaB4cK8LNP7uX7S5fv3A4Z71VGC9571n9YB2TpjdfffD8EiOOYtw+9Nhw9ClF/DxYRvvxqhWvXNqhdv/7h4pGjhwFC7/3x05+efuduG/Dy8vJ7pz459THgAFF5PgaI8ppN5M8hoIdGmAfZodkCGdABekA6DB4sVg/BBkfID7Vnlc/Dgkk+fP4RP/BRjClbQG//ZchYHUdtI/Y/AcKMnti9YBGeAAAAAElFTkSuQmCC';

Remember to prepend 'data:img/xxx;base64,' to the Base64 encoding. For example, add prefix 'data:img/png;base64,' if your image is PNG.

Bookmark and Share
Posted by Zen 0 comments
Subscribe to: Posts (Atom)
 
 Get This <