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:
Dolan
2023-12-31 18:54:35 +00:00
committed by GitHub
parent 7570fc2bf5
commit 24c159de37
27 changed files with 615 additions and 118 deletions

View File

@ -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}",
}),
},
},
],
},
],
},
],
},
]),
},
]),
},
]),
},
]),
},
]),
},
],
},
],
});
});
});
});

View File

@ -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");
}
}
}

View File

@ -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;
}
}
}