From e8003d33728d833587dc80a2ae03b6de762827ba Mon Sep 17 00:00:00 2001 From: Raffaele Filiberti Date: Fri, 28 Jul 2023 17:35:51 +0200 Subject: [PATCH 1/2] feat: add baselineMultiplier in order to fix browser with font size scaling enabled found out that some proprietary browsers (like Samsung Internet Browser) have a an option to scale the font size independently from the page zoom. this new property `baselineMultiplier` helps to deal with this problem. For more info check out the Html2Canvas Notion page. --- src/index.ts | 3 ++- src/render/canvas/canvas-renderer.ts | 6 ++++-- src/render/font-metrics.ts | 6 ++++-- 3 files changed, 10 insertions(+), 5 deletions(-) diff --git a/src/index.ts b/src/index.ts index 348b050fb..64ff24c91 100644 --- a/src/index.ts +++ b/src/index.ts @@ -109,7 +109,8 @@ const renderElement = async (element: HTMLElement, opts: Partial): Prom x: (opts.x ?? 0) + left, y: (opts.y ?? 0) + top, width: opts.width ?? Math.ceil(width), - height: opts.height ?? Math.ceil(height) + height: opts.height ?? Math.ceil(height), + baselineMultiplier: opts.baselineMultiplier ?? 1 }; let canvas; diff --git a/src/render/canvas/canvas-renderer.ts b/src/render/canvas/canvas-renderer.ts index 6efb648bf..c09ae8378 100644 --- a/src/render/canvas/canvas-renderer.ts +++ b/src/render/canvas/canvas-renderer.ts @@ -56,6 +56,7 @@ export interface RenderOptions { y: number; width: number; height: number; + baselineMultiplier: number; } const MASK_OFFSET = 10000; @@ -76,7 +77,7 @@ export class CanvasRenderer extends Renderer { this.canvas.style.width = `${options.width}px`; this.canvas.style.height = `${options.height}px`; } - this.fontMetrics = new FontMetrics(document); + this.fontMetrics = new FontMetrics(document, options.baselineMultiplier); this.ctx.scale(this.options.scale, this.options.scale); this.ctx.translate(-options.x, -options.y); this.ctx.textBaseline = 'bottom'; @@ -329,7 +330,8 @@ export class CanvasRenderer extends Renderer { x: 0, y: 0, width: container.width, - height: container.height + height: container.height, + baselineMultiplier: 1 }); const canvas = await iframeRenderer.render(container.tree); diff --git a/src/render/font-metrics.ts b/src/render/font-metrics.ts index f40555cf6..67a25befa 100644 --- a/src/render/font-metrics.ts +++ b/src/render/font-metrics.ts @@ -9,10 +9,12 @@ const SAMPLE_TEXT = 'Hidden Text'; export class FontMetrics { private readonly _data: {[key: string]: FontMetric}; private readonly _document: Document; + private readonly _baselineMultiplier: number; - constructor(document: Document) { + constructor(document: Document, baselineMultiplier: number) { this._data = {}; this._document = document; + this._baselineMultiplier = baselineMultiplier; } private parseMetrics(fontFamily: string, fontSize: string): FontMetric { @@ -47,7 +49,7 @@ export class FontMetrics { span.appendChild(this._document.createTextNode(SAMPLE_TEXT)); container.appendChild(span); container.appendChild(img); - const baseline = img.offsetTop - span.offsetTop + 2; + const baseline = (img.offsetTop - span.offsetTop + 2) * this._baselineMultiplier; container.removeChild(span); container.appendChild(this._document.createTextNode(SAMPLE_TEXT)); From b4d38e351e5deaeb14b712c344ea274b04075e17 Mon Sep 17 00:00:00 2001 From: Raffaele Filiberti Date: Fri, 28 Jul 2023 17:39:56 +0200 Subject: [PATCH 2/2] chore(release): 1.5.0 --- CHANGELOG.md | 80 +++++++++++++++++++++++++++++++++++++++++++++++ package-lock.json | 2 +- package.json | 2 +- 3 files changed, 82 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 8624102f3..4b553a168 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,86 @@ All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines. +## 1.5.0 (2023-07-28) + + +### Features + +* add baselineMultiplier in order to fix browser with font size scaling enabled ([e8003d3](https://github.com/niklasvh/html2canvas/commit/e8003d33728d833587dc80a2ae03b6de762827ba)) +* add rtl render support ([#2653](https://github.com/niklasvh/html2canvas/issues/2653)) ([6947982](https://github.com/niklasvh/html2canvas/commit/694798284838b16882e648914da0905818aa366c)) +* add support for