Prismic image downloader

README.md

Prismic image downloader

For downloading full-res Prismic images in a choice of formats. The image you want must've loaded on the page before you click the bookmarklet, as otherwise the lazy loading gets in the way.

You can make it into a bookmarklet here - unfortunately we can't put js links in markdown here.

source.js

const formats = ['jpg', 'jp2', 'png']
const getFormatUrl = (originalUrl, format) => {
    const clonedUrl = new URL(originalUrl);
    const keys = Array.from(clonedUrl.searchParams.keys());
    keys.forEach(key => clonedUrl.searchParams.delete(key))
    clonedUrl.searchParams.set('fm', format);
    return clonedUrl.toString();
};
document.querySelectorAll('img[src^="https://images.prismic.io"]').forEach(img => {
    const src = new URL(img.getAttribute('src'));
    const select = document.createElement('select')
    const defaultOption = document.createElement('option')
    defaultOption.setAttribute('value', '');
    defaultOption.textContent = "- Download format -"
    select.appendChild(defaultOption);
    formats.forEach(fmt => {
        const option = document.createElement('option')
        option.setAttribute('value', getFormatUrl(src, fmt))
        option.textContent = fmt;
        select.appendChild(option);
    });
    select.style.position = 'absolute';
    select.style.top = 10 + 'px';
    select.style.left = 10 + 'px';
    select.style.zIndex = '10000';
    select.addEventListener('change', (event) => {
        const downloadUrl = event.target.value;
        window.open(downloadUrl, '_blank');
    })
    img.parentNode.insertBefore(select, img.previousSibling)
})