Crop and resize a group of images without losing quality

Question

I have a following example situation:

https://imgur.com/GAGqQ2p

(3 balls inside a picture)

With jquery jquery or css, I want to cut the yellow ball and then change its size (width and height). And so on for the balls I want

I was shown a method in a post: Programmatically Clip/Cut image using Javascript . But I'm losing image quality and can't change the height or width

There is my code:

function setViewport(img, x, y, width, height) {
    if (!img) {
        return;
    }

    img.style.left = "-" + x + "px";
    img.style.top = "-" + y + "px";

    if (width !== undefined) {
        img.parentNode.style.width = width + "px";
        img.parentNode.style.height = height + "px";
    }
}

Answer 1

From the sound of it, you want to manipulate an image sprite , which allows you to select and swap between segments of a single image. You can code your own but there are plugins like jquery-sprite to simplify managing sprites in jQuery. You'll get better performance using CSS sprites , however.