Html2canvas: фоновые изображения размыты при экспорте

Созданный на 13 мар. 2018 · 7Комментарии · Источник: niklasvh/html2canvas

Контент, который я экспортирую, выглядит четким с хорошим разрешением перед экспортом, но после его экспорта с помощью html2canvas части контента, которые являются фоновыми изображениями, выглядят очень размытыми и пикселизированными. Как для верхнего логотипа «smarthernews», так и для изображения солнцезащитных очков внизу я пробовал изображения с различным разрешением, но безрезультатно. Несмотря ни на что, они получаются размытыми. Они оба png.

slideexport

Источник

moettinger

Самый полезный комментарий

У меня была такая же проблема. Мне помогло использование <img> вместо background-image . В моем случае это не имело ничего общего с опцией scale .

monomichael 18 окт. 2018

👍15 👎1

Все 7 Комментарий

@moettinger вы используете параметр конфигурации scale :
Масштаб, используемый для рендеринга.

https://html2canvas.hertzen.com/configuration

Сделать это scale: 2 , а затем Image Multiple Factor: 0.5 для просмотра, работает для меня.

olecom 15 мар. 2018

@olecom Я не вижу «Множественный фактор изображения» в качестве конфигурации. Где ты это видишь?

moettinger 15 мар. 2018

@моттингер

Я не вижу «Множественный фактор изображения» в качестве конфигурации. Где ты это видишь?

Это должно быть особенностью вашего Viewer.

olecom 19 мар. 2018

monomichael 18 окт. 2018

👍15 👎1

такая же проблема.
изменить background-image на img может работать успешно. но иногда я не могу использовать img .
😭😭😭

xiaoTuiMao 9 авг. 2019

такая же проблема здесь

jonasborneland 29 нояб. 2019

так расстроился 😭

это мой хак

<div style="position:relative; width:100px; height:200px;">
  <img src="./path/to/img.png" alt="" style="display:block; width:100%; height:100%;">
  <div style="position:absolute; top:0; left:0; width:100%; height:100%;">
    <!-- content above background -->
  </div>
</div>