Serve placeholder images with Client Hints (DPR, Width, Viewport Width) as text

client-hints-as-image.js

const request = require('request')

module.exports = () => (req, res, next) => {
    const dpr = parseFloat(req.headers.dpr)
    const width = toInteger(req.headers.width)
    const viewportWidth = toInteger(req.headers['viewport-width'])
    const imageWidth = width || Math.round(viewportWidth * dpr)
    const imageHeight = Math.round(imageWidth/2)
    
    request(`http://via.placeholder.com/${imageWidth}x${imageHeight}?text=` + [
            `DPR: ${dpr}`,
            `W: ${width ? width : '?'}`,
            `VPW: ${viewportWidth}`
        ].join(', '))
        .pipe(res)
}

function toInteger(value) {
    const int = parseInt(value, 10)
    return isNaN(int) ? undefined : int
}

server.js

const clientHintsAsImage = require('./client-hints-as-image');
const express = require('express');

const app = express();
app.use(/.*\.(jpg|png)/, clientHintsAsImage());
app.listen(process.env.PORT);