[modern-screenshot] Failed image load data:image/svg+xml;charset=utf-8,...

[aben1188]

Steps To Reproduce

首先非常感谢作者辛苦开发的这个截图库，非常好用，试用过好多个类似的库，最终基于体验和效果，使用了这个库。

我使用该库来将Bing Chat的聊天页面中的指定DOM结构转为图片，之前能够正常转换，但最近不知道什么原因(或许是Bing Chat页面改版？)，实际生成的图片为空白图片(即图片全部为白色，没有任何实际内容)，浏览器开发者工具控制台中的报错信息如下：

[modern-screenshot] Failed image load data:image/svg+xml;charset=utf-8,...

[modern-screenshot] Failed to drawImage DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The HTMLImageElement provided is in the 'broken' state.

Bing Chat的聊天页面中的需要转换为图片的指定DOM结构为：

<!-- Provide a log message if relevant -->

Your Environment

• OS: Windows 10
• modern-screenshot: 4.4.26
• Browser: MicroSoft Edge 116.0.1938.29

[qq15725]

看能否提供完整的 data:image/svg+xml 数据，我的 Bing Chat 一直没法使用

[aben1188]

看能否提供完整的 data:image/svg+xml 数据，我的 Bing Chat 一直没法使用

完整的 data:image/svg+xml 数据，请查看这里： https://gist.githubusercontent.com/aben1188/6b52a3d4de89d94240140ed335831fbb/raw/60b84817a2a4281fb90e86ad87dc4703ec56910e/gistfile1.txt

[lujihong]

我也遇到同样的问题，我的解决方案如下： async function generateImage() { imgData.value = ""; building.value = true; function _run(repeat = false) { //生成图片 domToWebp(posterRenderRef.value?.$el, { quality: 1, scale: devicePixelRatio || 2, //复制节点后触发 onCloneNode: (node) => { if (!repeat) { building.value = false; } }, }) .then((dataUrl) => { if (repeat) { return _run(false); } imgData.value = dataUrl; nextTick(() => { uni.hideLoading(); generating = false; }); }) .catch((error) => { _run(true); console.error("生成图片时出现错误:", error); }); } _run(true); }

[aben1188]

@lujihong 能请教一下，你这是用在什么场景中的吗？能麻烦你详细说一下你的解决方案的具体思路吗？先谢过啦

[qq15725]

是这个属性导致的 xml error 可以帮忙看下这部分 html 上是怎么写的吗，我看怎么处理好点（看是过滤异常 attr 还是其他原因导致的异常 attr）

[qq15725]

v4.4.27 默认添加了去除异常属性的逻辑，可以尝试升级再试试

[aben1188]

@qq15725

非常感谢，升级到v4.4.27后已经完美解决问题！

“是这个属性导致的 xml error 可以帮忙看下这部分 html 上是怎么写的吗”，这个问题不是很清楚，因为我只是简单地通过querySelector方法获取到需要转换为图片的DOM结构，然后传入到modern-screenshot的domToPng方法中，中间没有修改过DOM结构，不知道为什么会变成这样。

再次感谢你及时修复问题！

[aben1188]

@qq15725

我仔细检查了一下，发现是Bing Chat聊天页面源DOM结构中的div.disclaimer元素的问题，该元素自身就多了一个“}”，请查看上面的DOM结构截图。