-
-
-
-
-
-
-
-
-
-
-
+
+
+
\ No newline at end of file
-
-
-
+
+
+
-
-
+
+
+ +
+
+
+
-
-
+
+
+
-
-
-
-
-
+
-
-
-
-
-
+ });
+
-
-
-
-
-
-
- - - -
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -
- ![Signature Preview]()
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- ![]()
-
-
-
+ });
+
-
-
-
-
-
- ![]()
-
-
-
-
-
-No saved signatures found
-
-
-
-
-
-
+
+
-
-
-
+ function addDraggableFromPad() {
+ if (signaturePad.isEmpty()) return;
+ const startTime = Date.now();
+ const croppedDataUrl = getCroppedCanvasDataUrl(signaturePadCanvas);
+ console.log(Date.now() - startTime);
+ DraggableUtils.createDraggableCanvasFromUrl(croppedDataUrl);
+ }
+
+ function getCroppedCanvasDataUrl(canvas) {
+ let originalCtx = canvas.getContext('2d');
+ let originalWidth = canvas.width;
+ let originalHeight = canvas.height;
+ let imageData = originalCtx.getImageData(0, 0, originalWidth, originalHeight);
+
+ let minX = originalWidth + 1, maxX = -1, minY = originalHeight + 1, maxY = -1, x = 0, y = 0, currentPixelColorValueIndex;
+
+ for (y = 0; y < originalHeight; y++) {
+ for (x = 0; x < originalWidth; x++) {
+ currentPixelColorValueIndex = (y * originalWidth + x) * 4;
+ let currentPixelAlphaValue = imageData.data[currentPixelColorValueIndex + 3];
+ if (currentPixelAlphaValue > 0) {
+ if (minX > x) minX = x;
+ if (maxX < x) maxX = x;
+ if (minY > y) minY = y;
+ if (maxY < y) maxY = y;
+ }
+ }
+ }
+
+ let croppedWidth = maxX - minX;
+ let croppedHeight = maxY - minY;
+ if (croppedWidth < 0 || croppedHeight < 0) return null;
+ let cuttedImageData = originalCtx.getImageData(minX, minY, croppedWidth, croppedHeight);
+
+ let croppedCanvas = document.createElement('canvas'),
+ croppedCtx = croppedCanvas.getContext('2d');
+
+ croppedCanvas.width = croppedWidth;
+ croppedCanvas.height = croppedHeight;
+ croppedCtx.putImageData(cuttedImageData, 0, 0);
+
+ return croppedCanvas.toDataURL();
+ }
+
+ function resizeCanvas() {
+ var ratio = Math.max(window.devicePixelRatio || 1, 1);
+ var additionalFactor = 10;
+
+ signaturePadCanvas.width = signaturePadCanvas.offsetWidth * ratio * additionalFactor;
+ signaturePadCanvas.height = signaturePadCanvas.offsetHeight * ratio * additionalFactor;
+ signaturePadCanvas.getContext("2d").scale(ratio * additionalFactor, ratio * additionalFactor);
+
+ signaturePad.clear();
+ }
+
+ new IntersectionObserver((entries, observer) => {
+ if (entries.some(entry => entry.intersectionRatio > 0)) {
+ resizeCanvas();
+ }
+ }).observe(signaturePadCanvas);
+
+ new ResizeObserver(resizeCanvas).observe(signaturePadCanvas);
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +
+ ![Signature Preview]()
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ![]()
+
+
+
+
+
+
+
+
+ ![]()
+
+
+
+
+ No saved signatures found
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
+
+
+
+
-
+
+