smartyellow/docx-js
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add SVG image suport (#2487)

Browse Source 
* 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
Download Patch File Download Diff File Expand all files Collapse all files

133
src/file/paragraph/run/image-run.ts
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");
}
}
}