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

css 的 text-shadow 生成图片后没有阴影效果 #37

Open lujihong opened 1 year ago

lujihong commented 1 year ago

示例如下:

h1{
  display: flex;
  justify-content: center;
  font-size: 30px;
  font-weight: bolder;
  color: #f00;
  -webkit-text-stroke: 1px white;
  text-shadow: 2px 4px 4px rgba(0, 0, 0, 0.3); /* 设置向下的阴影效果 */
  border-radius: 8px;
  padding: 0 2px;
  white-space: nowrap;
}
qq15725 commented 1 year ago

请确认异常片段,或者是否为环境引起的

image

https://play.vuejs.org/#eNp9VF1v0zAU/StXQWit1CSFMgll3SRAexgSMI3xlhc3cVK3jm3ZTj+Y+t85cdKuMDSpiepzj8899147T9EnY5JNy6MsmrvCCuPJcd+am1yJxmjr6YlK3Tzqe1XTgSqrG7podMmtisHnXLml9hdnbMurCWn1TbfK8/K0BznAylWhlfNktfa3kq479mh8REvm2a+Hu2c4VyehEXN7VdBoTNc39JQrOrKTDZMtxx62ZQIag9lRn6KPTuDLFUzyjN7TAcLdM0/7glEqFp43RjLPsSKal2LTebjOo14mj6iQzLkByKNAA9EZpm7uJdvXFj5LaHZA0EghErTxXzQ1Zc4W2D/YhqLze8mBeMuUq7Rtst7kaJpcjimgnaNRfDl9O6HuPb7CthSi8/TML5ZBKqRNOn99g9Ai4UDaZ1RJvrvqsVXrvKj2MVruufIZFXhzO0QroLETv9Gp2dQc9wR0y0W9BH+hJcY/RAottc3oTTWdDgh4i7Xwsec7KHmr19B6Z3a0XQrPB1IfXLJSbzESBD8Mj60XbDSd0PBLZig57Fhoi6yxZaVoXUYfT94MK0uh6oymndAAhlwxZlEgudJby0yIHMLYQ7OiSdSf2bhhJlk5rXAHQt/yIeDyKDt2Mo9eHPoumkdL743L0rRVZl0nhW7SF0QcBOdToUq+S5oVVAcnB1jwDnOoRP2PAegYIbn9YbzA1fjLCJNSb78GzFuc7SNeLHmx/g++crve6r3ljtsNz6NTzDNb86GS25/fMZWzIAppJdivBB+407LtPPa0z7gDsH3GC27vQj8xpUd3u8Opc8eiOqOhG4GfR/hKfHml9Ge7s2R26uLhD3XylVQ=

lujihong commented 1 year ago

测试环境:IOS16.51 微信8.0.39,安卓下微信我测试是正常的

zhoushan1 commented 1 year ago

我在ios下,也出现了阴影效果异常的情况

Wangnov commented 4 months ago

在iOS Safari下出现 { -webkit-filter: blur(0.5px); filter: blur(0.5px); } 截图无效,blur滤镜只能设定为1或0的问题 或许应该另开issue