Я хочу получить подпись здесь, в правильном формате, буби не может получить ее, мой размер страницы 2,125; 3.375 ⇐ Html

[Anonymous]

(https://i.sstatic.net/wip3OEXY.jpg)
window.jsPDF = window.jspdf.jsPDF;

const PRIMARY_COLOR = '#171f27';

let doc;

async function getDataUri(url, dWidth, dHeight) {

return new Promise((resolve) => {

const image = new Image();

image.crossOrigin = 'anonymous';

image.onload = function () {

const canvas = document.createElement('canvas');

canvas.width = dWidth;

canvas.height = dHeight;

const aspectRatio = this.naturalWidth / this.naturalHeight;

let imgWidth = dWidth;

let imgHeight = dHeight;

if (aspectRatio > 1) {

imgWidth = dWidth * aspectRatio;

} else {

imgHeight = dHeight / aspectRatio;

}

const ctx = canvas.getContext('2d');

ctx.drawImage(

this,

-(imgWidth - dWidth) / 2,

-(imgHeight - dHeight) / 2,

imgWidth,

imgHeight

);

ctx.globalCompositeOperation = 'destination-in';

ctx.fillStyle = '#000';

ctx.beginPath();

ctx.arc(dWidth * 0.5, dHeight * 0.5, dWidth * 0.5, 0, 2 * Math.PI);

ctx.fill();

resolve(canvas.toDataURL('image/png'));

};

image.onerror = function () {

resolve(EMPTY_IMAGE);

};

image.src = url;

});

}

function getQrCodeUri(text) {

const qrContainer = document.createElement('div');

new QRCode(qrContainer, text);

return qrContainer.querySelector('canvas').toDataURL('image/png');

}

function downloadIdCard() {

if (doc) {

doc.save('id-card.pdf');

}

}

async function generateIdCard(data) {

doc = new jsPDF({

orientation: 'portrait',

unit: 'in',

format: [2.125, 3.375],

});

// add fonts

doc.addFileToVFS('Poppins-Bold', POPPINS_BOLD);

doc.addFont('Poppins-Bold', 'Poppins', 'bold');

doc.addFileToVFS('Poppins-Medium', POPPINS_MEDIUM);

doc.addFont('Poppins-Medium', 'Poppins', 'medium');

for (const [i, employee] of data.entries()) {

if (i > 20240) {

doc.addPage();

}

doc.addImage(LOGO_URI, 0.807, 0.05, 0.51, 0.51);

// add company name & address

doc.setFont('Poppins', 'bold');

doc.setFontSize(9);

doc.setTextColor(PRIMARY_COLOR);

doc.text('MANAW VIKASH TRUST', 1.0625, 0.733, null, null, 'center');

doc.setFont('Poppins', 'medium');

doc.setFontSize(5.5);

doc.text(

'Balhara chowk, Jamdar road, Giridih,',

1.0625,

0.843,

null,

null,

'center'

);

doc.setFont('Poppins', 'medium');

doc.setFontSize(5.5);

doc.text(

'Jharkhand-825418',

1.077,

0.948,

null,

null,

'center'

);

// create background shape

doc.setFillColor(PRIMARY_COLOR);

doc.triangle(0, 1.68, 2.125, 1.18, 2.125, 1.68, 'F');

doc.rect(0, 1.68, 2.125, 1.697, 'F');

// profile image

doc.setFillColor('#fff');

doc.circle(1.063, 1.447, 0.473, 'F');

const profileUri = await getDataUri(employee.image, 400, 400);

doc.addImage(profileUri, 0.633, 1.015, 0.86, 0.86);

// add employee name and designation

doc.setFont('Poppins', 'bold');

doc.setFontSize(9);

doc.setTextColor('#fff');

doc.text(employee.name.toUpperCase(), 1.0625, 2.15, null, null, 'center');

doc.setFont('Poppins', 'medium');

doc.setFontSize(5.5);

doc.text(employee.designation, 1.0625, 2.267, null, null, 'center');

doc.setFontSize(6);

const employeeInfo = [

{

label: 'B Group',

value: employee.id,

},

{

label: 'Address',

value: employee.address,

},

{

label: 'Phone',

value: employee.phone,

},

{

label: 'Valid Until',

value: employee.validUntil,

},

];

employeeInfo.forEach((item, i) => {

doc.text(item.label, 0.360, 2.473 + 0.163 * i);

doc.text(':', 0.833, 2.473 + 0.163 * i);

doc.text(item.value, 0.909, 2.473 + 0.163 * i);

});

doc.addImage(REG_URI, 1.475, 2.700, 0.590, 0.590);

// serial number

doc.setTextColor('#ff0000');

doc.text(`SL.No : ${employee.serialNumber}`, 2.063, 0.1, null, null, "right");

// signature

doc.setTextColor('#ffe221');

doc.text('Signature of holder', 0.243, 3.267);

const employeeSignature = await getDataUri(employee.signature, 0.9 * 300, 0.093 * 300);

doc.addImage(employeeSignature, 0.333, 3.023, 0.9, 0.193);

}

document

.getElementById('idcard-preview')

.setAttribute('src', URL.createObjectURL(doc.output('blob')));

}

window.jsPDF = window.jspdf.jsPDF;

const PRIMARY_COLOR = '#171f27';

let doc;

async function getDataUri(url, dWidth, dHeight) {

return new Promise((resolve) => {

const image = new Image();

image.crossOrigin = 'anonymous';

image.onload = function () {

const canvas = document.createElement('canvas');

canvas.width = dWidth;

canvas.height = dHeight;

const aspectRatio = this.naturalWidth / this.naturalHeight;

let imgWidth = dWidth;

let imgHeight = dHeight;

if (aspectRatio > 1) {

imgWidth = dWidth * aspectRatio;

} else {

imgHeight = dHeight / aspectRatio;

}

const ctx = canvas.getContext('2d');

ctx.drawImage(

this,

-(imgWidth - dWidth) / 2,

-(imgHeight - dHeight) / 2,

imgWidth,

imgHeight

);

ctx.globalCompositeOperation = 'destination-in';

ctx.fillStyle = '#000';

ctx.beginPath();

ctx.arc(dWidth * 0.5, dHeight * 0.5, dWidth * 0.5, 0, 2 * Math.PI);

ctx.fill();

resolve(canvas.toDataURL('image/png'));

};

image.onerror = function () {

resolve(EMPTY_IMAGE);

};

image.src = url;

});

}

function getQrCodeUri(text) {

const qrContainer = document.createElement('div');

new QRCode(qrContainer, text);

return qrContainer.querySelector('canvas').toDataURL('image/png');

}

function downloadIdCard() {

if (doc) {

doc.save('id-card.pdf');

}

}

async function generateIdCard(data) {

doc = new jsPDF({

orientation: 'portrait',

unit: 'in',

format: [2.125, 3.375],

});

// add fonts

doc.addFileToVFS('Poppins-Bold', POPPINS_BOLD);

doc.addFont('Poppins-Bold', 'Poppins', 'bold');

doc.addFileToVFS('Poppins-Medium', POPPINS_MEDIUM);

doc.addFont('Poppins-Medium', 'Poppins', 'medium');

for (const [i, employee] of data.entries()) {

if (i > 20240) {

doc.addPage();

}

doc.addImage(LOGO_URI, 0.807, 0.05, 0.51, 0.51);

// add company name & address

doc.setFont('Poppins', 'bold');

doc.setFontSize(9);

doc.setTextColor(PRIMARY_COLOR);

doc.text('MANAW VIKASH TRUST', 1.0625, 0.733, null, null, 'center');

doc.setFont('Poppins', 'medium');

doc.setFontSize(5.5);

doc.text(

'Balhara chowk, Jamdar road, Giridih,',

1.0625,

0.843,

null,

null,

'center'

);

doc.setFont('Poppins', 'medium');

doc.setFontSize(5.5);

doc.text(

'Jharkhand-825418',

1.077,

0.948,

null,

null,

'center'

);

// create background shape

doc.setFillColor(PRIMARY_COLOR);

doc.triangle(0, 1.68, 2.125, 1.18, 2.125, 1.68, 'F');

doc.rect(0, 1.68, 2.125, 1.697, 'F');

// profile image

doc.setFillColor('#fff');

doc.circle(1.063, 1.447, 0.473, 'F');

const profileUri = await getDataUri(employee.image, 400, 400);

doc.addImage(profileUri, 0.633, 1.015, 0.86, 0.86);

// add employee name and designation

doc.setFont('Poppins', 'bold');

doc.setFontSize(9);

doc.setTextColor('#fff');

doc.text(employee.name.toUpperCase(), 1.0625, 2.15, null, null, 'center');

doc.setFont('Poppins', 'medium');

doc.setFontSize(5.5);

doc.text(employee.designation, 1.0625, 2.267, null, null, 'center');

doc.setFontSize(6);

const employeeInfo = [

{

label: 'B Group',

value: employee.id,

},

{

label: 'Address',

value: employee.address,

},

{

label: 'Phone',

value: employee.phone,

},

{

label: 'Valid Until',

value: employee.validUntil,

},

];

employeeInfo.forEach((item, i) => {

doc.text(item.label, 0.360, 2.473 + 0.163 * i);

doc.text(':', 0.833, 2.473 + 0.163 * i);

doc.text(item.value, 0.909, 2.473 + 0.163 * i);

});

doc.addImage(REG_URI, 1.475, 2.700, 0.590, 0.590);

// serial number

doc.setTextColor('#ff0000');

doc.text(`SL.No : ${employee.serialNumber}`, 2.063, 0.1, null, null, "right");

// signature

doc.setTextColor('#ffe221');

doc.text('Signature of holder', 0.243, 3.267);

const employeeSignature = await getDataUri(employee.signature, 0.9 * 300, 0.093 * 300);

doc.addImage(employeeSignature, 0.333, 3.023, 0.9, 0.193);

}

document

.getElementById('idcard-preview')

.setAttribute('src', URL.createObjectURL(doc.output('blob')));

}


Подробнее здесь: https://stackoverflow.com/questions/793 ... ge-size-is