I’m trying to figure out how to check image dimensions (width and height) for JPEGs and PNGs using a URL in Zapier. I thought it would be easy with Zapier Code, but it’s trickier than expected.
Zapier Code is basically Node without any extras. No jQuery, no require - just fetch for external stuff.
Has anyone dealt with this in Zapier before? I accidentally did it once and could see the image size in the next step, but I can’t recreate it.
The goal is to make sure images meet size requirements before moving forward in our process. Any tips or tricks would be super helpful!
// Example of what I'm trying to do
a async function retrieveImageDimensions(sourceUrl) {
const apiResponse = await fetch(sourceUrl);
const imageBlob = await apiResponse.blob();
// Determine how to extract width and height from imageBlob
// return { width: imageWidth, height: imageHeight };
}
I’m stuck on how to extract the dimensions from the image data. Any ideas?
Having worked extensively with image processing in Zapier, I can share a reliable method I’ve employed. Instead of relying on external packages, you can leverage the power of HTTP headers. Many image servers include dimension information in their response headers.
Here’s a simplified approach:
async function getImageSize(url) {
const response = await fetch(url, { method: 'HEAD' });
const contentLength = response.headers.get('content-length');
const contentType = response.headers.get('content-type');
// Further processing based on content type and length
// You may need to implement additional logic here
return { contentLength, contentType };
}
This method is faster as it doesn’t download the entire image. It’s not foolproof, but it works for many scenarios and can be a good starting point. You’ll need to adapt it based on the specific image servers you’re dealing with.
I’ve tackled this issue in Zapier before, and it’s definitely a bit tricky. The key is to use the ‘image-size’ npm package, which Zapier actually includes by default in their Code steps.
Here’s a working solution I’ve used:
const sizeOf = require('image-size');
async function getImageDimensions(url) {
const response = await fetch(url);
const arrayBuffer = await response.arrayBuffer();
const buffer = Buffer.from(arrayBuffer);
const dimensions = sizeOf(buffer);
return { width: dimensions.width, height: dimensions.height };
}
// Usage
const dimensions = await getImageDimensions(inputData.imageUrl);
output = { width: dimensions.width, height: dimensions.height };
This approach fetches the image data, converts it to a buffer, and then uses image-size to extract the dimensions. It’s worked reliably for me across various image types.
Remember to set your Code step’s ‘Language’ to ‘async’ to use await. Hope this helps solve your problem!
hey claire, i’ve used a workaround for this. instead of trying to get the dimensions directly, you could use a free image hosting service that gives you dimension info in the url or response headers. upload the image there first, then grab the size details. it’s not perfect but might work for your workflow!