Open Mapaler opened 1 month ago
webkit-text-stroke 的问题修复了,最近比较忙,这个问题可以尝试自己研究下源码,应该是之前对伪元素的处理机制不够完善,PR Welcome 😄
我也就是业余爱好,只能写业务代码,没能力也没动力去研究库源码的。 内置截图对于我自身的想法不必要,只是有些用户不知道用浏览器截图非要这个。 本来我是准备使用 svg sprite,custom element (shadow root)这些技术的,但浏览器不允许绘制。为了兼容内置截图只好一直搁置这些功能的改造。
另外你现在给的这个 example 太复杂了,要素过多,可以以下面这段 demo 代码为例最小化一下,这段代码是我在排查 -webkit-text-stroke 问题时搞的:
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
}
li {
color: red;
font-size: 20px;
-webkit-text-stroke: 1px blue;
}
</style>
</head>
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<button id="capture">Capture</button>
<script src="https://cdn.jsdelivr.net/npm/html2canvas-pro@1.5.8/dist/html2canvas-pro.min.js"></script>
<script>
document.getElementById('capture').addEventListener('click', function () {
html2canvas(document.body).then(function (canvas) {
document.body.appendChild(canvas);
});
});
</script>
</body>
</html>
用爱发电不容易,最好尽可能节省大家的时间
用爱发电不容易,最好尽可能节省大家的时间
我从没插过广告,也是用爱发电。
用爱发电不容易,最好尽可能节省大家的时间
我从没插过广告,也是用爱发电。
不重要,把复现 demo 按照上面的例子简化一下
没能完全复现,但是发现把这里的 inline-flex; 改成 flex; 就有图像了,但是我的布局还是用 inline-flex; 好一些。
<!DOCTYPE html>
<html>
<head>
<style>
.ul1 {
display: inline-flex;
list-style-type: none;
}
.ul1 li {
color: red;
font-size: 20px;
font-weight: bold;
-webkit-text-stroke: 1px blue;
}
.ul2 {
display: flex;
list-style-type: none;
}
.ul2 li icon{
border: 1px black solid;
background: lightblue;
border-radius: 5px;
display: inline-flex;
}
.ul2 li icon::before,
.ul2 li icon::after {
content: "";
width: 64px;
height: 64px;
}
.ul2 li icon::before {
background-image: url(data:image/png;base64,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);
}
.ul2 li icon::after {
opacity: 0.5;
background-image: url(data:image/png;base64,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);
}
canvas {
border: 1px solid black;
}
</style>
<!--<script src="node_modules/@html2canvas/html2canvas/dist/html2canvas.min.js"></script>-->
<script src="node_modules/html2canvas-pro/dist/html2canvas-pro.min.js"></script>
</head>
<body>
<ul class="ul1">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<ul class="ul2">
<li><icon></icon></li>
<li><icon></icon></li>
<li><icon></icon></li>
</ul>
<button id="capture">Capture</button>
<script>
document.getElementById('capture').addEventListener('click', function () {
[...document.body.querySelectorAll("canvas")].forEach(ca=>ca.remove());
html2canvas(document.body).then(function (canvas) {
document.body.appendChild(canvas);
});
});
</script>
</body>
</html>
交换一个顺序就会导致画面不一样,应该是对inline类块的处理不好。
Please make sure you are testing with the latest release of html2canvas-pro. Old versions are not supported and issues reported for them will be closed.
Please follow the general troubleshooting steps first:
Bug reports:
Example link ,点上面的绘制截图按钮。当然这里我还没有改库连接,直接把
html2canvas-pro
js 粘贴到控制台替换掉原版就可以了。Click on the Draw Screenshot button above. Of course, I haven't changed the library connection here, just paste thehtml2canvas-pro
js into the console and replace the original.之前绘图这几个地方![xnviewmp_4000日1队全奖励_-_智龙迷城1人队伍图制作(1) png_-_XnView_MP_0225](https://github.com/user-attachments/assets/7bcb087b-ef21-4f41-a9aa-1ca81a01e0ae)
::before
的图片不显示。These places the picture::before
is not drawn.但是![firefox_4000日1队全奖励_-_智龙迷城1人队伍图制作_—_Firefox_Developer_Editi_0226](https://github.com/user-attachments/assets/98cb7659-149e-49c0-b6e3-4d4c5c677eca)
::after
半透明的就显示,所以尝试给::before
加一个透明度。 But::after
will be displayed if it is transparent, so try to add a transparency to::before
然后就能绘制出来了。Then it drawn.![xnviewmp_4000日1队全奖励_-_智龙迷城1人队伍图制作(7) png_-_XnView_MP_0227](https://github.com/user-attachments/assets/b5b46e6f-3326-426c-bf47-1b312d2e7a75)
打开控制台关掉
![xnviewmp_4000日1队全奖励_-_智龙迷城1人队伍图制作(8) png_-_XnView_MP_0231](https://github.com/user-attachments/assets/1751c2e3-71d5-44b3-a39b-6c417e845f60)
opacity: 0.99;
后再截图,就又会不绘制了。Open the console and turn offopacity: 0.99;
, it will not be drawn on screenshot again.Specifications: