canvas | BestHub

Rare Earth Juejin Tech Community

Feb 23, 2025 · Frontend Development

AutoHue.js: Automatic Image Color Extraction for Web Banners

This article introduces AutoHue.js, a lightweight JavaScript library that uses Canvas, Lab color space conversion, and clustering algorithms to automatically extract dominant, secondary, and edge colors from images for seamless background integration in web banners, complete with usage examples and installation instructions.

AutoHueClusteringColor Extraction

0 likes · 16 min read

AutoHue.js: Automatic Image Color Extraction for Web Banners

Rare Earth Juejin Tech Community

Jan 30, 2025 · Frontend Development

Implementing and Optimizing a Gantt Chart with Konva in Frontend Development

This article explains how to build a Gantt chart using Konva, detailing the layer structure, rendering logic, scrolling handling, performance optimizations, and provides TypeScript code examples for configuration, drawing, and event management.

Gantt ChartKonvaTypeScript

0 likes · 21 min read

Implementing and Optimizing a Gantt Chart with Konva in Frontend Development

Rare Earth Juejin Tech Community

Jan 23, 2025 · Frontend Development

Integrating Rust‑Compiled WebAssembly into Frontend Projects: A Complete Guide

This article explains the fundamentals of WebAssembly, its advantages, how to install Rust, set up a Rust project, compile it to a .wasm module with wasm‑bindgen, and seamlessly integrate the resulting WebAssembly code into a Vue 3 frontend application using canvas drawing examples.

RustVueWasm-bindgen

0 likes · 12 min read

Integrating Rust‑Compiled WebAssembly into Frontend Projects: A Complete Guide

Rare Earth Juejin Tech Community

Dec 10, 2024 · Frontend Development

Dynamic Ring Chart Component with Vue 3 and Canvas

This article explains how to build a reusable Vue 3 component that draws customizable ring charts on a canvas, using TypeScript, props for size, stroke width, and a ratio list to render multiple colored arcs dynamically.

Data VisualizationRing ChartTypeScript

0 likes · 9 min read

Dynamic Ring Chart Component with Vue 3 and Canvas

Rare Earth Juejin Tech Community

Nov 21, 2024 · Frontend Development

Implementing Electronic Signature, Image Merging, and Preview in Frontend using SignaturePad, html2canvas, and merge-images

This article explains how to build a front‑end electronic signature feature that merges a signature canvas with an HTML‑rendered document into a single preview image using SignaturePad, html2canvas, and merge-images, including code snippets and scaling adjustments.

canvaselectronic signaturefrontend

0 likes · 6 min read

Implementing Electronic Signature, Image Merging, and Preview in Frontend using SignaturePad, html2canvas, and merge-images

Rare Earth Juejin Tech Community

Nov 2, 2024 · Frontend Development

Implementing a Custom Calendar Component with Konva.js

This article explains how to build a canvas‑based calendar widget using Konva, covering the design of date cells, task‑range rendering, drag‑and‑drop interaction, event handling, and the public API, and provides the full source code for reference.

JavaScriptKonvaUI Component

0 likes · 18 min read

Implementing a Custom Calendar Component with Konva.js

大转转FE

Sep 20, 2024 · Frontend Development

Poster Generation: Frontend, Backend, and Mobile Implementation Overview

This article explains various techniques for generating custom posters—including canvas, Fabric.js, html2canvas, and dom‑to‑image—covers client‑side, server‑side, and mobile approaches, compares their performance and compatibility, and provides solutions to common issues such as cross‑origin restrictions, white‑screen bugs, and image‑ratio problems.

canvasfabric.jsfrontend development

0 likes · 18 min read

Poster Generation: Frontend, Backend, and Mobile Implementation Overview

DeWu Technology

Sep 11, 2024 · Frontend Development

Advanced Watermark Techniques and OCR Integration for Front-End Applications

The article details progressive front‑end watermark schemes—from a basic canvas overlay to mutation‑observer‑protected, hide‑ and cover‑resistant, and low‑opacity dark watermarks—and explains how adaptive tone handling, contrast tuning, region cropping, and a hybrid OCR pipeline (internal service with tesseract.js fallback) ensure robust, invisible data protection and accurate screenshot analysis.

Front-endMutationObserverOCR

0 likes · 20 min read

Advanced Watermark Techniques and OCR Integration for Front-End Applications

Sohu Tech Products

Aug 28, 2024 · Mobile Development

Implementing Firework Like Animation Effect in Android Apps

The article walks through creating a firework‑style animation for Android like buttons by building a custom ParticleDrawingView that renders launch particles and exploding spark groups on a Canvas, using ValueAnimator with configurable durations and interpolators to control four animation phases and particle properties such as position, velocity, alpha, and rotation.

AndroidInterpolatorParticle System

0 likes · 10 min read

Implementing Firework Like Animation Effect in Android Apps

vivo Internet Technology

Jun 5, 2024 · Frontend Development

Technical Guide to Generating Poster Images in H5 and Mini Programs

This guide explains how to generate shareable poster images entirely on the front end for H5 pages and mini‑programs, compares client‑side, front‑end, and server‑side approaches, reviews libraries such as html2canvas, dom‑to‑image, wxml‑to‑canvas and Painter, and offers solutions for design fidelity, CORS, and performance issues.

Cross-Origincanvasdom-to-image

0 likes · 17 min read

Technical Guide to Generating Poster Images in H5 and Mini Programs

Rare Earth Juejin Tech Community

Apr 27, 2024 · Frontend Development

Generating Dynamic Posters with html2canvas in Web Pages

This tutorial explains how to use the html2canvas library to render dynamic HTML content into canvas images, covering installation, markup definition, styling, script implementation, download handling, and important limitations for creating shareable posters in front‑end applications.

JavaScriptcanvasfrontend

0 likes · 7 min read

Generating Dynamic Posters with html2canvas in Web Pages

Rare Earth Juejin Tech Community

Apr 8, 2024 · Frontend Development

Step-by-Step Guide to Building a Canvas-Based Image Annotation Tool with Zoom, Pan, Edit, and Rotate

This tutorial walks you through creating a full‑featured image annotation tool using HTML5 Canvas, covering image rendering, mouse‑wheel zoom, viewport panning, rectangle drawing, selection, drag‑move, size adjustment, and rotation with detailed JavaScript code examples.

Drag and DropImage AnnotationJavaScript

0 likes · 30 min read

Step-by-Step Guide to Building a Canvas-Based Image Annotation Tool with Zoom, Pan, Edit, and Rotate

php中文网 Courses

Mar 4, 2024 · Frontend Development

Real-Time Photo Capture with Text Watermark Using PHP and JavaScript

This tutorial explains how to access a webcam with JavaScript, display the live video in a web page, capture a frame onto a canvas, overlay custom text as a watermark, and export the result as a data URL for further processing.

JavaScriptPHPWatermark

0 likes · 4 min read

Real-Time Photo Capture with Text Watermark Using PHP and JavaScript

Rare Earth Juejin Tech Community

Jan 7, 2024 · Frontend Development

Introducing Pictode: A Konva.js‑Based Graphical Editor Framework with Tutorials and Plugin Guide

This article presents Pictode, a Konva.js‑driven graphics editor framework, explains its core features, demonstrates how to set up a canvas, use drawing tools, selector and history plugins, and provides step‑by‑step code examples for integration with Vue or other front‑end projects.

Graphics EditorJavaScriptKonva.js

0 likes · 14 min read

Introducing Pictode: A Konva.js‑Based Graphical Editor Framework with Tutorials and Plugin Guide

Rare Earth Juejin Tech Community

Dec 11, 2023 · Frontend Development

Bypassing Juejin Slider Captcha with Puppeteer and Canvas Image Recognition

This article demonstrates how to use Puppeteer and the Canvas API to automate login on Juejin, extract the slider captcha image, apply grayscale and binarization processing to locate the gap, calculate the required drag distance, and simulate human‑like mouse movements with easing functions for successful verification.

Image RecognitionPuppeteerWeb Scraping

0 likes · 17 min read

Bypassing Juejin Slider Captcha with Puppeteer and Canvas Image Recognition

Rare Earth Juejin Tech Community

Dec 4, 2023 · Frontend Development

Cross‑Window Real‑Time Rendering with Canvas, window.screenX/Y and localStorage

This article demonstrates how to create a multi‑window, real‑time interactive animation using pure JavaScript by drawing circles on a canvas, sharing each window's screen coordinates and colors through localStorage, and connecting them with lines across browsers.

JavaScriptanimationcanvas

0 likes · 10 min read

Cross‑Window Real‑Time Rendering with Canvas, window.screenX/Y and localStorage

Rare Earth Juejin Tech Community

Oct 25, 2023 · Frontend Development

Implementing Web Page Screenshot Functionality in the Browser: Techniques, Libraries, and Optimizations

This article explores how to capture and process screenshots of web pages directly in the browser, discussing canvas drawImage basics, pixel extraction, the trade‑offs of using html2canvas versus dom‑to‑image, performance and bundle size considerations, and alternative plugin‑based approaches.

JavaScriptcanvasdom-to-image

0 likes · 18 min read

Implementing Web Page Screenshot Functionality in the Browser: Techniques, Libraries, and Optimizations

Rare Earth Juejin Tech Community

Oct 17, 2023 · Frontend Development

Custom Avatar 2.0: A Vue3‑based Online Avatar Customization Tool

This article introduces Custom Avatar 2.0, an open‑source web tool built with Vue3, Vite, TypeScript and Fabric.js that lets users upload a portrait, apply themed frames, stickers, and generate shareable posters, detailing the project architecture, new features, code implementation, and deployment instructions.

TypeScriptVue3avatar customization

0 likes · 18 min read

Rare Earth Juejin Tech Community

Sep 21, 2023 · Frontend Development

Implementing Web Page Screenshot in Frontend: Techniques, Libraries, and Optimization

This article explores the challenges and solutions for implementing a web‑page screenshot feature, comparing canvas drawImage, html2canvas, dom‑to‑image, and Chrome extension approaches, while discussing performance, bundle size, and practical code examples for extracting and processing pixel data.

JavaScriptcanvasdom-to-image

0 likes · 17 min read

Implementing Web Page Screenshot in Frontend: Techniques, Libraries, and Optimization

Rare Earth Juejin Tech Community

Sep 16, 2023 · Frontend Development

Debugging html2canvas: Understanding Canvas Rendering and Fixing Export Bugs

This article walks through debugging html2canvas by examining its rendering pipeline, comparing foreignObject and pure canvas methods, analyzing stacking contexts, and presenting practical fixes for export bugs, including configuration tweaks and DOM manipulation techniques.

SVGcanvasdebugging

0 likes · 15 min read

Debugging html2canvas: Understanding Canvas Rendering and Fixing Export Bugs