Tag Archives: image

redact.photo – Free and Private Image Redaction in the Browser

Wonderful little tool by Rik Schennink to redact photos straight in the browser. The redacted parts can’t be reversed, as the pixels get randomly shifted before they are blurred. I've added this "How does it work?" section to https://t.co/EoDQGxV4An to explain why _I think_ its blurring is secure. https://t.co/bb1Wvj3JsV pic.twitter.com/KVGigqJHly — Rik Schennink (@rikschennink) October …

Continue reading “redact.photo – Free and Private Image Redaction in the Browser”

Read Post →

Image Cut-Out Effects using CSS or SVG

 Ahmad Shadeed shows us how to do image cut-out effects, using either CSS or SVG. Handy to — for example — show a group of avatars. See the Pen Seen Avatars – SVG Mask by Ahmad Shadeed (@shadeed) on CodePen. Looking at the CSS variant: I was familiar with -webkit-mask-image and that you could combine …

Continue reading “Image Cut-Out Effects using CSS or SVG”

Read Post →

Animated Greyscale to Color Image Reveal Effect

Ana Tudor recently shared a trick on how to make an image partially greyscale: #tinyCSStip Would you like to apply `filter: grayscale(1)`, but only partly, not everywhere? You can emulate that with blend modes. background: url(cat) 50%/ cover, linear-gradient(-45deg, transparent 50%, grey 0);background-blend-mode: luminosity Many variations possible. — Ana Tudor 🐯 (@anatudor) January 20, 2021 …

Continue reading “Animated Greyscale to Color Image Reveal Effect”

Read Post →

Fun with browsers: how to get an image into the current page

Christian Heilmann created a demo page where a user can add an image to the page through various ways. I gave myself the task to build an interface to make it as easy as possible for a user to add an image into the document. I wanted to support: Image upload Drag and Drop Copy …

Continue reading “Fun with browsers: how to get an image into the current page”

Read Post →

FastImage, performant React Native image component

React Native’s Image component handles image caching like browsers for the most part. If the server is returning proper cache control headers for images you’ll generally get the sort of built in caching behavior you’d have in a browser. Even so many people have noticed: Flickering. Cache misses. Low performance loading from cache. Low performance …

Continue reading “FastImage, performant React Native image component”

Read Post →

Vibrant.js – Extract prominent colors from an image

Usage is simple: var vibrant = new Vibrant(img); var swatches = vibrant.swatches() for (var swatch in swatches) if (swatches.hasOwnProperty(swatch) && swatches[swatch]) console.log(swatch, swatches[swatch].getHex()) Works by reading in the image, placing it onto a <canvas> element, and then getting all pixel information from that canvas. Vibrant.js →

Read Post →

Photoshop Google Maps Tile Cutter Script Update (Again)

Five days after the previous update PS_BRAMUS.GoogleMapsTileCutter — a Photoshop Script which automatically chops up a large image into tiles for use with Google Maps — has been updated again. With this new version one can now choose to place all tiles into one and the same folder (as it was before), or use subfolders …

Continue reading “Photoshop Google Maps Tile Cutter Script Update (Again)”

Read Post →