Question

this is just a quick probe to see if this is technically possible.

I’m wanting to enable the resizing of an image in the browser (also within a contentEditable area). Firefox and IE already allow this to be done with their inbuilt handles and it works fine. I’m wanting to implement something for Safari however because it doesn’t support this natively.

I’ve had a go with jQuery’s resizable method and it does a very good job, however it relies on inserting a bunch of div’s along with the image and wrapping that in a big div. This would normally be fine if we weren’t concerned with the code generated in the contentEditable area, but we are because it’s going to be saved back to the server. I could strip this extra stuff out on save, but I was thinking, is it technically possible to create a resizing script for images that doesn’t rely on adding extra div’s? Even if we decide to go without handles for now, and just concentrate on detecting when a user is close to the edge of the image, change the mouse cursor to a resizing one, and detect clicks and drags in the 5px’s around the edge of the image, is this possible?

If it’s possible, I’m assuming (hoping) that perhaps it’s already been done, but my searching hasn’t turned up anything so far.

Keen to hear any ideas 🙂

Answer 1

Here’s the start of something perhaps. It is just in javascript, but you could easily bring it over to jQuery.

PLEASE NOTE:

The onmousedown and onmouseup would normally be on the image instead of the document, but since I don’t have any kind of handle, you just end up dragging the image itself (in Safari anyway).

So the way it is right now, you need to click OUTSIDE the image in order to resize it.

img {
    width: 400px;
    height: auto;
    position: relative;
}

var positionX;
var startWidth;
var image = document.getElementById('image');
document.onmousedown = function(e) {
    if(!e) e = window.event;
    positionX = (e.clientX);
    startWidth = image.width;
    document.onmousemove = function(e) {
        if(!e) e = window.event;
        image.style.width = (startWidth + (e.clientX - positionX)) + 'px';
    }
}
document.onmouseup = function() {
    document.onmousemove = null;
    positionX = null;
    startWidth = null;
}


<img id="image" src="http://mydomain.com/myimage.jpg" />