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

[qq15725]

没有出现一条 Failed image load 的警告吗？多半是包含 <foreign-object> 的 svg 元素转 svg+xml 作为图像后解码异常了

可以尝试使用 window.modernScreenshot.domToForeignObjectSvg 将 dom 转成包含 <foreign-object> 的 svg 元素

function svgToDataUrl(svg: SVGElement) {
  const xhtml = new XMLSerializer()
    .serializeToString(svg)
    // https://www.w3.org/TR/xml/#charsets
    // eslint-disable-next-line no-control-regex
    .replace(/[\u0000-\u0008\u000B\u000C\u000E-\u001F\uD800-\uDFFF\uFFFE\uFFFF]/ug, '')
  return `data:image/svg+xml;charset=utf-8,${ encodeURIComponent(xhtml) }`
}

然后通过这个 svgToDataUrl 把 url 贴出来（数据可能有点大）或者直接 Chrome 点开（svg+xml 浏览器会提示异常）

[xudesheng]

This page contains the following errors:
error on line 9 at column 339: Opening and ending tag mismatch: style line 1 and body
Below is a rendering of the page up to the first error.

mbinedExtensions.20230421_043143.js:68 Not allowed to navigate top frame to data URL: 

window.modernScreenshot.domToForeignObjectSvg(runtimeElement)
		 	.then(data =>{
				 return svgToDataUrl(data);
			 })
		 	.then(dataUrl => {
				 console.log("svg to url:" + dataUrl);
				 const link = document.createElement('a');
				 link.href = dataUrl;
				 link.click();
			 })
		 	.catch(function (error){
				 console.error("dom to foreign obj:"+error);
			 });

这个是新的报错。 url有142k。

[xudesheng]

function svgToDataUrl(svg) {
		  const xhtml = new XMLSerializer()
		    .serializeToString(svg)
		    // https://www.w3.org/TR/xml/#charsets
		    // eslint-disable-next-line no-control-regex
		    .replace(/[\u0000-\u0008\u000B\u000C\u000E-\u001F\uD800-\uDFFF\uFFFE\uFFFF]/ug, '');
		   console.log(xhtml);
		  return `data:image/svg+xml;charset=utf-8,${ encodeURIComponent(xhtml) }`
		}

发现生成的xml，不合法。在debug哪里导致的。

[qq15725]

This page contains the following errors:
error on line 9 at column 339: Opening and ending tag mismatch: style line 1 and body
Below is a rendering of the page up to the first error.

只能根据查看当前 svg+xml 已渲染的片段推断下文那一处异常的

本质还是因为 new XMLSerializer().serializeToString() 序列化的 xml 还不是完全可用的（无解）

看能否提供 data-url 或者 line 9 at column 339 部分上下文的截图

[qq15725]

image-to-canvas.ts 中

context2d?.drawImage(loaded, 0, 0, canvas.width, canvas.height)

画的就是这个 xml 序列化后的 svg+xml data-uri 所以需要查看 xml 因为什么引发的浏览器解析异常

[xudesheng]

终于将bug找出来了，是我code里面的bug，button里面多了一个“，页面显示正确，也不报错。但就是导致这个转xml出错。多谢。