I need to resize an image on dragging handlers which are placed in all 8 directions.
If any of handlers is dragged inwards, then entire image size should be reduced and if dragged outward, the image size should be increased. In any case, image quality should be preserved.
How can we achieved this?

Thanks in advance

there are thousands of them pre-written

Image quality will not be preserved on resize unless the image is downloaded at the largest possible size and resized smaller by <img width height> controls
if the image is displayed at 320*320 and physically is 320*320 enlarging the image makes the browser create 'best fit' interpolated pixels so the resolution is reduced.
Hi-res images add to page load delay times which is undesirable so there is a juggling act between image quality of the resized image, image quality of the original image, how much %age of the users are likely to resize the image, how much page delay is acceptible, as to what size the image is.