Comments (16)
是最新版本 modern-screenshot@^4.2.5
把
https://codepen.io/qq15725/pen/PoBbOWm
我试试我的老 iPhone 7 能复现不
from modern-screenshot.
from modern-screenshot.
恩,我也发现了,从图片 url 获取 MIME type 的正则有点问题,dataURI 类型异常导致的
41aa601 modern-screenshot@^4.2.6
修复了,可以在试下
from modern-screenshot.
恩,我也发现了,从图片 url 获取 MIME type 的正则有点问题,dataURI 类型异常导致的
41aa601
modern-screenshot@^4.2.6
修复了,可以在试下
from modern-screenshot.
😄 没其他问题,我先把 issue 关闭了
from modern-screenshot.
😄 没其他问题,我先把 issue 关闭了
刚用相同设备测试还是存在同样的问题
from modern-screenshot.
有办法在 https://codepen.io/qq15725/pen/PoBbOWm 复现个简单的例子吗 😂
from modern-screenshot.
好像是问题还在,我再看看什么原因 😓
from modern-screenshot.
好像是问题还在,我再看看什么原因 😓
https://codepen.io/licc666/pen/XWByGKW?editors=1010
试下这个例子可以吗
但是并没有之前那样的有规律, 貌似是随机某张图片不加载
from modern-screenshot.
旧版本的 webkit 当 <img src="data:image/svg+xml;charset=utf-8,xxxxforeignObjectxxx" />
使用 decode
会有一个 Invalid image type.
异常
https://bugs.webkit.org/show_bug.cgi?id=188347
新版本的 webkit 好像不会抛异常,正常 resolve decode
但是,似乎并没有正常解析 <img src="data:image/svg+xml;" />
https://bugs.webkit.org/show_bug.cgi?id=201243
导致当 <img src="data:image/svg+xml;" />
需要 drawImage
到 canvas 时并没有解析完,引起部分图像丢失
我要看下怎么确保 webkit 下的 svg+xml img 正常解析完
from modern-screenshot.
难怪呢,就是在首次执行过后, 图像都能正常显示了
from modern-screenshot.
https://stackoverflow.com/questions/69949555/convert-svg-with-image-not-working-in-safari
估计其他库多少也有这个问题,我先瞅一瞅其他库,没好办法我就先提供个延迟 drawImage
的调用方式
from modern-screenshot.
是的, html2canvas 也有问题,起初我采用的就是延迟方案,不过不是很理想
from modern-screenshot.
😅 这貌似是 webkit 的 bug 研究了下,貌似只能延迟调用 n(图片数)次 drawImage
,其他各种办法都没用
setTimeout(() => {
context?.drawImage(loaded, 0, 0, canvas.width, canvas.height)
}, n)
from modern-screenshot.
f083ddb 先暂时这样修复把 😓 好像也可以正常解码
https://github.com/qq15725/modern-screenshot/blob/master/src/converts/image-to-canvas.ts#L14-L27
// fix: image not decode when drawImage svg+xml in safari/webkit
const counts = isOnlyAppleWebKit ? (resolved.context.images.size || 1) : 1
for (let i = 0; i < counts; i++) {
await new Promise<void>(resolve => {
setTimeout(() => {
try {
context?.drawImage(loaded, 0, 0, canvas.width, canvas.height)
} catch (error) {
consoleWarn('Failed to image to canvas - ', error)
}
resolve()
}, i)
})
}
from modern-screenshot.
f083ddb 先暂时这样修复把 😓 好像也可以正常解码
https://github.com/qq15725/modern-screenshot/blob/master/src/converts/image-to-canvas.ts#L14-L27
// fix: image not decode when drawImage svg+xml in safari/webkit const counts = isOnlyAppleWebKit ? (resolved.context.images.size || 1) : 1 for (let i = 0; i < counts; i++) { await new Promise<void>(resolve => { setTimeout(() => { try { context?.drawImage(loaded, 0, 0, canvas.width, canvas.height) } catch (error) { consoleWarn('Failed to image to canvas - ', error) } resolve() }, i) }) }
是的, 暂时只有多次调用的解决方法了, 感谢
from modern-screenshot.
Related Issues (20)
- dom元素很长时,domToPng会出现0kb HOT 1
- 设置style选项时报错 HOT 1
- Bug deleting primary colors such as #000000(black) HOT 1
- Capacitor Support HOT 1
- Add option to selectively include style properties when cloning element HOT 1
- How to take full page screenshot using this library?
- Cannot use any function in Next js [Internal server error/Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.]
- letterspacing is ignored or produces unpredictable results
- no-cors mode errors despite 200 response HOT 1
- Failed to load webfont for pseudo-elements HOT 1
- Error when rendering emoji on Safari HOT 1
- (Not an issue) - Just a compliment to the author
- Bug: an exception with SVG, and noscript element not removed, and other exceptions
- CORS problem with images from AWS S3
- Struggling to download complex image automatically with link click method
- Failed to fetch image base64, trying to use placeholder image
- can not get right color for svg use element
- scale is not work for canvas element HOT 1
- Is there a way to reserve the position of scrollbar?
- Source tag with max-width media query doesn't include images into screenshot
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from modern-screenshot.