Add SVG image suport (#2487)
* Add SVG blip extentions * SVG Image feature now works * Add and simplify tests * Fix falsey issue with file Write tests 100% Coverage
This commit is contained in:
@ -25,12 +25,13 @@ describe("ContentTypes", () => {
|
||||
expect(tree["Types"][3]).to.deep.equal({ Default: { _attr: { ContentType: "image/jpeg", Extension: "jpg" } } });
|
||||
expect(tree["Types"][4]).to.deep.equal({ Default: { _attr: { ContentType: "image/bmp", Extension: "bmp" } } });
|
||||
expect(tree["Types"][5]).to.deep.equal({ Default: { _attr: { ContentType: "image/gif", Extension: "gif" } } });
|
||||
expect(tree["Types"][6]).to.deep.equal({
|
||||
expect(tree["Types"][6]).to.deep.equal({ Default: { _attr: { ContentType: "image/svg+xml", Extension: "svg" } } });
|
||||
expect(tree["Types"][7]).to.deep.equal({
|
||||
Default: { _attr: { ContentType: "application/vnd.openxmlformats-package.relationships+xml", Extension: "rels" } },
|
||||
});
|
||||
expect(tree["Types"][7]).to.deep.equal({ Default: { _attr: { ContentType: "application/xml", Extension: "xml" } } });
|
||||
expect(tree["Types"][8]).to.deep.equal({ Default: { _attr: { ContentType: "application/xml", Extension: "xml" } } });
|
||||
|
||||
expect(tree["Types"][8]).to.deep.equal({
|
||||
expect(tree["Types"][9]).to.deep.equal({
|
||||
Default: {
|
||||
_attr: {
|
||||
ContentType: "application/vnd.openxmlformats-officedocument.obfuscatedFont",
|
||||
@ -38,7 +39,7 @@ describe("ContentTypes", () => {
|
||||
},
|
||||
},
|
||||
});
|
||||
expect(tree["Types"][9]).to.deep.equal({
|
||||
expect(tree["Types"][10]).to.deep.equal({
|
||||
Override: {
|
||||
_attr: {
|
||||
ContentType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document.main+xml",
|
||||
@ -46,7 +47,7 @@ describe("ContentTypes", () => {
|
||||
},
|
||||
},
|
||||
});
|
||||
expect(tree["Types"][10]).to.deep.equal({
|
||||
expect(tree["Types"][11]).to.deep.equal({
|
||||
Override: {
|
||||
_attr: {
|
||||
ContentType: "application/vnd.openxmlformats-officedocument.wordprocessingml.styles+xml",
|
||||
@ -54,7 +55,7 @@ describe("ContentTypes", () => {
|
||||
},
|
||||
},
|
||||
});
|
||||
expect(tree["Types"][11]).to.deep.equal({
|
||||
expect(tree["Types"][12]).to.deep.equal({
|
||||
Override: {
|
||||
_attr: {
|
||||
ContentType: "application/vnd.openxmlformats-package.core-properties+xml",
|
||||
@ -62,7 +63,7 @@ describe("ContentTypes", () => {
|
||||
},
|
||||
},
|
||||
});
|
||||
expect(tree["Types"][12]).to.deep.equal({
|
||||
expect(tree["Types"][13]).to.deep.equal({
|
||||
Override: {
|
||||
_attr: {
|
||||
ContentType: "application/vnd.openxmlformats-officedocument.custom-properties+xml",
|
||||
@ -70,7 +71,7 @@ describe("ContentTypes", () => {
|
||||
},
|
||||
},
|
||||
});
|
||||
expect(tree["Types"][13]).to.deep.equal({
|
||||
expect(tree["Types"][14]).to.deep.equal({
|
||||
Override: {
|
||||
_attr: {
|
||||
ContentType: "application/vnd.openxmlformats-officedocument.extended-properties+xml",
|
||||
@ -78,7 +79,7 @@ describe("ContentTypes", () => {
|
||||
},
|
||||
},
|
||||
});
|
||||
expect(tree["Types"][14]).to.deep.equal({
|
||||
expect(tree["Types"][15]).to.deep.equal({
|
||||
Override: {
|
||||
_attr: {
|
||||
ContentType: "application/vnd.openxmlformats-officedocument.wordprocessingml.numbering+xml",
|
||||
@ -86,7 +87,7 @@ describe("ContentTypes", () => {
|
||||
},
|
||||
},
|
||||
});
|
||||
expect(tree["Types"][15]).to.deep.equal({
|
||||
expect(tree["Types"][16]).to.deep.equal({
|
||||
Override: {
|
||||
_attr: {
|
||||
ContentType: "application/vnd.openxmlformats-officedocument.wordprocessingml.footnotes+xml",
|
||||
@ -94,7 +95,7 @@ describe("ContentTypes", () => {
|
||||
},
|
||||
},
|
||||
});
|
||||
expect(tree["Types"][16]).to.deep.equal({
|
||||
expect(tree["Types"][17]).to.deep.equal({
|
||||
Override: {
|
||||
_attr: {
|
||||
ContentType: "application/vnd.openxmlformats-officedocument.wordprocessingml.settings+xml",
|
||||
@ -111,7 +112,7 @@ describe("ContentTypes", () => {
|
||||
contentTypes.addFooter(102);
|
||||
const tree = new Formatter().format(contentTypes);
|
||||
|
||||
expect(tree["Types"][19]).to.deep.equal({
|
||||
expect(tree["Types"][20]).to.deep.equal({
|
||||
Override: {
|
||||
_attr: {
|
||||
ContentType: "application/vnd.openxmlformats-officedocument.wordprocessingml.footer+xml",
|
||||
@ -120,7 +121,7 @@ describe("ContentTypes", () => {
|
||||
},
|
||||
});
|
||||
|
||||
expect(tree["Types"][20]).to.deep.equal({
|
||||
expect(tree["Types"][21]).to.deep.equal({
|
||||
Override: {
|
||||
_attr: {
|
||||
ContentType: "application/vnd.openxmlformats-officedocument.wordprocessingml.footer+xml",
|
||||
@ -137,7 +138,7 @@ describe("ContentTypes", () => {
|
||||
contentTypes.addHeader(202);
|
||||
const tree = new Formatter().format(contentTypes);
|
||||
|
||||
expect(tree["Types"][19]).to.deep.equal({
|
||||
expect(tree["Types"][20]).to.deep.equal({
|
||||
Override: {
|
||||
_attr: {
|
||||
ContentType: "application/vnd.openxmlformats-officedocument.wordprocessingml.header+xml",
|
||||
@ -146,7 +147,7 @@ describe("ContentTypes", () => {
|
||||
},
|
||||
});
|
||||
|
||||
expect(tree["Types"][20]).to.deep.equal({
|
||||
expect(tree["Types"][21]).to.deep.equal({
|
||||
Override: {
|
||||
_attr: {
|
||||
ContentType: "application/vnd.openxmlformats-officedocument.wordprocessingml.header+xml",
|
||||
|
@ -18,6 +18,7 @@ export class ContentTypes extends XmlComponent {
|
||||
this.root.push(new Default("image/jpeg", "jpg"));
|
||||
this.root.push(new Default("image/bmp", "bmp"));
|
||||
this.root.push(new Default("image/gif", "gif"));
|
||||
this.root.push(new Default("image/svg+xml", "svg"));
|
||||
this.root.push(new Default("application/vnd.openxmlformats-package.relationships+xml", "rels"));
|
||||
this.root.push(new Default("application/xml", "xml"));
|
||||
this.root.push(new Default("application/vnd.openxmlformats-officedocument.obfuscatedFont", "odttf"));
|
||||
|
@ -11,8 +11,9 @@ import { Anchor } from "./anchor";
|
||||
const createAnchor = (drawingOptions: IDrawingOptions): Anchor =>
|
||||
new Anchor({
|
||||
mediaData: {
|
||||
type: "png",
|
||||
fileName: "test.png",
|
||||
stream: Buffer.from(""),
|
||||
data: Buffer.from(""),
|
||||
transformation: {
|
||||
pixels: {
|
||||
x: 0,
|
||||
|
@ -11,8 +11,9 @@ const imageBase64Data = `iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAMAAAD04JH5AAACzVBMVEU
|
||||
const createDrawing = (drawingOptions?: IDrawingOptions): Drawing =>
|
||||
new Drawing(
|
||||
{
|
||||
type: "jpg",
|
||||
fileName: "test.jpg",
|
||||
stream: Buffer.from(imageBase64Data, "base64"),
|
||||
data: Buffer.from(imageBase64Data, "base64"),
|
||||
transformation: {
|
||||
pixels: {
|
||||
x: 100,
|
||||
|
@ -0,0 +1,35 @@
|
||||
import { BuilderElement, XmlComponent } from "@file/xml-components";
|
||||
import { IMediaData } from "@file/media";
|
||||
|
||||
const createSvgBlip = (mediaData: IMediaData): XmlComponent =>
|
||||
new BuilderElement({
|
||||
name: "asvg:svgBlip",
|
||||
attributes: {
|
||||
asvg: {
|
||||
key: "xmlns:asvg",
|
||||
value: "http://schemas.microsoft.com/office/drawing/2016/SVG/main",
|
||||
},
|
||||
embed: {
|
||||
key: "r:embed",
|
||||
value: `rId{${mediaData.fileName}}`,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const createExtention = (mediaData: IMediaData): XmlComponent =>
|
||||
new BuilderElement({
|
||||
name: "a:ext",
|
||||
attributes: {
|
||||
uri: {
|
||||
key: "uri",
|
||||
value: "{96DAC541-7B7A-43D3-8B79-37D633B846F1}",
|
||||
},
|
||||
},
|
||||
children: [createSvgBlip(mediaData)],
|
||||
});
|
||||
|
||||
export const createExtentionList = (mediaData: IMediaData): XmlComponent =>
|
||||
new BuilderElement({
|
||||
name: "a:extLst",
|
||||
children: [createExtention(mediaData)],
|
||||
});
|
@ -1,7 +1,7 @@
|
||||
import { IMediaData } from "@file/media";
|
||||
import { XmlComponent } from "@file/xml-components";
|
||||
|
||||
import { Blip } from "./blip";
|
||||
import { createBlip } from "./blip";
|
||||
import { SourceRectangle } from "./source-rectangle";
|
||||
import { Stretch } from "./stretch";
|
||||
|
||||
@ -9,7 +9,7 @@ export class BlipFill extends XmlComponent {
|
||||
public constructor(mediaData: IMediaData) {
|
||||
super("pic:blipFill");
|
||||
|
||||
this.root.push(new Blip(mediaData));
|
||||
this.root.push(createBlip(mediaData));
|
||||
this.root.push(new SourceRectangle());
|
||||
this.root.push(new Stretch());
|
||||
}
|
||||
|
@ -1,24 +1,24 @@
|
||||
import { IMediaData } from "@file/media";
|
||||
import { XmlAttributeComponent, XmlComponent } from "@file/xml-components";
|
||||
import { BuilderElement, XmlComponent } from "@file/xml-components";
|
||||
import { createExtentionList } from "./blip-extentions";
|
||||
|
||||
class BlipAttributes extends XmlAttributeComponent<{
|
||||
type BlipAttributes = {
|
||||
readonly embed: string;
|
||||
readonly cstate: string;
|
||||
}> {
|
||||
protected readonly xmlKeys = {
|
||||
embed: "r:embed",
|
||||
cstate: "cstate",
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
export class Blip extends XmlComponent {
|
||||
public constructor(mediaData: IMediaData) {
|
||||
super("a:blip");
|
||||
this.root.push(
|
||||
new BlipAttributes({
|
||||
embed: `rId{${mediaData.fileName}}`,
|
||||
cstate: "none",
|
||||
}),
|
||||
);
|
||||
}
|
||||
}
|
||||
export const createBlip = (mediaData: IMediaData): XmlComponent =>
|
||||
new BuilderElement<BlipAttributes>({
|
||||
name: "a:blip",
|
||||
attributes: {
|
||||
embed: {
|
||||
key: "r:embed",
|
||||
value: `rId{${mediaData.type === "svg" ? mediaData.fallback.fileName : mediaData.fileName}}`,
|
||||
},
|
||||
cstate: {
|
||||
key: "cstate",
|
||||
value: "none",
|
||||
},
|
||||
},
|
||||
children: mediaData.type === "svg" ? [createExtentionList(mediaData)] : [],
|
||||
});
|
||||
|
@ -8,8 +8,9 @@ describe("Inline", () => {
|
||||
const tree = new Formatter().format(
|
||||
createInline({
|
||||
mediaData: {
|
||||
type: "png",
|
||||
fileName: "test.png",
|
||||
stream: Buffer.from(""),
|
||||
data: Buffer.from(""),
|
||||
transformation: {
|
||||
pixels: {
|
||||
x: 0,
|
||||
|
@ -436,7 +436,44 @@ describe("File", () => {
|
||||
it("should work with external styles", () => {
|
||||
const doc = new File({
|
||||
sections: [],
|
||||
externalStyles: "",
|
||||
externalStyles: `
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
|
||||
<w:styles xmlns:mc="first" xmlns:r="second">
|
||||
<w:docDefaults>
|
||||
<w:rPrDefault>
|
||||
<w:rPr>
|
||||
<w:rFonts w:ascii="Arial" w:eastAsiaTheme="minorHAnsi" w:hAnsi="Arial" w:cstheme="minorHAnsi"/>
|
||||
<w:lang w:val="en-US" w:eastAsia="en-US" w:bidi="ar-SA"/>
|
||||
</w:rPr>
|
||||
</w:rPrDefault>
|
||||
<w:pPrDefault>
|
||||
<w:pPr>
|
||||
<w:spacing w:after="160" w:line="259" w:lineRule="auto"/>
|
||||
</w:pPr>
|
||||
</w:pPrDefault>
|
||||
</w:docDefaults>
|
||||
|
||||
<w:latentStyles w:defLockedState="1" w:defUIPriority="99">
|
||||
</w:latentStyles>
|
||||
|
||||
<w:style w:type="paragraph" w:default="1" w:styleId="Normal">
|
||||
<w:name w:val="Normal"/>
|
||||
<w:qFormat/>
|
||||
</w:style>
|
||||
|
||||
<w:style w:type="paragraph" w:styleId="Heading1">
|
||||
<w:name w:val="heading 1"/>
|
||||
<w:basedOn w:val="Normal"/>
|
||||
<w:pPr>
|
||||
<w:keepNext/>
|
||||
<w:keepLines/>
|
||||
|
||||
<w:pBdr>
|
||||
<w:bottom w:val="single" w:sz="4" w:space="1" w:color="auto"/>
|
||||
</w:pBdr>
|
||||
</w:pPr>
|
||||
</w:style>
|
||||
</w:styles>`,
|
||||
});
|
||||
|
||||
expect(doc.Styles).to.not.be.undefined;
|
||||
|
@ -84,7 +84,7 @@ export class File {
|
||||
|
||||
this.media = new Media();
|
||||
|
||||
if (options.externalStyles) {
|
||||
if (options.externalStyles !== undefined) {
|
||||
const stylesFactory = new ExternalStylesFactory();
|
||||
this.styles = stylesFactory.newInstance(options.externalStyles);
|
||||
} else if (options.styles) {
|
||||
|
@ -14,11 +14,25 @@ export interface IMediaDataTransformation {
|
||||
readonly rotation?: number;
|
||||
}
|
||||
|
||||
export interface IMediaData {
|
||||
readonly stream: Buffer | Uint8Array | ArrayBuffer;
|
||||
type CoreMediaData = {
|
||||
readonly fileName: string;
|
||||
readonly transformation: IMediaDataTransformation;
|
||||
}
|
||||
readonly data: Buffer | Uint8Array | ArrayBuffer;
|
||||
};
|
||||
|
||||
type RegularMediaData = {
|
||||
readonly type: "jpg" | "png" | "gif" | "bmp";
|
||||
};
|
||||
|
||||
type SvgMediaData = {
|
||||
readonly type: "svg";
|
||||
/**
|
||||
* Required in case the Word processor does not support SVG.
|
||||
*/
|
||||
readonly fallback: RegularMediaData & CoreMediaData;
|
||||
};
|
||||
|
||||
export type IMediaData = (RegularMediaData | SvgMediaData) & CoreMediaData;
|
||||
|
||||
// Needed because of: https://github.com/s-panferov/awesome-typescript-loader/issues/432
|
||||
/**
|
||||
|
@ -19,7 +19,8 @@ describe("Media", () => {
|
||||
const media = new Media();
|
||||
|
||||
media.addImage("test2.png", {
|
||||
stream: Buffer.from(""),
|
||||
type: "png",
|
||||
data: Buffer.from(""),
|
||||
fileName: "test.png",
|
||||
transformation: {
|
||||
pixels: {
|
||||
|
@ -19,6 +19,7 @@ describe("ImageRun", () => {
|
||||
describe("#constructor()", () => {
|
||||
it("should create with Buffer", () => {
|
||||
const currentImageRun = new ImageRun({
|
||||
type: "png",
|
||||
data: Buffer.from(""),
|
||||
transformation: {
|
||||
width: 200,
|
||||
@ -39,8 +40,7 @@ describe("ImageRun", () => {
|
||||
const tree = new Formatter().format(currentImageRun, {
|
||||
file: {
|
||||
Media: {
|
||||
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
||||
addImage: () => {},
|
||||
addImage: vi.fn(),
|
||||
},
|
||||
} as unknown as File,
|
||||
viewWrapper: {} as unknown as IViewWrapper,
|
||||
@ -271,6 +271,7 @@ describe("ImageRun", () => {
|
||||
|
||||
it("should create with string", () => {
|
||||
const currentImageRun = new ImageRun({
|
||||
type: "png",
|
||||
data: "",
|
||||
transformation: {
|
||||
width: 200,
|
||||
@ -291,8 +292,7 @@ describe("ImageRun", () => {
|
||||
const tree = new Formatter().format(currentImageRun, {
|
||||
file: {
|
||||
Media: {
|
||||
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
||||
addImage: () => {},
|
||||
addImage: vi.fn(),
|
||||
},
|
||||
} as unknown as File,
|
||||
viewWrapper: {} as unknown as IViewWrapper,
|
||||
@ -522,10 +522,10 @@ describe("ImageRun", () => {
|
||||
});
|
||||
|
||||
it("should return UInt8Array if atob is present", () => {
|
||||
// eslint-disable-next-line functional/immutable-data
|
||||
global.atob = () => "atob result";
|
||||
vi.spyOn(global, "atob").mockReturnValue("atob result");
|
||||
|
||||
const currentImageRun = new ImageRun({
|
||||
type: "png",
|
||||
data: "",
|
||||
transformation: {
|
||||
width: 200,
|
||||
@ -546,8 +546,7 @@ describe("ImageRun", () => {
|
||||
const tree = new Formatter().format(currentImageRun, {
|
||||
file: {
|
||||
Media: {
|
||||
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
||||
addImage: () => {},
|
||||
addImage: vi.fn(),
|
||||
},
|
||||
} as unknown as File,
|
||||
viewWrapper: {} as unknown as IViewWrapper,
|
||||
@ -775,16 +774,13 @@ describe("ImageRun", () => {
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any, functional/immutable-data
|
||||
(global as any).atob = undefined;
|
||||
});
|
||||
|
||||
it("should use data as is if its not a string", () => {
|
||||
// eslint-disable-next-line functional/immutable-data
|
||||
global.atob = () => "atob result";
|
||||
vi.spyOn(global, "atob").mockReturnValue("atob result");
|
||||
|
||||
const currentImageRun = new ImageRun({
|
||||
type: "png",
|
||||
data: "",
|
||||
transformation: {
|
||||
width: 200,
|
||||
@ -805,8 +801,7 @@ describe("ImageRun", () => {
|
||||
const tree = new Formatter().format(currentImageRun, {
|
||||
file: {
|
||||
Media: {
|
||||
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
||||
addImage: () => {},
|
||||
addImage: vi.fn(),
|
||||
},
|
||||
} as unknown as File,
|
||||
viewWrapper: {} as unknown as IViewWrapper,
|
||||
@ -1034,9 +1029,107 @@ describe("ImageRun", () => {
|
||||
},
|
||||
],
|
||||
});
|
||||
});
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any, functional/immutable-data
|
||||
(global as any).atob = undefined;
|
||||
it("should strip base64 marker", () => {
|
||||
const spy = vi.spyOn(global, "atob").mockReturnValue("atob result");
|
||||
|
||||
new ImageRun({
|
||||
type: "png",
|
||||
data: ";base64,",
|
||||
transformation: {
|
||||
width: 200,
|
||||
height: 200,
|
||||
rotation: 45,
|
||||
},
|
||||
});
|
||||
|
||||
expect(spy).toBeCalledWith("");
|
||||
});
|
||||
|
||||
it("should work with svgs", () => {
|
||||
const currentImageRun = new ImageRun({
|
||||
type: "svg",
|
||||
data: Buffer.from(""),
|
||||
transformation: {
|
||||
width: 200,
|
||||
height: 200,
|
||||
},
|
||||
fallback: {
|
||||
type: "png",
|
||||
data: Buffer.from(""),
|
||||
},
|
||||
});
|
||||
|
||||
const tree = new Formatter().format(currentImageRun, {
|
||||
file: {
|
||||
Media: {
|
||||
addImage: vi.fn(),
|
||||
},
|
||||
} as unknown as File,
|
||||
viewWrapper: {} as unknown as IViewWrapper,
|
||||
stack: [],
|
||||
});
|
||||
|
||||
expect(tree).toStrictEqual({
|
||||
"w:r": [
|
||||
{
|
||||
"w:drawing": [
|
||||
{
|
||||
"wp:inline": expect.arrayContaining([
|
||||
{
|
||||
"a:graphic": expect.arrayContaining([
|
||||
{
|
||||
"a:graphicData": expect.arrayContaining([
|
||||
{
|
||||
"pic:pic": expect.arrayContaining([
|
||||
{
|
||||
"pic:blipFill": expect.arrayContaining([
|
||||
{
|
||||
"a:blip": [
|
||||
{
|
||||
_attr: {
|
||||
cstate: "none",
|
||||
"r:embed": "rId{test-unique-id.png}",
|
||||
},
|
||||
},
|
||||
{
|
||||
"a:extLst": [
|
||||
{
|
||||
"a:ext": [
|
||||
{
|
||||
_attr: {
|
||||
uri: "{96DAC541-7B7A-43D3-8B79-37D633B846F1}",
|
||||
},
|
||||
},
|
||||
{
|
||||
"asvg:svgBlip": {
|
||||
_attr: expect.objectContaining({
|
||||
"r:embed":
|
||||
"rId{test-unique-id.svg}",
|
||||
}),
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
]),
|
||||
},
|
||||
]),
|
||||
},
|
||||
]),
|
||||
},
|
||||
]),
|
||||
},
|
||||
]),
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
@ -9,38 +9,102 @@ import { IMediaTransformation } from "../../media";
|
||||
import { IMediaData } from "../../media/data";
|
||||
import { Run } from "../run";
|
||||
|
||||
export interface IImageOptions {
|
||||
readonly data: Buffer | string | Uint8Array | ArrayBuffer;
|
||||
type CoreImageOptions = {
|
||||
readonly transformation: IMediaTransformation;
|
||||
readonly floating?: IFloating;
|
||||
readonly altText?: DocPropertiesOptions;
|
||||
readonly outline?: OutlineOptions;
|
||||
}
|
||||
};
|
||||
|
||||
type RegularImageOptions = {
|
||||
readonly type: "jpg" | "png" | "gif" | "bmp";
|
||||
readonly data: Buffer | string | Uint8Array | ArrayBuffer;
|
||||
};
|
||||
|
||||
type SvgMediaOptions = {
|
||||
readonly type: "svg";
|
||||
readonly data: Buffer | string | Uint8Array | ArrayBuffer;
|
||||
/**
|
||||
* Required in case the Word processor does not support SVG.
|
||||
*/
|
||||
readonly fallback: RegularImageOptions;
|
||||
};
|
||||
|
||||
export type IImageOptions = (RegularImageOptions | SvgMediaOptions) & CoreImageOptions;
|
||||
|
||||
const convertDataURIToBinary = (dataURI: string): Uint8Array => {
|
||||
if (typeof atob === "function") {
|
||||
// https://gist.github.com/borismus/1032746
|
||||
// https://github.com/mafintosh/base64-to-uint8array
|
||||
const BASE64_MARKER = ";base64,";
|
||||
const base64Index = dataURI.indexOf(BASE64_MARKER);
|
||||
|
||||
const base64IndexWithOffset = base64Index === -1 ? 0 : base64Index + BASE64_MARKER.length;
|
||||
|
||||
return new Uint8Array(
|
||||
atob(dataURI.substring(base64IndexWithOffset))
|
||||
.split("")
|
||||
.map((c) => c.charCodeAt(0)),
|
||||
);
|
||||
/* c8 ignore next 6 */
|
||||
} else {
|
||||
// Not possible to test this branch in NodeJS
|
||||
// eslint-disable-next-line @typescript-eslint/no-require-imports, @typescript-eslint/no-var-requires
|
||||
const b = require("buf" + "fer");
|
||||
return new b.Buffer(dataURI, "base64");
|
||||
}
|
||||
};
|
||||
|
||||
const standardizeData = (data: string | Buffer | Uint8Array | ArrayBuffer): Buffer | Uint8Array | ArrayBuffer =>
|
||||
typeof data === "string" ? convertDataURIToBinary(data) : data;
|
||||
|
||||
const createImageData = (options: IImageOptions, key: string): Pick<IMediaData, "data" | "fileName" | "transformation"> => ({
|
||||
data: standardizeData(options.data),
|
||||
fileName: key,
|
||||
transformation: {
|
||||
pixels: {
|
||||
x: Math.round(options.transformation.width),
|
||||
y: Math.round(options.transformation.height),
|
||||
},
|
||||
emus: {
|
||||
x: Math.round(options.transformation.width * 9525),
|
||||
y: Math.round(options.transformation.height * 9525),
|
||||
},
|
||||
flip: options.transformation.flip,
|
||||
rotation: options.transformation.rotation ? options.transformation.rotation * 60000 : undefined,
|
||||
},
|
||||
});
|
||||
|
||||
export class ImageRun extends Run {
|
||||
private readonly key = `${uniqueId()}.png`;
|
||||
private readonly key: string;
|
||||
private readonly fallbackKey = `${uniqueId()}.png`;
|
||||
private readonly imageData: IMediaData;
|
||||
|
||||
public constructor(options: IImageOptions) {
|
||||
super({});
|
||||
const newData = typeof options.data === "string" ? this.convertDataURIToBinary(options.data) : options.data;
|
||||
|
||||
this.imageData = {
|
||||
stream: newData,
|
||||
fileName: this.key,
|
||||
transformation: {
|
||||
pixels: {
|
||||
x: Math.round(options.transformation.width),
|
||||
y: Math.round(options.transformation.height),
|
||||
},
|
||||
emus: {
|
||||
x: Math.round(options.transformation.width * 9525),
|
||||
y: Math.round(options.transformation.height * 9525),
|
||||
},
|
||||
flip: options.transformation.flip,
|
||||
rotation: options.transformation.rotation ? options.transformation.rotation * 60000 : undefined,
|
||||
},
|
||||
};
|
||||
this.key = `${uniqueId()}.${options.type}`;
|
||||
|
||||
this.imageData =
|
||||
options.type === "svg"
|
||||
? {
|
||||
type: options.type,
|
||||
...createImageData(options, this.key),
|
||||
fallback: {
|
||||
type: options.fallback.type,
|
||||
...createImageData(
|
||||
{
|
||||
...options.fallback,
|
||||
transformation: options.transformation,
|
||||
},
|
||||
this.fallbackKey,
|
||||
),
|
||||
},
|
||||
}
|
||||
: {
|
||||
type: options.type,
|
||||
...createImageData(options, this.key),
|
||||
};
|
||||
const drawing = new Drawing(this.imageData, {
|
||||
floating: options.floating,
|
||||
docProperties: options.altText,
|
||||
@ -53,29 +117,10 @@ export class ImageRun extends Run {
|
||||
public prepForXml(context: IContext): IXmlableObject | undefined {
|
||||
context.file.Media.addImage(this.key, this.imageData);
|
||||
|
||||
if (this.imageData.type === "svg") {
|
||||
context.file.Media.addImage(this.fallbackKey, this.imageData.fallback);
|
||||
}
|
||||
|
||||
return super.prepForXml(context);
|
||||
}
|
||||
|
||||
private convertDataURIToBinary(dataURI: string): Uint8Array {
|
||||
if (typeof atob === "function") {
|
||||
// https://gist.github.com/borismus/1032746
|
||||
// https://github.com/mafintosh/base64-to-uint8array
|
||||
const BASE64_MARKER = ";base64,";
|
||||
const base64Index = dataURI.indexOf(BASE64_MARKER);
|
||||
|
||||
const base64IndexWithOffset = base64Index === -1 ? 0 : base64Index + BASE64_MARKER.length;
|
||||
|
||||
return new Uint8Array(
|
||||
atob(dataURI.substring(base64IndexWithOffset))
|
||||
.split("")
|
||||
.map((c) => c.charCodeAt(0)),
|
||||
);
|
||||
/* c8 ignore next 6 */
|
||||
} else {
|
||||
// Not possible to test this branch in NodeJS
|
||||
// eslint-disable-next-line @typescript-eslint/no-require-imports, @typescript-eslint/no-var-requires
|
||||
const b = require("buf" + "fer");
|
||||
return new b.Buffer(dataURI, "base64");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -23,11 +23,9 @@ export class Text extends XmlComponent {
|
||||
if (typeof options === "string") {
|
||||
this.root.push(new TextAttributes({ space: SpaceType.PRESERVE }));
|
||||
this.root.push(options);
|
||||
return this;
|
||||
} else {
|
||||
this.root.push(new TextAttributes({ space: options.space ?? SpaceType.DEFAULT }));
|
||||
this.root.push(options.text);
|
||||
return this;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
Reference in New Issue
Block a user