html2canvas

简介

html2canvas 是一个 JavaScript 库，用于将 HTML 元素渲染为 Canvas 图像。它可以直接在用户浏览器中生成网页或部分网页的“截图”，无需服务器支持。

安装

文档

bash

npm install html2canvas --save

使用

将元素转换为Canvas

javascript

import html2canvas from 'html2canvas';

/**
 * 将元素转换为 Canvas
 * @param {HTMLElement} element 需要转换的 HTML 元素
 * @returns {Promise<HTMLCanvasElement>} 返回 Canvas 元素
 */
export const elementToCanvas = (element) => {
  //其余配置项可以去文档看下
  return html2canvas(element, {
    scale: window.devicePixelRatio, // 渲染比例，默认为设备像素比
    logging: true, // 是否启用日志
    allowTaint: true, // 是否允许跨域图片
    useCORS: true // 是否使用 CORS 加载图片
  });
};

将元素转换为临时图片地址

javascript

import html2canvas from 'html2canvas';

/**
 * 将元素转换为临时图片地址
 * @param {HTMLElement} element 需要转换的 HTML 元素
 * @returns {Promise<string>} 返回临时图片地址
 */
export const elementToImage = async (element) => {
    const canvas = await elementToCanvas(element);
    return new Promise((resolve, reject) => {
        canvas.toBlob((blob) => {
            try {
                const url = URL.createObjectURL(blob);
                resolve(url);
            } catch (error) {
                reject(error);
            }
        });
    });
};

将元素转换为 Base64 图片

javascript

import html2canvas from 'html2canvas';

/**
 * 将元素转换为 Base64 图片
 * @param {HTMLElement} element 需要转换的 HTML 元素
 * @returns {Promise<string>} 返回 Base64 图片数据
 */
export const elementToImageBase64 = async (element) => {
    const canvas = await elementToCanvas(element);
    const base64 = canvas.toDataURL('image/png'); // 或 'image/jpeg'
    return base64.replace(/^data:image\/(png|jpg|jpeg);base64,/, '');
};

将特定元素转换为图片并下载

javascript

import html2canvas from 'html2canvas';
import FileSaver from 'file-saver';

const element = document.getElementById('myElement');
html2canvas(element).then((canvas) => {
    canvas.toBlob((blob) => {
        FileSaver.saveAs(blob, 'screenshot.png');
    });
});

html2canvas ​

简介 ​

安装 ​

使用 ​

html2canvas

简介

安装

使用