Magnify images with a draggable loupe

In a previous post we’ve seen how to create a magnifying glass effect with canvas. But the position of the lens was static, and of course in a useful application a user must be able to move the lens to a point of interest.

Static image of magnifying glass. Hang on for interactive version.

Draggable Vue component

To that end we’ll create a Vue component that works as a draggable loupe. The loupe hovers over an image that is likely to be downscaled (otherwise a magnifying glass is not of much use). Furthermore, we allow the image to be responsive. This means the position of the loupe in CSS pixels will not correspond to the image pixels. Since SVG elements may have their own coordinate system, let’s use SVG for the draggable, and make its coordinates match the underlying image.

<template>
    <svg class="crosshairs" :viewBox="viewBox">
        <circle
            ref="crosshairs"
            cx="0"
            cy="0"
            :r="radius * 1.4"
            :transform="transform"
        />
    </svg>
</template>

The coordinate system can be set by the parent via the viewBox property. In this way we can make the position of the loupe match with the image coordinates.

We’ll implement the draggable with GreenSock’s Draggable:

<script>
import gsap from "gsap";
import { Draggable } from "gsap/Draggable.js";
gsap.registerPlugin(Draggable);

export default {
    props: ["position", "radius", "container"],
    computed: {
        viewBox() {
            return `0 0 ${this.container.width} ${this.container.height}`;
        },
        transform() {
            //  This transform overwrites the transform that gsap sets
            return `translate(${this.position.x}, ${this.position.y})`;
        },
    },
    mounted() {
        this.createDraggable();
    },
    methods: {
        createDraggable: function () {
            const element = this.$refs.crosshairs;
            const self = this;
            Draggable.create(element, {
                type: "x, y",
                onDrag() {
                    self.$emit("update", {
                        x: this.deltaX,
                        y: this.deltaY,
                    });
                },
            });
        },
    },
};

Single source of truth

The draggable passes the change in position (deltaX and deltaY) to the parent while the user drags. The parent component then adds these deltas to the current position after which the transform property of the CrossHairs component reacts to the updated position. Usually gsap’s Draggable manages the transform property (when using type: "x,y"), but here that property is overwritten when the parent component changes position. This guarantees the Single source of truth remains by the parent component.

Now let’s turn to the parent component.

Canvas lasagne

The CanvasScrutinizer component consists of several layers. First we have a canvas to which we copy our source image. This canvas will also determine the dimensions of the container div, since the other layers are positioned absolutely. The second canvas is for drawing the magnified part of the image. Top it off with the CrossHairs component to allow the user to move the loupe.

<template>
    <div class="container">
        <canvas id="canvas_original"></canvas>
        <canvas id="canvas_magnification"></canvas>
        <CrossHairs
            :position="position"
            :radius="radius"
            :container="container"
            @update="updateCrossHairs"
        />
    </div>
</template>

The script part of CanvasScrutinizer.vue is loosely based on the technique explained in the previous post. You can check it out on CodeSandbox, along with the app.

The loupe at work

See the application with UI (set magnification factor, set loupe size, image file input) at work in the lab.