Image resolution checking

Grafana k6 OSS Support
1

Hi team,

I wanted to know if it’s possible some how to check the image resolution with K6.
Our tool allows us to do some transformations on an image, and we want to test how fast that service is.

I added below code in the K6 default function to be able to verify transformation took place. But I am running into an issue.

    var img = new Image();
    img.onload = function() {
        console.log(this.width + 'x' + this.height);
    }
    img.src = '${__ENV.URL}/transform/${image}.jpg';

ReferenceError: Image is not defined

Is something like this currently possible with K6?

Thanks in advance.
Rody

2

Hi Rody,

that’s not easily done with plain k6. The reason you’re getting that ReferenceError is because the Image() API is not part of the ECMAScript standard, which k6 exclusively supports.

Technically, you could work with the binary image data and manually decode the specific image format and extract the width and height from the image header. You’d need to consult the specification on how the image data is structured for your specific format, locate the the header and extract the metadata that you need. That’s a bit out of scope for what we can help you here, but it should be something like:

const response = http.get('https://example.com/image.png', { responseType: 'binary' });
const imgData = new Uint8Array(response.body);
// decode image data ...

You can find tutorials online for how to do this. See this and this for PNG, for example. Or you might want to try pure JS decoders, e.g. pngjs. Just keep in mind that any libraries you import shouldn’t depend on NodeJS or browser APIs to work with k6.

Alternatively, you could give xk6-browser a try. It’s a k6 extension that allows you to run JS directly in the browser. So you would be able to do something like:

page.goto('https://example.com/', { waitUntil: 'load' });
const dimensions = page.evaluate(() => {
  const img = document.getElementById('imageid');
  return { width: img.clientWidth, height: img.clientHeight };
});
console.log(dimensions);
3

Thanks for the thorough explanation much appreciated @imiric !
I will check them both. The XK6 browser looks really interesting for my use case, did not know this existed.

Kind regards,
Rody

4

Hi @imiric ,

It works for me when I run it locally with one of the examples as shown on the docs from Github.
When I try to run this(which also comes from the docs: it will return an error

import { chromium } from 'k6/x/browser';

export default function() {
    const browser = chromium.launch({ headless: false });
    const context = browser.newContext();
    const page = context.newPage();
    page.goto('http://whatsmyuseragent.org/', { waitUntil: 'load' });
    const dimensions = page.evaluate(() => {
        return {
            width: document.documentElement.clientWidth,
            height: document.documentElement.clientHeight,
            deviceScaleFactor: window.devicePixelRatio
        };
    });
    console.log(JSON.stringify(dimensions));
    page.close();
    browser.close();
}

Screenshot 2022-09-05 at 17.53.55
Screenshot 2022-09-05 at 17.53.551334×510 34.9 KB

5

I see the issue, probably you guys updated the launcher, but the docs are not updated (https://github.com/grafana/xk6-browser):

If I run it like this:

import launcher from "k6/x/browser";

export default function() {
    const browser = launcher.launch('chromium', { headless: true });

It works :slight_smile:

6

Ah, sorry about the confusion.

So the JS API docs are up-to-date with the latest stable version (v0.4.0), while the README on GitHub shows examples based on the in-development main branch, where we did this breaking import change. This will soon be released as v0.5.0, and the JS docs will be updated to match. :slight_smile:

1 Like