xuguopeng/rrweb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix #811 expose inlineImages to record

Browse Source
This commit is contained in:
Yanzhen Yu
2026-04-01 12:00:00 +08:00
parent 73bfb6a59d
commit a7ea00cbec
10 changed files with 67 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
guide.zh_CN.md
View File

@@ -132,7 +132,7 @@ setInterval(save, 10 * 1000);
`rrweb.record(config)` 的 config 部分接受以下参数
| key | 默认值 | 功能 |
| -------------------- | ------------------ | ------------------------------------------------------------ |
| -------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| emit | 必填 | 获取当前录制的数据 |
| checkoutEveryNth | - | 每 N 次事件重新制作一次全量快照<br />详见[“重新制作快照”](#重新制作快照)章节 |
| checkoutEveryNms | - | 每 N 毫秒重新制作一次全量快照<br />详见[“重新制作快照”](#重新制作快照)章节 |
@@ -151,6 +151,7 @@ setInterval(save, 10 * 1000);
| packFn | - | 数据压缩函数，详见[优化存储策略](./docs/recipes/optimize-storage.zh_CN.md) |
| sampling | - | 数据抽样策略，详见[优化存储策略](./docs/recipes/optimize-storage.zh_CN.md) |
| recordCanvas | false | 是否记录 canvas 内容 |
| inlineImages | false | 是否将图片内容记内联录制 |
| collectFonts | false | 是否记录页面中的字体文件 |
| userTriggeredOnInput | false | [什么是 `userTriggered`](https://github.com/rrweb-io/rrweb/pull/495) |
| plugins | [] | 加载插件以获得额外的录制功能. [什么是插件？](./docs/recipes/plugin.zh_CN.md) |
@@ -282,7 +283,7 @@ replayer.pause(5000);
可以通过 `new rrweb.Replayer(events, options)` 的方式向 rrweb 传递回放时的配置参数，具体配置如下：
| key | 默认值 | 功能 |
| ------------------- | ------------- | ------------------------------------------------------------ |
| ------------------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| speed | 1 | 回放倍速 |
| root | document.body | 回放时使用的 HTML 元素 |
| loadTimeout | 0 | 加载异步样式表的超时时长 |

4
packages/rrweb/src/record/index.ts
View File

@@ -59,6 +59,7 @@ function record<T = eventWithTime>(
recordCanvas = false,
userTriggeredOnInput = false,
collectFonts = false,
inlineImages = false,
plugins,
keepIframeSrcFn = () => false,
} = options;
@@ -197,6 +198,7 @@ function record<T = eventWithTime>(
maskTextFn,
maskInputFn,
recordCanvas,
inlineImages,
sampling,
slimDOMOptions,
iframeManager,
@@ -228,6 +230,7 @@ function record<T = eventWithTime>(
maskTextFn,
slimDOM: slimDOMOptions,
recordCanvas,
inlineImages,
onSerialize: (n) => {
if (isIframeINode(n)) {
iframeManager.addIframe(n);
@@ -390,6 +393,7 @@ function record<T = eventWithTime>(
inlineStylesheet,
sampling,
recordCanvas,
inlineImages,
userTriggeredOnInput,
collectFonts,
doc,

7
packages/rrweb/src/record/mutation.ts
View File

@@ -172,6 +172,7 @@ export default class MutationBuffer {
private maskTextFn: MaskTextFn | undefined;
private maskInputFn: MaskInputFn | undefined;
private recordCanvas: boolean;
private inlineImages: boolean;
private slimDOMOptions: SlimDOMOptions;
private doc: Document;
@@ -190,6 +191,7 @@ export default class MutationBuffer {
maskTextFn: MaskTextFn | undefined,
maskInputFn: MaskInputFn | undefined,
recordCanvas: boolean,
inlineImages: boolean,
slimDOMOptions: SlimDOMOptions,
doc: Document,
mirror: Mirror,
@@ -205,6 +207,7 @@ export default class MutationBuffer {
this.maskTextFn = maskTextFn;
this.maskInputFn = maskInputFn;
this.recordCanvas = recordCanvas;
this.inlineImages = inlineImages;
this.slimDOMOptions = slimDOMOptions;
this.emissionCallback = cb;
this.doc = doc;
@@ -296,6 +299,7 @@ export default class MutationBuffer {
maskInputFn: this.maskInputFn,
slimDOMOptions: this.slimDOMOptions,
recordCanvas: this.recordCanvas,
inlineImages: this.inlineImages,
onSerialize: (currentN) => {
if (isIframeINode(currentN)) {
this.iframeManager.addIframe(currentN);
@@ -504,7 +508,8 @@ export default class MutationBuffer {
}
}
for (const pname of Array.from(old.style)) {
if (target.style.getPropertyValue(pname) === '') { // "if not set, returns the empty string"
if (target.style.getPropertyValue(pname) === '') {
// "if not set, returns the empty string"
styleObj[pname] = false; // delete
}
}

3
packages/rrweb/src/record/observer.ts
View File

@@ -97,6 +97,7 @@ export function initMutationObserver(
maskTextFn: MaskTextFn | undefined,
maskInputFn: MaskInputFn | undefined,
recordCanvas: boolean,
inlineImages: boolean,
slimDOMOptions: SlimDOMOptions,
mirror: Mirror,
iframeManager: IframeManager,
@@ -117,6 +118,7 @@ export function initMutationObserver(
maskTextFn,
maskInputFn,
recordCanvas,
inlineImages,
slimDOMOptions,
doc,
mirror,
@@ -951,6 +953,7 @@ export function initObservers(
o.maskTextFn,
o.maskInputFn,
o.recordCanvas,
o.inlineImages,
o.slimDOMOptions,
o.mirror,
o.iframeManager,

2
packages/rrweb/src/record/shadow-dom-manager.ts
View File

@@ -25,6 +25,7 @@ type BypassOptions = {
maskTextFn: MaskTextFn | undefined;
maskInputFn: MaskInputFn | undefined;
recordCanvas: boolean;
inlineImages: boolean;
sampling: SamplingStrategy;
slimDOMOptions: SlimDOMOptions;
iframeManager: IframeManager;
@@ -61,6 +62,7 @@ export class ShadowDomManager {
this.bypassOptions.maskTextFn,
this.bypassOptions.maskInputFn,
this.bypassOptions.recordCanvas,
this.bypassOptions.inlineImages,
this.bypassOptions.slimDOMOptions,
this.mirror,
this.bypassOptions.iframeManager,

2
packages/rrweb/src/types.ts
View File

@@ -230,6 +230,7 @@ export type recordOptions<T> = {
recordCanvas?: boolean;
userTriggeredOnInput?: boolean;
collectFonts?: boolean;
inlineImages?: boolean;
plugins?: RecordPlugin[];
// departed, please use sampling options
mousemoveWait?: number;
@@ -259,6 +260,7 @@ export type observerParam = {
fontCb: fontCallback;
sampling: SamplingStrategy;
recordCanvas: boolean;
inlineImages: boolean;
userTriggeredOnInput: boolean;
collectFonts: boolean;
slimDOMOptions: SlimDOMOptions;

3
packages/rrweb/typings/record/mutation.d.ts vendored
View File

@@ -23,12 +23,13 @@ export default class MutationBuffer {
private maskTextFn;
private maskInputFn;
private recordCanvas;
private inlineImages;
private slimDOMOptions;
private doc;
private mirror;
private iframeManager;
private shadowDomManager;
init(cb: mutationCallBack, blockClass: blockClass, blockSelector: string | null, maskTextClass: maskTextClass, maskTextSelector: string | null, inlineStylesheet: boolean, maskInputOptions: MaskInputOptions, maskTextFn: MaskTextFn | undefined, maskInputFn: MaskInputFn | undefined, recordCanvas: boolean, slimDOMOptions: SlimDOMOptions, doc: Document, mirror: Mirror, iframeManager: IframeManager, shadowDomManager: ShadowDomManager): void;
init(cb: mutationCallBack, blockClass: blockClass, blockSelector: string | null, maskTextClass: maskTextClass, maskTextSelector: string | null, inlineStylesheet: boolean, maskInputOptions: MaskInputOptions, maskTextFn: MaskTextFn | undefined, maskInputFn: MaskInputFn | undefined, recordCanvas: boolean, inlineImages: boolean, slimDOMOptions: SlimDOMOptions, doc: Document, mirror: Mirror, iframeManager: IframeManager, shadowDomManager: ShadowDomManager): void;
freeze(): void;
unfreeze(): void;
isFrozen(): boolean;

2
packages/rrweb/typings/record/observer.d.ts vendored
View File

@@ -4,7 +4,7 @@ import MutationBuffer from './mutation';
import { IframeManager } from './iframe-manager';
import { ShadowDomManager } from './shadow-dom-manager';
export declare const mutationBuffers: MutationBuffer[];
export declare function initMutationObserver(cb: mutationCallBack, doc: Document, blockClass: blockClass, blockSelector: string | null, maskTextClass: maskTextClass, maskTextSelector: string | null, inlineStylesheet: boolean, maskInputOptions: MaskInputOptions, maskTextFn: MaskTextFn | undefined, maskInputFn: MaskInputFn | undefined, recordCanvas: boolean, slimDOMOptions: SlimDOMOptions, mirror: Mirror, iframeManager: IframeManager, shadowDomManager: ShadowDomManager, rootEl: Node): MutationObserver;
export declare function initMutationObserver(cb: mutationCallBack, doc: Document, blockClass: blockClass, blockSelector: string | null, maskTextClass: maskTextClass, maskTextSelector: string | null, inlineStylesheet: boolean, maskInputOptions: MaskInputOptions, maskTextFn: MaskTextFn | undefined, maskInputFn: MaskInputFn | undefined, recordCanvas: boolean, inlineImages: boolean, slimDOMOptions: SlimDOMOptions, mirror: Mirror, iframeManager: IframeManager, shadowDomManager: ShadowDomManager, rootEl: Node): MutationObserver;
export declare function initScrollObserver(cb: scrollCallback, doc: Document, mirror: Mirror, blockClass: blockClass, sampling: SamplingStrategy): listenerHandler;
export declare const INPUT_TAGS: string[];
export declare function initObservers(o: observerParam, hooks?: hooksParam): listenerHandler;

1
packages/rrweb/typings/record/shadow-dom-manager.d.ts vendored
View File

@@ -11,6 +11,7 @@ declare type BypassOptions = {
maskTextFn: MaskTextFn | undefined;
maskInputFn: MaskInputFn | undefined;
recordCanvas: boolean;
inlineImages: boolean;
sampling: SamplingStrategy;
slimDOMOptions: SlimDOMOptions;
iframeManager: IframeManager;

8
packages/rrweb/typings/types.d.ts vendored
View File

@@ -122,6 +122,7 @@ export declare type SamplingStrategy = Partial<{
mousemoveCallback: number;
mouseInteraction: boolean | Record<string, boolean | undefined>;
scroll: number;
media: number;
input: 'all' | 'last';
}>;
export declare type RecordPlugin<TOptions = unknown> = {
@@ -150,6 +151,7 @@ export declare type recordOptions<T> = {
recordCanvas?: boolean;
userTriggeredOnInput?: boolean;
collectFonts?: boolean;
inlineImages?: boolean;
plugins?: RecordPlugin[];
mousemoveWait?: number;
keepIframeSrcFn?: KeepIframeSrcFn;
@@ -177,6 +179,7 @@ export declare type observerParam = {
fontCb: fontCallback;
sampling: SamplingStrategy;
recordCanvas: boolean;
inlineImages: boolean;
userTriggeredOnInput: boolean;
collectFonts: boolean;
slimDOMOptions: SlimDOMOptions;
@@ -349,12 +352,15 @@ export declare type inputCallback = (v: inputValue & {
export declare const enum MediaInteractions {
Play = 0,
Pause = 1,
Seeked = 2
Seeked = 2,
VolumeChange = 3
}
export declare type mediaInteractionParam = {
type: MediaInteractions;
id: number;
currentTime?: number;
volume?: number;
muted?: boolean;
};
export declare type mediaInteractionCallback = (p: mediaInteractionParam) => void;
export declare type DocumentDimension = {