react-html-to-image/dist/useHtmlToImage.js

TODO

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.useHtmlToImage = void 0;
const react_1 = require("react");
const dom_to_image_1 = require("dom-to-image");
const file_saver_1 = require("file-saver");
const SCALE_JPEG = 3;
const DEFAULT_QUALITY = 0.7;
const useHtmlToImage = () => {
    const containerRef = (0, react_1.useRef)(null);
    const saveHtmlAsImage = async (fileName, options) => {
        const containerElement = containerRef?.current;
        if (!containerElement) {
            throw new Error("container ref is undefined");
        }
        const { offsetHeight = 0, offsetWidth = 0, } = containerElement ?? {};
        const dataUrl = await (0, dom_to_image_1.toJpeg)(containerElement, {
            height: offsetHeight * SCALE_JPEG,
            width: offsetWidth * SCALE_JPEG,
            quality: options?.quality ?? DEFAULT_QUALITY,
            style: {
                transformOrigin: "center",
                transform: `scale(${SCALE_JPEG}) translate(${offsetWidth}px, ${offsetHeight}px)`,
            },
        });
        return (0, file_saver_1.saveAs)(dataUrl, `${fileName}.jpg`);
    };
    return {
        ref: containerRef,
        saveHtmlAsImage,
    };
};
exports.useHtmlToImage = useHtmlToImage;