Create a gist now

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Split image for pdfMake
const PAGE_HEIGHT = 700;
const PAGE_WIDTH = 500;
const content = [];
function getPngDimensions (base64) {
const header = atob(base64.slice(22, 70)).slice(16, 24);
const uint8 = Uint8Array.from(header, c => c.charCodeAt(0));
const dataView = new DataView(uint8.buffer);
return {
width: dataView.getInt32(0),
height: dataView.getInt32(4)
};
}
const splitImage = (img, content, callback) => () => {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const printHeight = img.height * PAGE_WIDTH / img.width;
canvas.width = PAGE_WIDTH;
for (let pages = 0; printHeight > pages * PAGE_HEIGHT; pages++) {
/* Don't use full height for the last image */
canvas.height = Math.min(PAGE_HEIGHT, printHeight - pages * PAGE_HEIGHT);
ctx.drawImage(img, 0, -pages * PAGE_HEIGHT, canvas.width, printHeight);
content.push({ image: canvas.toDataURL(), margin: [0, 5], width: PAGE_WIDTH });
}
callback();
};
function next () {
/* add other content here, can call addImage() again for example */
pdfMake.createPdf({ content }).download();
}
function addImage () {
/* Load big image */
const image = 'data:image/png;base64,iVBORw0Kgo…';
const { width, height } = getPngDimensions(image);
const printHeight = height * PAGE_WIDTH / width;
if (printHeight > PAGE_HEIGHT) {
const img = new Image();
img.onload = splitImage(img, content, next);
img.src = image;
return;
}
content.push({ image, margin: [0, 5], width: PAGE_WIDTH });
next();
}
addImage();
@HarshSaudagar

This comment has been minimized.

Show comment
Hide comment
@HarshSaudagar

HarshSaudagar Jan 3, 2018

function getPngDimensions (base64) {
    const header = atob(base64.slice(22, 70)).slice(16, 24);
    const uint8 = Uint8Array.from(header, c => c.charCodeAt(0));
    const dataView = new DataView(uint8.buffer);

    return {
        width: dataView.getInt32(0),
        height: dataView.getInt32(4)
    };
}

New to Javascript and web deveIopment. I didn't understand what this function does exactly? Could please explain ?
Especially const header = atob(base64.slice(22, 70)).slice(16, 24);.

Thanks in advance

function getPngDimensions (base64) {
    const header = atob(base64.slice(22, 70)).slice(16, 24);
    const uint8 = Uint8Array.from(header, c => c.charCodeAt(0));
    const dataView = new DataView(uint8.buffer);

    return {
        width: dataView.getInt32(0),
        height: dataView.getInt32(4)
    };
}

New to Javascript and web deveIopment. I didn't understand what this function does exactly? Could please explain ?
Especially const header = atob(base64.slice(22, 70)).slice(16, 24);.

Thanks in advance

@xreign

This comment has been minimized.

Show comment
Hide comment
@xreign

xreign Apr 24, 2018

Any angularjs version of this?

xreign commented Apr 24, 2018

Any angularjs version of this?

@kriscoleman

This comment has been minimized.

Show comment
Hide comment
@kriscoleman

kriscoleman May 2, 2018

AngularJS should just work with this... it just runs JS and that's all this is.

AngularJS should just work with this... it just runs JS and that's all this is.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment