Jayd Saucedo

Blog

Image Resizer Chrome Extension
About a month ago I posted about an image resizer I was making. I ended that post explaining my plans for the "custom resize" function. I tried and tested a number of methods for this but the method that seemed to work well is the one posted below. It may not work in IE because I butchered it in an attempt to fix another problem you'll learn about if you keep reading.

Give it a click:

Lorem ipsum dolor sit amet, consectetur as dignissim, justo malesuada placerat porttitor, eros libero rutrum ante, eget faucibsequat. Fusce fermentum, nisi nec porttitor interdum, mauris ipsum porta diam, non tempor velit tellus vel ante. Aliquam felis diam, aliquet ut vestibulum pharetra, suscipit ac velit. Ut vel lectus sem. Ut pulvinar, sem id luctus luctus, tellus neque dignissim risus, ut euismod dui eros quis magna. Mauris sed elementum nisl. Nam viverra egestas magna, a euismod nulla viverra in.

I tried resizing live while you were dragging the image but as the image moved around as well as text that the image size affected it proved difficult to keep track of the size of the image. So I made it stationary! In my final version you can preserve the image's ratio With a press of the "Shift" key.

The ability to determine the proper height or width based on the distance of the mouse from the corner of the image took a bit of work because I did not want to resize the image to the right if it would create a horizontal scroll. So I had to find a way to resize the image while preserving the location of its right most corner.

What it would be originally:

mouseposY ie ? (document.documentElement.scrollTop+e.clientY) : (window.pageYOffset+e.clientY);
mouseposX ie ? (document.documentElement.scrollLeft+e.clientX) : (window.pageXOffset+e.clientX);
new_img.height = (mouseposY rez_div.offsetTop);
new_img.width = (mouseposX new_img.offsetLeft);

First I had to determine the mouse position and then just subtract the location of the image from that.

What resizing to the left looks like:

new_img.height = (mouseposY rez_div.offsetTop);
// wherever the rezbox is plus its width gets the right corner of it minus the mouse position gets how far you are from that position
new_img.width = (rez_div.offsetLeft mxwidth mouseposX);
// manually setting the image location, rezbox plus its width minus however big the image already is
new_img.style.left rez_div.offsetLeft mxwidth new_img.width+'px';

The height is the same because resizing to the left or right doesn't affect that. However, to resize to the left I first had to determine where the right corner of my resizing box was and then determine how far away my mouse was from that. Then, on top of all that, I had to shift my image so it wouldn't change position while resizing. To achieve this I took the location of my resizing box plus the width of the resizing box, to get the right corner, and then subtract however wide I just made the image.

One thing that really slowed me down is that offsetLeft doesn't really mean offsetLeft, it's in fact, meaningless. So I had to create my own function to find the offset of an object.

Finding the true offset function:


// ob  is object to get offset of, type is top or left: left = 0 top = 1
function realOffset(obtype){
    if(
type == 0){
        
offLeft ob.offsetLeft;
        
//alert(ob.nodeName+' - '+ob.offsetLeft);
        
while(ob != document.body){
            
ob ob.offsetParent
            
offLeft += ob.offsetLeft;
            
//alert(ob.nodeName+' - '+ob.offsetLeft);
        
}
        return 
offLeft;
    }
    else{
        
offTop ob.offsetTop;
        while(
ob != document.body){
            
ob ob.offsetParent
            
offTop += ob.offsetTop
            
        
}
        return 
offTop;
    }
    return 
false;
}

The type variable determines wether to find the offset left or offset top. To find the real offset you have to go through every parent object and find the offset of that. Luckily, there's something called "offsetParent" that makes this process a little less painful.

So, I got all that working. Last thing I need to do is stick it in the vbulletin plugin system and everything should work, right? Well, works in Chrome, Firefox, Opera, Safari, and every other browser. Excluding, of course IE. As unsurprising as this may be to some it came as a complete surprise to me. I tested this in IE 8-5 and it worked flawlessly. Somehow the act of putting it on a forum breaks it. The strange thing is that the thing that seems to break it is the fact that IE isn't returning an image width or height. No image width at all. So the only thing I could come up with is to see if the script was somehow executing before IE was able to determine its width or height. No luck, so I tried using some other attribute to determine its width and height. ClientWidth and ClientHeight perhaps? Nope. Nor did any of the other ones work. I spent a great deal of time on this. What was so special about VBulletin that it broke my script in IE and how can I simulate this?

After a while of tinkering with that I realized that I'd like this script on every website. I was tired of huge images I had to scroll past. So that was the answer to my IE problem. To forget about it completely and instead make a Chrome extension, which proved incredibly easy. Somehow Google made creating extensions in Chrome near effortless, an extension can be made entirely in javascript and to load it into chrome all you have to do is make a tiny little file that tells chrome what to do with it.

Here's my little file:

{
  
"name"" Resizer thing",
  
"version""1.0",
  
"description""The resizer thing I made.",
  
"content_scripts": [
    {
      
"matches": ["http://*/*"],
      
"css": ["css.css"],
      
"js": ["rezbox.js"]
    }
  ]
}

First couple of lines are pretty self explanatory. The whole "content scripts" thing is telling chrome where my files are and what I want to do with them. Basically, I tell it to match every possible url (starting with http) and then include a css style file and my javascript to resize images. To automatically resize images I wait until the page loads and then I run through every image on the page.


onload 
= function(){
    for(
i in document.images){
        
poo(document.images[i]);
    }
}


mh window.innerHeight;
mw window.innerWidth;

I have the max size set to that of my browser's viewport! This is nowhere near completion, I still need to iron out some things and make my max size algorithm a little more like an algorithm. If you want to take your chances you can download it here!