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:
@ -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