On demand image resizing with node.js in

100%

On demand image resizing with node.js in

✓ Published0🌍 Public

Last edited May 20, 2011

Created on Apr 6, 2012

This example demonstrates on-demand image resizing through a Node.js HTTP server. It shows how URL parameters define the target dimensions, with requests like `/image.jpg/100x50` triggering a resize operation. The server uses the `http` module to handle incoming requests and `child_process.spawn` to invoke ImageMagick’s `convert` command, piping the resulting JPEG stream directly back to the client via `res.writeHead` and `convert.stdout.pipe`. The code relies entirely on command-line tools rather than a JavaScript imaging library.

AI-generated description

Similar vizzes

Loading thumbnail…

recompress jpg files on the fly

This example shows an Apache PHP script that transparently recompresses JPEG images on the fly whenever a browser requests a `.jpg` file. It first displays the original image in response to the request, then uses the external `jpeg-recompress` executable to create a smaller cached version, which subsequent requests serve instead. The script relies on server-side file handling via `filemtime`, `filesize`, and `md5`, and writes a cache log with compression ratios using `error_log`. It conditionally serves cached files only when they are newer than the source.

PPhilippe Rivière

58% match

Loading thumbnail…

Gist 81582

This example demonstrates a code snippet from a Merb global helper function that dynamically scales image dimensions while maintaining an 18-pixel vertical baseline. The function `scaled_image_tag` adjusts an image’s width to a maximum value and proportionally recalculates its height, rounding down to the nearest multiple of 18 to preserve grid alignment. It uses the Ruby `image_tag` helper from the Merb framework’s view layer, relying on standard hash options to pass width and height parameters. The code illustrates a practical rendering approach for responsive image handling in server-side templates, with no client-side visualization or data source involved.

DDylanFM

58% match

Loading thumbnail…

Image Magick Cheat Sheet - Fun and easy picture editing in Linux command lIne

This example is a cheat sheet for using ImageMagick from the Linux command line, presented as a Jupyter notebook. It demonstrates two common image-processing tasks: resizing an image while preserving its aspect ratio via the `convert` command with the `-resize` flag, and creating an animated GIF from a sequence of PNG files using `-delay` and `-loop` options. The code relies on the ImageMagick `convert` utility and includes links to external tutorials for reference.

PP3nny

58% match

Loading thumbnail…

Node.js server for composing map tiles using modestmaps.js

This example demonstrates a Node.js server that dynamically composes map tiles into a single static image. The HTTP endpoint `/map` accepts zoom, latitude, longitude, width, and height parameters, then uses the modestmaps.js library to calculate which tiles are needed, fetches them via the `get` library, and draws them onto a Canvas using the `canvas` package. The OpenStreetMap tile provider is referenced directly, and the final composite is returned as a PNG.

RRandomEtc

57% match

Loading thumbnail…

Directly render and serve d3 visualizations from a nodejs server.

This example demonstrates how to render D3 visualizations directly from a Node.js server, showing a line chart of normally distributed sample data. The server uses Node’s HTTP module and the D3.js library to generate SVG markup programmatically, then sends it to the browser as an `image/svg+xml` response. It constructs linear scales (`d3.scale.linear`), axes (`d3.svg.axis`), and a basis-interpolated line (`d3.svg.line`) entirely on the server side. The visualization is styled with simple SVG attributes, and the data is randomly generated via `d3.random.normal`, highlighting a server-side rendering approach where all D3 computations and SVG generation occur in Node before transmission.

CCaged

56% match

Loading thumbnail…

Gist 1a03bf15beee9f72953b414669e44576

This example demonstrates a Node.js utility that asynchronously fetches the HTTP status code for a given URL. It first reads a text file using the `fs.readFile` method to extract a domain or URL from its first line, then passes that address to the `request` library’s `getStatusCodeAsync` function, which returns the server’s response code. The visualization shows how file I/O and network requests are chained through callbacks, highlighting the flow of data from local storage to remote servers without any graphical rendering.

MMailnickko

55% match

Loading thumbnail…

Resize big images to the nearest power of two and cut them up into 256px tiles.

This Processing sketch demonstrates a tiling scheme for a 3x5400x2700 pixel world map image. It first resizes the image to the nearest power-of-two dimensions, then generates PNG tiles at multiple zoom levels by progressively downsampling the original and saving 256x256 crops. The code uses Processing's `loadImage()`, `resize()`, and `copy()` methods to extract the tiles, which are organized into folders by zoom level and column/row coordinates.

RRandomEtc

55% match

Loading thumbnail…

Responsive Images #css #style

This example demonstrates a pure CSS technique for making images responsive and retina-ready. It uses the `img` element with `max-width: 100%`, `display: block`, and `height: auto` to ensure images scale fluidly within their containers while maintaining aspect ratio. The comment notes that for retina displays, the width and height attributes should be set to half the original file dimensions. The CSS relies solely on standard style rules, with no JavaScript libraries or external APIs, and applies globally to all images in the document.

TTimeBandit

55% match