signature: scale the signature zone to the canvas dimension

This commit is contained in:
nobohan 2024-06-20 15:52:47 +02:00
parent c950400fe2
commit c80f23f0db
2 changed files with 57 additions and 16 deletions

View File

@ -62,3 +62,12 @@ export interface PostStoreObjectSignature {
signature: string,
}
export interface SignatureZone {
page: number,
pageWidth: number,
pageHeight: number,
x: number,
y: number,
width: number,
height: number,
}

View File

@ -8,6 +8,7 @@
import { ref, Ref } from "vue";
import VuePdfEmbed from "vue-pdf-embed";
import "vue-pdf-embed/dist/style/index.css";
import { SignatureZone } from "../../types";
//import * as pdfjsLib from "pdfjs-dist";
import {
@ -34,9 +35,21 @@ const signature = {
50, 124, 210, 52, 177, 145, 165, 156, 90, 186, 155, 252, 241, 54, 194, 79,
],
},
zones: [{ page: 1, pageWidth: 500, pageHeight: 800, x: 30, y: 50, width: 100, height: 50 }],
zones: [
{
page: 1,
pageWidth: 210,
pageHeight: 297,
x: 21, //from top-left corner
y: 50,
width: 80,
height: 50,
},
],
};
let userSignatureZones = {} as SignatureZone;
const urlInfo = build_download_info_link(signature.storedObject.filename);
let pdfSource: Ref<string> = ref("");
@ -50,33 +63,52 @@ async function download_and_open(): Promise<Blob> {
new Uint8Array(signature.storedObject.iv)
);
pdfSource.value = URL.createObjectURL(raw);
setTimeout(() => draw_zones(), 2000); //TODO gestion async
setTimeout(() => add_zones(), 2000); //TODO gestion async
} catch (e) {
console.error("error while downloading and decrypting document", e);
throw e;
}
return raw;
}
const canvas_click = (e: PointerEvent) => {
console.log("click event x and y", e.x, e.y);
//TODO what to do with this: 1) draw the signature if it falls within a zone, 2) output the zone
userSignatureZones = signature.zones[0]; //TODO for now, need another way to select a zone
};
const canvas_click = (e: PointerEvent) => {
console.log('click event x and y', e.x, e.y)
}
const draw_zone = (
zone: SignatureZone,
ctx: CanvasRenderingContext2D,
canvasWidth: number,
canvasHeight: number
) => {
const scaleXToCanvas = (x: number) => (x * canvasWidth) / zone.pageWidth;
const scaleYToCanvas = (y: number) => (y * canvasHeight) / zone.pageHeight;
ctx.fillRect(
scaleXToCanvas(zone.x),
scaleYToCanvas(zone.y),
scaleXToCanvas(zone.width),
scaleYToCanvas(zone.height)
);
};
const draw_zones = () => {
const canvas = document.querySelectorAll('canvas')[0];
console.log('canvas', canvas);
const add_zones = () => {
//TODO multipage: draw zones on page change?
const canvas = document.querySelectorAll("canvas")[0];
const ctx = canvas.getContext("2d");
if (ctx) {
console.log(canvas.height)
console.log(canvas.width)
//TODO the zone where the signature should go will depend on the canvas dimensions! see page.getViewport({ scale });
ctx.fillStyle = "green";
signature.zones.map(//TODO gestion du numéro de la page
z => ctx.fillRect(z.x, z.y, z.width, z.height)
)
signature.zones.map(
//TODO gestion du numéro de la page
(z) => draw_zone(z, ctx, canvas.width, canvas.height)
);
}
canvas.addEventListener('pointerup', (e: PointerEvent) => canvas_click(e), false);
}
canvas.addEventListener(
"pointerup",
(e: PointerEvent) => canvas_click(e),
false
);
};
download_and_open();
</script>