Blog - Page: 84

Embed OpenStreetMap in a Next.js project OpenStreetMap is an open-source, editable world map. It is free to use in any project and requires no API keys or authentication. This post outlines how to embed a map image with a map pin of coordinates in a Next.js application, using Node.js…

Privacy is considered paramount when delivering optimal web experiences. This post discusses how to blur human faces in images in Nuxt.js. Sandbox We completed this project in a Codesandbox. Fork and run it to quickly get started. GitHub Repository https://github.com/Olanetsoft/Blur-Faces-in-Images-in-Nuxt Prerequisite The knowledge of JavaScript and Vue.js is…

Introduction This article demonstrates texts can be extracted through webcam via nextjs and tesseract js library. Codesandbox Check the sandbox demo on Codesandbox. You can also get the project GitHub repo using Github. Prerequisites Entry-level javascript and React/Nextjs knowledge. Setting Up the Sample Project Create a new nextjs…

Depending on the type of experience we aim for, normal videos might not be adequate for our users. We might need additional interactivity in our videos for a better experience. Let us explore how we can achieve this in an easy way. Codesandbox Check the sandbox demo on Codesandbox.

Context Many times, we have different images with varying characteristics such as width, height, aspect ratio, metadata, etc. Let us learn how we can dynamically only manipulate images that satisfy custom conditions without additional code logic. Check the sandbox demo on Codesandbox. You can also get the project GitHub…

Introduction A background animation effect can make a web app feel modern and engaging, but implementing it can be tricky. Without the right framework, developers face challenges like poor performance, flickering, heavy JavaScript payloads, or inconsistent rendering across devices. Next js background animation helps solve these issues by optimizing rendering…

Say, you want to place a two-dimensional image on a curved surface, such as a mug or bottle, to create a product mockup or highlight printing capabilities. Thanks to Cloudinary’s displacement-mapping feature, that’s easy to do. Here’s how displacement mapping works. By means of a map image, the algorithm displaces…

An ever-increasing amount of visual data is created and stored due to the rapid evolution of digital technology. Therefore, there is an urgent need for an effective and efficient tool or mechanism for categorizing and finding visual information on demand. Image tagging is adding text tags to an image…

This post will describe how to use Multer — a Node.js middleware used to handle multipart/form-data, and it makes the process of uploading files easy. We will be using it in a Next.js application where we will be leveraging one of its core features called API routes which…