Question

I’d like to use ImageResizer.net for a complex Pan/Zoom/Scale operation:

Here’s a pure CSS way to crop/pan/zoom an image:

<div style="width: 300px; height: 100px; overflow:hidden;">
<img height="200" style="position:relative; top: -50px; left: 5px" src="http://placehold.it/250x250"/>
</div>​

(see: http://jsfiddle.net/tbmBt/18/ for an example of this)

While this works great in most modern browsers, it is brittle, chatty, and broken in some email clients (and probably older browsers).

So… once a user is “done” with some HTML for an email (or old browser), I’d like to pull all those CSS attributes and make an image that takes them all into account, producing a new image of the correct dimensions…

I have basically already worked this out:

1. Scale source image to the correct dimensions (based on “height”
   attribute of IMG tag)
2. Crop image based on image offsets and div
   container dimensions.
3. Pad image based on cropped image size and
   container dimensions. (When no padding is needed, use JPEG at 95%
   quality, when padding is needed, use PNG, with bgcolor transparent).

This works great, but I’d prefer to use the URL API and to only have to process the image once instead of “three” times.

I believe that I could achieve this in one step using an affine transformation. At this point, I’m thinking that would require a new custom plugin (and if that’s the only way to achieve what I’m after, I might even implement it myself and Open Source it..).

Any idea about a more efficient way to do what I’m trying to do?

Answer 1

Yes, arbitrary affine transformations can be done through the URL API, but you have to know the order of events and you’ll have to split the cropping and padding into separate commands.

Cropping happens before resizing, so you’ll need to figure out your viewport dimension and split them into two sets of coordinates.

1) Crop values are x1,y1,x2,y2, in source image coordinates. You can use cropxunits=100 and cropyunits=100 to make x1,y1,x2,y2 percentages of width/height respectively if you don’t know the viewport coordinates in image dimensions. You can also use arbitrary values for cropxunits and cropyunits to make the math easier.

Negative crop values will be relative to bottom-right instead of top left, so after copying the absolute value of negative (or, for far right values, the excess amounts) into variables for padding later, set them to zero or width/height/cropxunits/cropyunits.

2) Add padding if needed with margin=left, top, right, bottom. Units are display pixels, not source pixels, so these values should be unscaled.

3) Scale – This is where you apply width=x&height=y&mode=max to get the appropriate display size. Left off, it will show 1:1 zoom, which may or may not be desired. x and y here should be the desired width/height of the image in display pixels, NOT the canvas.

See full command reference for details.

You can definitely do this as a plugin, but I’d suggest doing a javascript implementation first, then seeing if you want to bother putting the wrapping on the server in plugin form. Either way, I’ve had this question a few times and an MIT-licensed code sample would be very helpful to the community.