diff --git a/static/VectorizerCanvas.js b/static/VectorizerCanvas.js index 9339c74..6c807b7 100644 --- a/static/VectorizerCanvas.js +++ b/static/VectorizerCanvas.js @@ -130,6 +130,12 @@ export class VectorizerCanvas extends HTMLElement { width: 48px; } } + + #photo-container{ + display: flex; + flex-direction: row; + align-items: center; + } @@ -466,7 +472,10 @@ export class VectorizerCanvas extends HTMLElement {
- +
+ + +
` this.video = this.shadow.getElementById("webcam") @@ -502,6 +511,26 @@ export class VectorizerCanvas extends HTMLElement { paper.view.onFrame = () => {} this.activateImage(this.video) }) + + this.shadow.getElementById("download-photo").addEventListener("click", () => { + + const tempCanvas = document.createElement('canvas'); + tempCanvas.width = this.vidw; + tempCanvas.height = this.vidh; + const tempCtx = tempCanvas.getContext('2d'); + + tempCtx.drawImage(this.video, 0, 0, this.vidw, this.vidh); + const dataURL = tempCanvas.toDataURL('image/jpeg'); + + const link = document.createElement('a'); + link.href = dataURL; + const now = new Date(); + const formattedDate = now.toISOString().replace(/:/g, '-').replace(/\..+/, ''); + link.download = `tinqta_photo_${formattedDate}.jpg`; + document.body.appendChild(link); + link.click(); + document.body.removeChild(link); + })