AppStd/EnvelopeGenerator
8
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

sharper signature frame and text

Browse Source
This commit is contained in:
Jonathan Jenne 2023-12-11 10:11:32 +01:00
parent fd4dd8b457
commit d8ba020bb9
2 changed files with 356 additions and 333 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
EnvelopeGenerator.Web/wwwroot/js/annotation.js
View File

@ -108,39 +108,56 @@
return frameAnnotation
}
async createAnnotationFrameBlob(receiverName, width, height) {
async createAnnotationFrameBlob(receiverName, receiverSignature, width, height) {
const canvas = document.createElement('canvas')
canvas.width = width
canvas.height = height
const scale = 4
const fontSize = 10
console.log(receiverSignature)
//canvas.width = width
//canvas.height = height
canvas.width = width * scale
canvas.height = height * scale
//canvas.style.width = width * 4
//canvas.style.height = height * 4
const ctx = canvas.getContext('2d')
// This supposedly makes the lines and text less blurry
// See: https://stackoverflow.com/questions/8696631/canvas-drawings-like-lines-are-blurry
ctx.translate(0.5, 0.5)
// This also should make the lines and text less blurry
ctx.textRendering = "geometricPrecision"
const date = new Date()
const dateString = date.toLocaleDateString('de-DE')
const signatureLength = 100
const signatureLength = 100 * scale
ctx.beginPath()
ctx.moveTo(30, 10)
ctx.lineTo(signatureLength, 10)
ctx.moveTo(30 * scale, 10 * scale)
ctx.lineTo(signatureLength, 10 * scale)
ctx.moveTo(30, 10)
ctx.arcTo(10, 10, 10, 30, 20)
ctx.moveTo(30 * scale, 10 * scale)
ctx.arcTo(10 * scale, 10 * scale, 10 * scale, 30 * scale, 20 * scale)
ctx.moveTo(10, 30)
ctx.arcTo(10, 50, 30, 50, 20)
ctx.moveTo(10 * scale, 30 * scale)
ctx.arcTo(10 * scale, 50 * scale, 30 * scale, 50 * scale, 20 * scale)
ctx.moveTo(30, 50)
ctx.lineTo(signatureLength, 50)
ctx.moveTo(30 * scale, 50 * scale)
ctx.lineTo(signatureLength, 50 * scale)
ctx.strokeStyle = 'darkblue'
ctx.stroke()
ctx.fillStyle = 'black'
ctx.font = '10px serif'
ctx.fillText('Signed by', 30, 10)
ctx.fillText(receiverName + ', ' + dateString, 15, 60)
ctx.font = `${fontSize * scale}px sans-serif`
ctx.fillText('Signed by', 30 * scale, 10 * scale)
ctx.fillText(receiverName + ', ' + dateString, 15 * scale, 60 * scale)
return new Promise((resolve) => {
canvas.toBlob((blob) => {

8
EnvelopeGenerator.Web/wwwroot/js/app.js
View File

@ -100,7 +100,7 @@ class App {
console.log('annotations loaded', loadedAnnotations.toJS())
}
handleAnnotationsChange() {}
handleAnnotationsChange() { }
async handleAnnotationsCreate(createdAnnotations) {
const annotation = createdAnnotations.toJS()[0]
@ -108,13 +108,19 @@ class App {
const isSignature = !!annotation.isSignature
if (isFormField === false && isSignature === true) {
const left = annotation.boundingBox.left - 25
const top = annotation.boundingBox.top - 25
const width = 150
const height = 75
console.log(createdAnnotations)
console.log(annotation)
const imageUrl = await this.Annotation.createAnnotationFrameBlob(
this.currentReceiver.name,
this.currentReceiver.signature,
width,
height
)