diff --git a/packages/plugin-print/middle-aligned.png b/packages/plugin-print/middle-aligned.png new file mode 100644 index 000000000..8e899c3de Binary files /dev/null and b/packages/plugin-print/middle-aligned.png differ diff --git a/packages/plugin-print/src/index.js b/packages/plugin-print/src/index.js index 1f5a28410..c47e1fa44 100644 --- a/packages/plugin-print/src/index.js +++ b/packages/plugin-print/src/index.js @@ -259,7 +259,11 @@ export default () => ({ let alignmentX; let alignmentY; - if (typeof text === 'object' && text.text !== null && text.text !== undefined) { + if ( + typeof text === 'object' && + text.text !== null && + text.text !== undefined + ) { alignmentX = text.alignmentX || this.constructor.HORIZONTAL_ALIGN_LEFT; alignmentY = text.alignmentY || this.constructor.VERTICAL_ALIGN_TOP; ({ text } = text); @@ -273,12 +277,12 @@ export default () => ({ maxHeight !== Infinity && alignmentY === this.constructor.VERTICAL_ALIGN_BOTTOM ) { - y = maxHeight - measureTextHeight(font, text, maxWidth); + y += maxHeight - measureTextHeight(font, text, maxWidth); } else if ( maxHeight !== Infinity && alignmentY === this.constructor.VERTICAL_ALIGN_MIDDLE ) { - y = maxHeight / 2 - measureTextHeight(font, text, maxWidth) / 2; + y += maxHeight / 2 - measureTextHeight(font, text, maxWidth) / 2; } const defaultCharWidth = Object.entries(font.chars)[0][1].xadvance; diff --git a/packages/plugin-print/test/images/bottom-aligned-y.png b/packages/plugin-print/test/images/bottom-aligned-y.png new file mode 100644 index 000000000..bbb960b28 Binary files /dev/null and b/packages/plugin-print/test/images/bottom-aligned-y.png differ diff --git a/packages/plugin-print/test/images/middle-aligned-y.png b/packages/plugin-print/test/images/middle-aligned-y.png new file mode 100644 index 000000000..c91278d4b Binary files /dev/null and b/packages/plugin-print/test/images/middle-aligned-y.png differ diff --git a/packages/plugin-print/test/print.test.js b/packages/plugin-print/test/print.test.js index c36f63275..b8dad7cee 100644 --- a/packages/plugin-print/test/print.test.js +++ b/packages/plugin-print/test/print.test.js @@ -12,14 +12,12 @@ async function createTextImage( width, height, font, - options, - maxWidth, - maxHeight + { x = 0, y = 0, text, maxWidth, maxHeight } ) { const loadedFont = await jimp.loadFont(font); const image = await Jimp.create(width, height, 0xffffffff); - return image.print(loadedFont, 0, 0, options, maxWidth, maxHeight); + return image.print(loadedFont, x, y, text, maxWidth, maxHeight); } describe('Write text over image', function() { @@ -110,141 +108,144 @@ describe('Write text over image', function() { const expectedImage = await Jimp.read( getTestDir(__dirname) + '/images/left-aligned.png' ); - const textImage = createTextImage( - 320, - 240, - Jimp.FONT_SANS_16_BLACK, - 'This is only a test.', - 100 - ); - - return Promise.all([expectedImage, textImage]).then(results => { - results[0].bitmap.data.should.be.deepEqual(results[1].bitmap.data); + const textImage = await createTextImage(320, 240, Jimp.FONT_SANS_16_BLACK, { + text: 'This is only a test.', + maxWidth: 100 }); + + expectedImage.bitmap.data.should.be.deepEqual(textImage.bitmap.data); }); it('left-align text by default when passing object', async () => { const expectedImage = await Jimp.read( getTestDir(__dirname) + '/images/left-aligned.png' ); - const textImage = createTextImage( - 320, - 240, - Jimp.FONT_SANS_16_BLACK, - { text: 'This is only a test.' }, - 100 - ); - - return Promise.all([expectedImage, textImage]).then(results => { - results[0].bitmap.data.should.be.deepEqual(results[1].bitmap.data); + const textImage = await createTextImage(320, 240, Jimp.FONT_SANS_16_BLACK, { + text: { text: 'This is only a test.' }, + maxWidth: 100 }); + + expectedImage.bitmap.data.should.be.deepEqual(textImage.bitmap.data); }); it('left-align text when passing object with alignmentX', async () => { const expectedImage = await Jimp.read( getTestDir(__dirname) + '/images/left-aligned.png' ); - const textImage = createTextImage( - 320, - 240, - Jimp.FONT_SANS_16_BLACK, - { + const textImage = await createTextImage(320, 240, Jimp.FONT_SANS_16_BLACK, { + text: { text: 'This is only a test.', alignmentX: Jimp.HORIZONTAL_ALIGN_LEFT }, - 100 - ); - - return Promise.all([expectedImage, textImage]).then(results => { - results[0].bitmap.data.should.be.deepEqual(results[1].bitmap.data); + maxWidth: 100 }); + + expectedImage.bitmap.data.should.be.deepEqual(textImage.bitmap.data); }); it('center-align text when passing object with alignmentX', async () => { const expectedImage = await Jimp.read( getTestDir(__dirname) + '/images/center-aligned.png' ); - const textImage = createTextImage( - 320, - 240, - Jimp.FONT_SANS_16_BLACK, - { + const textImage = await createTextImage(320, 240, Jimp.FONT_SANS_16_BLACK, { + text: { text: 'This is only a test.', alignmentX: Jimp.HORIZONTAL_ALIGN_CENTER }, - 100 - ); - - return Promise.all([expectedImage, textImage]).then(results => { - results[0].bitmap.data.should.be.deepEqual(results[1].bitmap.data); + maxWidth: 100 }); + + expectedImage.bitmap.data.should.be.deepEqual(textImage.bitmap.data); }); it('right-align text when passing object with alignmentX', async () => { const expectedImage = await Jimp.read( getTestDir(__dirname) + '/images/right-aligned.png' ); - const textImage = createTextImage( - 320, - 240, - Jimp.FONT_SANS_16_BLACK, - { + const textImage = await createTextImage(320, 240, Jimp.FONT_SANS_16_BLACK, { + text: { text: 'This is only a test.', alignmentX: Jimp.HORIZONTAL_ALIGN_RIGHT }, - 100 - ); - - return Promise.all([expectedImage, textImage]).then(results => { - results[0].bitmap.data.should.be.deepEqual(results[1].bitmap.data); + maxWidth: 100 }); + + expectedImage.bitmap.data.should.be.deepEqual(textImage.bitmap.data); }); it('middle-align text when passing object with alignmentY', async () => { const expectedImage = await Jimp.read( getTestDir(__dirname) + '/images/middle-aligned.png' ); - const textImage = createTextImage( - 320, - 240, - Jimp.FONT_SANS_16_BLACK, - { + const textImage = await createTextImage(320, 240, Jimp.FONT_SANS_16_BLACK, { + text: { text: 'This is only a test.', alignmentY: Jimp.VERTICAL_ALIGN_MIDDLE }, - 100, - 240 + maxWidth: 100, + maxHeight: 240 + }); + + textImage.writeAsync('middle-aligned.png'); + + expectedImage.bitmap.data.should.be.deepEqual(textImage.bitmap.data); + }); + + it('middle-align text when passing object with alignmentY can offset y', async () => { + const expectedImage = await Jimp.read( + getTestDir(__dirname) + '/images/middle-aligned-y.png' ); + const textImage = await createTextImage(320, 240, Jimp.FONT_SANS_16_BLACK, { + y: 50, + text: { + text: 'This is only a test.', - return Promise.all([expectedImage, textImage]).then(results => { - results[0].bitmap.data.should.be.deepEqual(results[1].bitmap.data); + alignmentY: Jimp.VERTICAL_ALIGN_MIDDLE + }, + maxWidth: 100, + maxHeight: 240 }); + + expectedImage.bitmap.data.should.be.deepEqual(textImage.bitmap.data); }); it('bottom-align text when passing object with alignmentY', async () => { const expectedImage = await Jimp.read( getTestDir(__dirname) + '/images/bottom-aligned.png' ); - const textImage = createTextImage( - 320, - 240, - Jimp.FONT_SANS_16_BLACK, - { + const textImage = await createTextImage(320, 240, Jimp.FONT_SANS_16_BLACK, { + text: { text: 'This is only a test.', alignmentY: Jimp.VERTICAL_ALIGN_BOTTOM }, - 100, - 240 + maxWidth: 100, + maxHeight: 240 + }); + + expectedImage.bitmap.data.should.be.deepEqual(textImage.bitmap.data); + }); + + it('bottom-align text when passing object with alignmentY offset y', async () => { + const expectedImage = await Jimp.read( + getTestDir(__dirname) + '/images/bottom-aligned-y.png' ); + const textImage = await createTextImage(320, 240, Jimp.FONT_SANS_16_BLACK, { + y: 100, + text: { + text: 'This is only a test.', - return Promise.all([expectedImage, textImage]).then(results => { - results[0].bitmap.data.should.be.deepEqual(results[1].bitmap.data); + alignmentY: Jimp.VERTICAL_ALIGN_BOTTOM + }, + maxWidth: 100, + maxHeight: 100 }); + + expectedImage.bitmap.data.should.be.deepEqual(textImage.bitmap.data); }); it('exposes print y position in cb', async () => {