0 views collected around this technical thread.
This article explains how to export HTML content—often fetched from the web with irregular tags and asynchronous images—into PDF files using Vue, html2pdf.js, jsPDF, and html2canvas, while also covering backend alternatives and practical CSS fixes.
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.
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.
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.
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.
This article explains how to fetch an HTML string from an API and display it either via an iframe or by rendering the HTML directly in React or Vue, and provides multiple download options—including saving the raw HTML, capturing an image with html2canvas, and generating a PDF using jsPDF.
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.
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.
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.
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.
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.
This article provides a comprehensive guide on converting HTML content to images, Word documents, and PDFs using various frontend techniques and libraries like html2canvas, html-docx-js, and jsPDF.
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.
This article provides a step‑by‑step tutorial on how to use html2canvas to screenshot Baidu Maps (both v3.0 and GL v1.0), handle cross‑origin image issues, adjust SVG overlay positions, and download the resulting images using canvas or base64 data URIs.
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.
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.
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.
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.