I’m working on a Zapier automation where I need to check the width and height of images from URLs. The images are mainly JPEGs and PNGs. I thought this would be straightforward using Zapier’s Code by Zapier, but I’m running into limitations.
The JavaScript environment in Zapier is pretty restricted. It’s basically vanilla Node.js without jQuery or the ability to import external libraries. The only HTTP tool available is the fetch function.
I’m wondering if anyone has tackled this problem before in Zapier. I vaguely remember getting image dimensions to show up in a subsequent step once, but I can’t figure out how I did it.
My goal is to validate that images meet specific size requirements before the workflow continues processing. Any suggestions on how to extract image dimensions in this limited environment would be really helpful.
theres actually a simpler way - use canvas to load the image data. create an offscreen canvas context, draw your fetched image blob onto it, then grab the canvas dimensions. just convert your fetch response to a blob first, then use createImageBitmap() to get something you can draw. way less parsing headaches than messing with binary data, and it dodges most cors issues since you’re working with actual pixel data.
Been there! Here’s a workaround that doesn’t need external libraries. Use the Image constructor in Zapier’s JavaScript - create a new Image object, set the src to your URL, then grab width and height from the onload event. The async part’s tricky though. Wrap it in a Promise and use async/await in your Code step. Once the image loads, naturalWidth and naturalHeight give you what you need. I store those values and return them as output data for other steps to use. Watch out for CORS issues with some image hosts - your URLs need to be publicly accessible. Works great with JPEGs and PNGs.
There’s another fetch approach that’s way more reliable than using Image constructors. First, fetch just the headers with a HEAD request to see if the image exists. Then do a partial GET to grab the metadata. For JPEGs, dimensions live in the EXIF data - you’ll want the SOF0 marker (0xFFC0) in the binary. PNG dimensions are in the IHDR chunk right at the start. I’ve used this when Image objects got blocked by CORS issues. Yeah, you’ll need to write some binary parsing, but it’s totally doable in vanilla JS and you get way more control.