Skip to content

Parse image dimensions #445

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
kettanaito wants to merge 1 commit into
base: master
Choose a base branch
from
Draft

Parse image dimensions #445

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion lib/documents.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -183,7 +183,9 @@ function Image(options) {
});
},
altText: options.altText,
contentType: options.contentType
contentType: options.contentType,
height: options.height,
width: options.width,
};
}

Expand Down
31 changes: 23 additions & 8 deletions lib/docx/body-reader.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -525,24 +525,37 @@ function BodyReader(options) {
}

function readDrawingElement(element) {
var blips = element
var picture = element

@kettanaito kettanaito May 27, 2025

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm lifting up the picture node reference so we don't have to look it up multiple times. If this is premature, let me know.

.getElementsByTagName("a:graphic")
.getElementsByTagName("a:graphicData")
.getElementsByTagName("pic:pic")
var blips = picture
.getElementsByTagName("pic:blipFill")
.getElementsByTagName("a:blip");

return combineResults(blips.map(readBlip.bind(null, element)));
var dimensions =

@kettanaito kettanaito May 27, 2025

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Some vendors (Microsoft, Google Docs) store image dimensions in wp:extent while others, like Apple Pages, set the on the pic:pic node instead. We have to parse both scenarios (they describe the same thing and are mutually exclusive).

element.first('wp:extent') ||
picture

@kettanaito kettanaito May 27, 2025

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do you implement safe nested property access in .getElementsByTagName()? If not, why aren't we checking if the referenced tags exist?

.getElementsByTagName('pic:spPr')
.getElementsByTagName('x:xfrm')
.attributes['a:ext']

return combineResults(blips.map((blip) => {
return readBlip(element, blip, dimensions)

@kettanaito kettanaito May 27, 2025

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm unwrapping the map function because there's no benefit to keeping it inlined. It only confuses the argument order.

}));
}

function readBlip(element, blip) {
function readBlip(element, blip, dimensions) {
var properties = element.first("wp:docPr").attributes;
var altText = isBlank(properties.descr) ? properties.title : properties.descr;
var blipImageFile = findBlipImageFile(blip);
if (blipImageFile === null) {
return emptyResultWithMessages([warning("Could not find image file for a:blip element")]);
} else {
return readImage(blipImageFile, altText);
return readImage(blipImageFile, {
altText,
height: dimensions.attributes['cy'],

@kettanaito kettanaito May 27, 2025

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Image dimensions are defined on a higher node than blips, so I assume dimensions apply to all blips. Let me know if I'm wrong in this assumption.

width: dimensions.attributes['cx'],
});
}
}

Expand Down Expand Up @@ -586,13 +599,15 @@ function BodyReader(options) {
};
}

function readImage(imageFile, altText) {
function readImage(imageFile, options) {
var contentType = contentTypes.findContentType(imageFile.path);

var image = documents.Image({
readImage: imageFile.read,
altText: altText,
contentType: contentType
altText: options.altText,
contentType: contentType,
height: options.height,
width: options.width
});
var warnings = supportedImageTypes[contentType] ?
[] : warning("Image of type " + contentType + " is unlikely to display in web browsers");
Expand Down