UNPKG

@thoschu/canvas-web-component

Version:

Web Components made by Tom S. with Stencil.js

2 lines 1.79 kB
import{r as t,h as s,H as e,g as a}from"./p-a72b3779.js";import{g as i,a as c,b as n,c as h}from"./p-9a24a499.js";const o=":host{display:inline-block}:host .container{background:transparent}";const r=o;const d=class{constructor(s){t(this,s);this.copy=false;this.type=null;this.config={useCORS:true};this.stage=undefined;this.tempHTMLElement=document.createElement("object");this.imgElement=document.createElement("img")}async get(t=null){switch(t){case"canvas":return this.canvas;case"image":return this.imgElement;default:return d.dataUrl}}async componentDidLoad(){const{elements:t}=i(this.hostHTMLElement);const s=c(t,this.tempHTMLElement);this.set(await n(s,this.config).then((t=>{this.tempHTMLElement.remove();return t})))}set(t){d.dataUrl=t.toDataURL("image/png");this.imgElement.setAttribute("src",d.dataUrl);this.imgElement.setAttribute("data-created",Date.now().toString());this.imgElement.setAttribute("width",t.width.toString());this.imgElement.setAttribute("height",t.height.toString());this.imgElement.style.aspectRatio="1";this.canvas=t;switch(this.type){case"image":{this.stage=this.imgElement;break}case"canvas":{this.stage=this.canvas;break}default:{const{elements:t}=i(this.hostHTMLElement);this.stage=c(t,this.tempHTMLElement);break}}this.hostHTMLElement.shadowRoot.appendChild(this.stage)}async hostClick(t){const s=await h(d.dataUrl);t.stopPropagation();console.info(`Copy base64 encoded image (png) to clipboard: ${s}`)}render(){return s(e,{key:"4f31ef274d5db4cba34d5cbfdf1d3f124be5142c",onClick:this.copy&&this.hostClick},s("template",{key:"751e5a1a6ebd4ec4baac0ecac0dff31a89feb368"},s("slot",{key:"7686b94ba5fc113537b3d992e0f18dcb32018c7b"})))}get hostHTMLElement(){return a(this)}};d.style=r;export{d as canvas_component}; //# sourceMappingURL=p-a30dc1de.entry.js.map