@thoschu/canvas-web-component
Version:
Web Components made by Tom S. with Stencil.js
183 lines (182 loc) • 7.12 kB
JavaScript
import { h, Host, } from "@stencil/core";
import { appendTemp, clipboard, getCanvas, getElements } from "../../utils/utils";
export class CanvasComponent {
constructor() {
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 } = getElements(this.hostHTMLElement);
const element = appendTemp(elements, this.tempHTMLElement);
this.set(await 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 } = getElements(this.hostHTMLElement);
this.stage = appendTemp(elements, this.tempHTMLElement);
break;
}
}
this.hostHTMLElement.shadowRoot.appendChild(this.stage);
}
async hostClick(evt) {
const clipped = await clipboard(CanvasComponent.dataUrl);
evt.stopPropagation();
console.info(`Copy base64 encoded image (png) to clipboard: ${clipped}`);
}
render() {
return (h(Host, { key: '4f31ef274d5db4cba34d5cbfdf1d3f124be5142c', onClick: this.copy && this.hostClick }, h("template", { key: '751e5a1a6ebd4ec4baac0ecac0dff31a89feb368' }, h("slot", { key: '7686b94ba5fc113537b3d992e0f18dcb32018c7b' }))));
}
static get is() { return "canvas-component"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["canvas-component.scss"]
};
}
static get styleUrls() {
return {
"$": ["canvas-component.css"]
};
}
static get properties() {
return {
"copy": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The copy property for activate copy to clipboad"
},
"attribute": "copy",
"reflect": false,
"defaultValue": "false"
},
"type": {
"type": "string",
"mutable": false,
"complexType": {
"original": "| \"canvas\"\n | \"image\"",
"resolved": "\"canvas\" | \"image\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The type property for image type"
},
"attribute": "type",
"reflect": false,
"defaultValue": "null"
},
"config": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "Options",
"resolved": "{ allowTaint?: boolean; backgroundColor?: string; canvas?: HTMLCanvasElement; foreignObjectRendering?: boolean; imageTimeout?: number; ignoreElements?: (element: HTMLElement) => boolean; logging?: boolean; onclone?: (doc: Document) => void; proxy?: string; removeContainer?: boolean; scale?: number; useCORS?: boolean; width?: number; height?: number; x?: number; y?: number; scrollX?: number; scrollY?: number; windowWidth?: number; windowHeight?: number; }",
"references": {
"Options": {
"location": "local",
"path": "/Users/thomas-laurenz.schulte/Documents/Projects/stencil.js/src/components/canvas-component/canvas-component.tsx",
"id": "src/components/canvas-component/canvas-component.tsx::Options"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The config property for canvas generation config"
},
"defaultValue": "{\n useCORS: true,\n }"
}
};
}
static get states() {
return {
"stage": {}
};
}
static get methods() {
return {
"get": {
"complexType": {
"signature": "(type?: \"canvas\" | \"image\") => Promise<string | HTMLImageElement | HTMLCanvasElement>",
"parameters": [{
"name": "type",
"type": "\"canvas\" | \"image\"",
"docs": ""
}],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
},
"HTMLCanvasElement": {
"location": "global",
"id": "global::HTMLCanvasElement"
},
"HTMLImageElement": {
"location": "global",
"id": "global::HTMLImageElement"
}
},
"return": "Promise<string | HTMLCanvasElement | HTMLImageElement>"
},
"docs": {
"text": "Public API to get content during runtime",
"tags": []
}
}
};
}
static get elementRef() { return "hostHTMLElement"; }
}
//# sourceMappingURL=canvas-component.js.map