@thoschu/canvas-web-component/dist/cjs/canvas-component.cjs.entry.js

Web Components made by Tom S. with Stencil.js

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-7689adbc.js');
const utils = require('./utils-dc98c7df.js');

const canvasComponentCss = ":host{display:inline-block}:host .container{background:transparent}";
const CanvasComponentStyle0 = canvasComponentCss;

const CanvasComponent = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.copy = false;
        this.type = null;
        this.config = {
            useCORS: true,
        };
        this.stage = undefined;
        this.tempHTMLElement = document.createElement("object");
        this.imgElement = document.createElement("img");
    }
    /**
     * Public API to get content during runtime
     */
    async get(type = null) {
        switch (type) {
            case "canvas":
                return this.canvas;
            case "image":
                return this.imgElement;
            default:
                return CanvasComponent.dataUrl;
        }
    }
    async componentDidLoad() {
        const { elements } = utils.getElements(this.hostHTMLElement);
        const element = utils.appendTemp(elements, this.tempHTMLElement);
        this.set(await utils.getCanvas(element, this.config).then((canvas) => {
            this.tempHTMLElement.remove();
            return canvas;
        }));
    }
    set(canvas) {
        CanvasComponent.dataUrl = canvas.toDataURL("image/png");
        this.imgElement.setAttribute("src", CanvasComponent.dataUrl);
        this.imgElement.setAttribute("data-created", Date.now().toString());
        this.imgElement.setAttribute("width", canvas.width.toString());
        this.imgElement.setAttribute("height", canvas.height.toString());
        this.imgElement.style.aspectRatio = "1";
        this.canvas = canvas;
        switch (this.type) {
            case "image": {
                this.stage = this.imgElement;
                break;
            }
            case "canvas": {
                this.stage = this.canvas;
                break;
            }
            default: {
                const { elements } = utils.getElements(this.hostHTMLElement);
                this.stage = utils.appendTemp(elements, this.tempHTMLElement);
                break;
            }
        }
        this.hostHTMLElement.shadowRoot.appendChild(this.stage);
    }
    async hostClick(evt) {
        const clipped = await utils.clipboard(CanvasComponent.dataUrl);
        evt.stopPropagation();
        console.info(`Copy base64 encoded image (png) to clipboard: ${clipped}`);
    }
    render() {
        return (index.h(index.Host, { key: '4f31ef274d5db4cba34d5cbfdf1d3f124be5142c', onClick: this.copy && this.hostClick }, index.h("template", { key: '751e5a1a6ebd4ec4baac0ecac0dff31a89feb368' }, index.h("slot", { key: '7686b94ba5fc113537b3d992e0f18dcb32018c7b' }))));
    }
    get hostHTMLElement() { return index.getElement(this); }
};
CanvasComponent.style = CanvasComponentStyle0;

exports.canvas_component = CanvasComponent;

//# sourceMappingURL=canvas-component.cjs.entry.js.map