search

qq15725 / modern-screenshot

📸 Quickly generate image from DOM node using HTML5 canvas and SVG
https://toolpkg.com/html-to-image
MIT License
504 stars 36 forks source link

文字渐变不支持 #28

Closed jianghai closed 1 year ago

jianghai commented 1 year ago

image

chrome: v113.0.5672.92 modern-screenshot: v4.4.20

jianghai commented 1 year ago

怀疑是 chrome 升级导致 给 dom 设置 webkitBackgroundClip ，比如 document.body.style.webkitBackgroundClip = "text"; 会自动去除 webkit 前缀，但是 chrome 渲染还是正常

qq15725 commented 1 year ago

可以尝试先升级 modern-screenshot 到最新版试试, 最新版文字渐变应该是正常的

jianghai commented 1 year ago

可以尝试先升级 modern-screenshot 到最新版试试, 最新版文字渐变应该是正常的

不行，手动 css 加了 -webkit-background-clip: text 后截图正常

qq15725 commented 1 year ago

通过 JS 设置 style.webkitBackgroundClip 好像是不行，具体我也不清楚（浏览器行为），我这边处理也是手动加 class 以保证这个特性

目前应该只能支持通过 CSS 的 -webkit-background-clip: text

  1. 使用 JS 添加 class
  2. 使用 CSS
jianghai commented 1 year ago

通过 JS 设置 style.webkitBackgroundClip 好像是不行，具体我也不清楚（浏览器行为），我这边处理也是手动加 class 以保证这个特性

目前应该只能支持通过 CSS 的 -webkit-background-clip: text

  1. 使用 JS 添加 class
  2. 使用 CSS

那不应该有问题，库已经做了适配了