BestHub
Sign in
Tagged articles
27 articles
Page 1 of 1
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Sep 4, 2025 · Frontend Development

How to Capture ECharts Charts: html2canvas vs snapdom – A Practical Guide

This article walks through setting up an ECharts combo chart, then compares html2canvas and snapdom for one‑click screenshot and download, covering installation, core code, common pitfalls, performance benchmarks, and scenario‑based selection advice to help developers choose the right tool for reliable chart export.

CompatibilityEChartsfrontend
0 likes · 19 min read
How to Capture ECharts Charts: html2canvas vs snapdom – A Practical Guide
Goodme Frontend Team
Goodme Frontend Team
Dec 2, 2024 · Frontend Development

How to Generate Paginated PDFs from HTML with html2canvas and jsPDF

This article explains how to convert HTML content—including text, images, and tables—into PDF files using html2canvas and jsPDF, and details a dynamic pagination technique to prevent content truncation across pages, while also covering performance and export considerations.

JavaScriptfrontendhtml2canvas
0 likes · 19 min read
How to Generate Paginated PDFs from HTML with html2canvas and jsPDF
Rare Earth Juejin Tech Community
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.

electronic signaturefrontendhtml2canvas
0 likes · 6 min read
Implementing Electronic Signature, Image Merging, and Preview in Frontend using SignaturePad, html2canvas, and merge-images
Sohu Tech Products
Sohu Tech Products
Sep 25, 2024 · Frontend Development

Poster Generation: Techniques, Libraries, and Common Issues

The article reviews poster generation methods—server‑side rendering with headless browsers or watermarking, client‑side CPU/GPU approaches, and frontend Canvas‑based techniques—detailing libraries such as Fabric.js, html2canvas, and dom‑to‑image, comparing speed, quality, compatibility, addressing cross‑origin and rendering bugs, and advising when to choose each solution.

Canvas APIFabric.jsImage Rendering
0 likes · 13 min read
Poster Generation: Techniques, Libraries, and Common Issues
大转转FE
大转转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
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Aug 12, 2024 · Frontend Development

Implementing Multi‑Page Print Preview and PDF Export in Vue 3 with vue3‑print‑nb, html2canvas, and jsPDF

This article explains how to achieve paginated print preview and PDF generation in a Vue 3 application by using vue3‑print‑nb for on‑demand printing, html2canvas to capture DOM elements as images, and jsPDF to compose multi‑page A4 PDFs with custom headers, footers, and spacing.

PDFVue3frontend
0 likes · 12 min read
Implementing Multi‑Page Print Preview and PDF Export in Vue 3 with vue3‑print‑nb, html2canvas, and jsPDF
vivo Internet Technology
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.

CanvasCross-OriginMini Program
0 likes · 17 min read
Technical Guide to Generating Poster Images in H5 and Mini Programs
Rare Earth Juejin Tech Community
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.

CanvasJavaScriptfrontend
0 likes · 7 min read
Generating Dynamic Posters with html2canvas in Web Pages
Goodme Frontend Team
Goodme Frontend Team
Jan 15, 2024 · Frontend Development

Mastering PDF Generation in the Browser: html2canvas + jsPDF Guide

This article explains how to convert HTML pages into multi‑page PDF files using html2canvas and jsPDF, covering basic setup, handling pagination, scaling, image insertion, and practical code examples to ensure readable, correctly paginated PDFs in front‑end projects.

frontendhtml2canvas
0 likes · 14 min read
Mastering PDF Generation in the Browser: html2canvas + jsPDF Guide
Rare Earth Juejin Tech Community
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.

Canvasdom to imagefrontend
0 likes · 18 min read
Implementing Web Page Screenshot Functionality in the Browser: Techniques, Libraries, and Optimizations
Rare Earth Juejin Tech Community
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.

CanvasImage Processingdom to image
0 likes · 17 min read
Implementing Web Page Screenshot in Frontend: Techniques, Libraries, and Optimization
Tencent Cloud Developer
Tencent Cloud Developer
Mar 2, 2022 · Frontend Development

Front-end Page Screenshot: dom-to-image and html2canvas – Usage and Implementation Principles

This article compares the front‑end screenshot libraries dom‑to‑image and html2canvas, explains their APIs and underlying SVG‑or‑canvas rendering pipelines, walks through typical usage code, highlights common pitfalls such as cross‑origin images and scrolling, and offers practical configuration and debugging tips for developers.

CanvasFront-endSVG
0 likes · 21 min read
Front-end Page Screenshot: dom-to-image and html2canvas – Usage and Implementation Principles
Tencent Cloud Developer
Tencent Cloud Developer
Sep 27, 2021 · Frontend Development

html2canvas Implementation Principles and Opacity Rendering Issue Analysis

The article explains html2canvas’s workflow—cloning, parsing, and rendering based on stacking contexts—and diagnoses why transparent overlays appear opaque in screenshots, revealing that the npm package lacks opacity handling; it then proposes adding an OpacityEffect class that records and applies element opacity via canvas globalAlpha to fix the issue.

CSSCanvasOpacity
0 likes · 11 min read
html2canvas Implementation Principles and Opacity Rendering Issue Analysis
Tencent IMWeb Frontend Team
Tencent IMWeb Frontend Team
May 27, 2021 · Frontend Development

How to Generate Excel‑Based Posters in the Browser Without Crashing

This article walks through building a front‑end‑only tool that reads student data from Excel, creates customized poster images using SheetJS, html2canvas, and JSZip, and solves out‑of‑memory crashes by analyzing JavaScript heap usage, refactoring recursive code, and optimizing DOM cloning with ignoreElements.

ExcelJSZipMemory Optimization
0 likes · 8 min read
How to Generate Excel‑Based Posters in the Browser Without Crashing
Architect's Journey
Architect's Journey
Dec 22, 2020 · Frontend Development

Best Practices for Silent Web PDF Printing in E‑commerce Workflows

This article analyzes three implementation scenarios for silently printing PDF procurement lists in a shipping process, compares PDF‑related technologies on stability, integration and cost, and concludes with a Lodop‑based solution that converts backend data into a hidden canvas for direct printing.

LodopPDFWeb Development
0 likes · 4 min read
Best Practices for Silent Web PDF Printing in E‑commerce Workflows
Xianyu Technology
Xianyu Technology
Jul 21, 2020 · Frontend Development

Mobile Web Screenshot Solution Using Canvas

This article presents a custom canvas‑based mobile screenshot solution for single‑page applications that overcomes cross‑origin image blocking, low scaling clarity, inaccurate arc rendering, and deep DOM parsing issues by loading images anonymously, rendering at higher resolution, using precise arc patterns, and measuring text for proper wrapping.

Mobile WebSVGcanvas screenshot
0 likes · 7 min read
Mobile Web Screenshot Solution Using Canvas
360 Tech Engineering
360 Tech Engineering
Dec 12, 2019 · Backend Development

Server‑Side Browser Screenshot with Selenium and html2canvas on Linux

This guide explains how to set up a headless Chrome environment on Linux, install Selenium and html2canvas, inject JavaScript to capture arbitrary DOM elements as images, retrieve the base64 data, and optionally package the whole workflow into a Docker container for reproducible deployment.

ChromeDriverSeleniumWeb Automation
0 likes · 7 min read
Server‑Side Browser Screenshot with Selenium and html2canvas on Linux
MaoDou Frontend Team
MaoDou Frontend Team
Aug 12, 2019 · Frontend Development

Convert Vue Pages to PDF with html2canvas and jsPDF

Learn how to create a Vue plugin that captures a page with html2canvas and generates a PDF using jsPDF, covering required dependencies, plugin implementation, installation steps, and usage example to export dynamic table content as a PDF file.

Vuefrontendhtml2canvas
0 likes · 7 min read
Convert Vue Pages to PDF with html2canvas and jsPDF
Tencent Music Tech Team
Tencent Music Tech Team
Feb 2, 2018 · Backend Development

Generating Long Event Images for QQ Music Albums: Front‑end and Server‑side Solutions, Pitfalls and Optimizations

To quickly create shareable long‑event images for QQ Music albums, the team evaluated client‑side DOM‑to‑image tools (html2canvas and SVG) that suffered from blur, incompleteness, slow rendering and oversized base64 data, then migrated rendering to the server using PhantomJS, node‑canvas and ultimately ImageMagick, whose combined script execution, mpc caching, and Q8 build provided the most balanced quality‑performance solution despite remaining operational quirks.

ImageMagickPhantomJSSVG
0 likes · 15 min read
Generating Long Event Images for QQ Music Albums: Front‑end and Server‑side Solutions, Pitfalls and Optimizations