Saving images from the National Library of Scotland website

saving nls images.js

// Disclaimer:
// This is a tool for saving images from the National Library of Scotland website and should
// only be used on images whose copyright is expired. I don't condone other uses of this code.
// Use at your own risk etc.

// This code isn't very good and doesn't work perfectly - I'm not a JavaScript developer and
// I can't dedicate more time to this.
// Urls this works on will look like this: https://maps.nls.uk/view/103313042

// Instructions:
// 1. Go to the url of the image you want to save.
// 2. Open the developer console (Ctrl+Shift+I on Firefox) and paste this code.
// 3. Replace the number in quotes, below, with the number from the url.

const image_id = "103313042";

// 4. Run the code. After a pause, the page will get much larger and the stitched-together image
//    should appear below the map on the page. There will most likely be chunks missing from the
//    image. Reload the page and re-run the code. Do this repeatedly and eventually all tiles
//    will be filled. You can tell when you should reload because the data transfer in the
//    network tab will have stopped.
// 5. Right-click the image and download it. It might take a while for the save dialog to appear,
//    but it will eventually.

const base_url = "https://map-view.nls.uk/iiif/2/" + image_id.slice(0, 5) + "%2F"
const max_tile_size = 512;
var image_array = [];
var canvas;
var ctx;
var offscreen_canvas;
var offscreen_context;

get_image_dimensions(image_id);

async function get_image_dimensions(image_id) {
    let url = base_url + image_id + "/info.json";
    let json = await (await fetch(url)).json();
    got_image_dimensions(json["width"], json["height"]);
}

function got_image_dimensions(width, height) {
    canvas = document.createElement("canvas");
    canvas.width = width;
    canvas.height = height;
    document.body.appendChild(canvas);
    ctx = canvas.getContext("2d");
    offscreen_canvas = new OffscreenCanvas(width, height);
    offscreen_context = offscreen_canvas.getContext("2d");

    let x = 0;
    let y = 0;

    while (y <= height) {
        while (x <= width) {
            const img = new Image();
            img.src = base_url + image_id + "/" + x + "," + y + ",512,512/full/0/default.jpg";
            image_array.push([img, x, y]);
            x += max_tile_size;
        }
        x = 0;
        y += max_tile_size;
    }
    render_tiles_background();
}

function render_tiles_background() {
    let images_total = image_array.length;
    let rendered_images = 0;

    for (let i = 0; i < image_array.length; i++) {
        if (image_array[i]) {
            const img = image_array[i][0];
            const x = image_array[i][1];
            const y = image_array[i][2];
            if (img.complete) {
                offscreen_context.drawImage(img, x, y);
                image_array[i] = undefined;
                rendered_images += 1;
            }
        }
    }
    if (rendered_images != images_total) {
        window.requestAnimationFrame(render_tiles_background);
    }
    window.requestAnimationFrame(render_main);
}

function render_main() {
    ctx.drawImage(offscreen_canvas, 0, 0);
}