Comment by yread

There is opensource component that does this: Open Seadragon https://openseadragon.github.io

You pass a big image to "vips dzsave" http://www.vips.ecs.soton.ac.uk/index.php?title=VIPS and it creates a .dzi file describing the tiles and a set of directories with zoomed in tiles. Then you add a div to your HTML and execute this js

    viewer = new OpenSeadragon({
                    id: "openseadragondiv",
                    prefixUrl: "/Scripts/openseadragon/images/"
                });
    viewer.open(pathToDZI);

It also has plenty of useful plugins, eg. Scale bar https://pages.nist.gov/OpenSeadragonScalebar/ or Annotations (to draw on the image) https://github.com/Emigre/openseadragon-annotations