mirror/html2canvas
1
0
Fork 0
mirror of https://github.com/niklasvh/html2canvas.git synced 2023-08-10 21:13:10 +03:00
Code Issues Projects Releases Wiki Activity

fix: ios 15 font rendering crash (#2645)

Browse Source
This commit is contained in:
Niklas von Hertzen
2021-12-29 22:09:32 +08:00
committed by GitHub
parent d9222075da
commit ba2b1cd8e9
3 changed files with 20 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/render/canvas/canvas-renderer.ts
View File

@@ -162,7 +162,7 @@ export class CanvasRenderer extends Renderer {
const fontVariant = styles.fontVariant
.filter((variant) => variant === 'normal' || variant === 'small-caps')
.join('');
const fontFamily = styles.fontFamily.join(', ');
const fontFamily = fixIOSSystemFonts(styles.fontFamily).join(', ');
const fontSize = isDimensionToken(styles.fontSize)
? `${styles.fontSize.number}${styles.fontSize.unit}`
: `${styles.fontSize.number}px`;
@@ -947,3 +947,12 @@ const canvasTextAlign = (textAlign: TEXT_ALIGN): CanvasTextAlign => {
return 'left';
}
};
// see https://github.com/niklasvh/html2canvas/pull/2645
const iOSBrokenFonts = ['-apple-system', 'system-ui'];
const fixIOSSystemFonts = (fontFamilies: string[]): string[] => {
return /iPhone OS 15_(0|1)/.test(window.navigator.userAgent)
? fontFamilies.filter((fontFamily) => iOSBrokenFonts.indexOf(fontFamily) === -1)
: fontFamilies;
};

9
tests/reftests/text/lang/chinese.html
View File

@@ -11,6 +11,13 @@
float: left;
}
.apple-system {
font-family: -apple-system, Arial;
}
.system-ui {
font-family: system-ui, Arial;
}
</style>
</head>
<body>
@@ -32,5 +39,7 @@
</p><p>&nbsp;&nbsp;&nbsp;&nbsp;〔13〕 法捷耶夫（一九○一——一九五六），苏联名作家。他所作的小说《毁灭》于一九二七年出版，内容是描写苏联国内战争时期由苏联远东滨海边区工人、农民和革命知识分子所组成的一支游击队同国内反革命白卫军以及日本武装干涉军进行斗争的故事。这部小说曾由鲁迅译为汉文。
</p><p>&nbsp;&nbsp;&nbsp;&nbsp;〔14〕 见鲁迅《集外集·自嘲》（《鲁迅全集》第7卷，人民文学出版社1981年版，第147页）。</p>
</div>
<div class="apple-system">中文</div>
<div class="system-ui">中文</div>
</body>
</html>

2
tests/reftests/text/text.html
View File

@@ -149,6 +149,6 @@
<span>[AB / CD]</span>
</div>
<div>Emojis 🤷🏾‍♂️👨‍👩‍👧‍👦 :)</div>
<div style="letter-spacing: 2px">Emojis with letter-spacing 🤷🏾‍♂️👨‍👩‍👧‍👦 :)</div>
<div style="letter-spacing: 2px">Emojis with letter-spacing 🤷🏾‍♂️👨‍👩‍👧‍👦 :) ❤️❤️❤️👨‍❤️‍💋‍👨👨‍❤️‍👨</div>
</body>
</html>