Closed xudesheng closed 1 year ago
没有出现一条 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 浏览器会提示异常)
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。
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哪里导致的。
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
部分上下文的截图
image-to-canvas.ts 中
context2d?.drawImage(loaded, 0, 0, canvas.width, canvas.height)
画的就是这个 xml 序列化后的 svg+xml data-uri 所以需要查看 xml 因为什么引发的浏览器解析异常
终于将bug找出来了,是我code里面的bug,button里面多了一个“,页面显示正确,也不报错。但就是导致这个转xml出错。多谢。
我把这个嵌入了另外一个App(jquery的),总是无论时下载图片,还是将图片添加到Dom中,都报相同的错误。
编译后的代码,在这个位置:
源码错误出在
image-to-canvas.ts
中的第20行:我的环境:MacOS M1 Ventera 13.3.1 Browser: Chrome, Firefox latest version.错误相同。 我的代码:
或者: