@mtool/cut-out-element

介绍

一款可将 html 上的 element 元素转换为各类 image 图片，并可以通过地址来预览的库。 此库中使用到了 html2canvas（特别鸣谢：html2canvas）

安装

npm install @mtool/cut-out-element
# 或者
pnpm add @mtool/cut-out-element
# 或者
yarn add @mtool/cut-out-element

使用说明

安装后，直接使用即可，具体参照下方的使用示例

贡献

1. Fork 本仓库
2. 新建 feat/xxx 分支
3. Push 代码，并提交 Merge Request, 作者欢迎各位为此开源工具贡献一份力量~

示例

// 按需导入(cutOutElementToBlob)
import {
    cutOutElementToBlob,
    canvasToBlob,
    previewBlob,
} from "@mtool/cut-out-element";

// 或者(cutOutElement.cutOutElementToBlob)
import * as cutOutElement from "@mtool/cut-out-element";

const handler = async () => {
    // 默认转换为: image/png
    const { file, preview } = await cutOutElementToBlob(
        document.getElementById("app")
    );

    // 可修改转换
    const { file, preview } = await cutOutElementToBlob(
        document.getElementById("app"),
        "image/jpeg"
    );

    // 可直接传递可被 querySelector 识别element标识
    const { file, preview } = await cutOutElementToBlob("#app", "image/jpeg");
    // { file: blob 文件, preview: blob 地址 }

    // canvasToBlob 可将 canvas 转换为 blob。
    const blob = await canvasBlog(canvas, "image/png");

    // previewBlob 可将 blob 转换为 本地可预览的 blob 地址
    const address = previewBlob(blob);
};

window.addEventListener(handler);