Ios 设备 调用 domToDataUrl 图片无法加载

[licc666]

设备： iPhoneXR
系统： 16.0
环境： safari，钉钉H5

具体呈现： 调用一次方法只呈现出一张图片


现解决方法： 如果画面有两张图片， 就要在 ios 端 额外 await 两次

[qq15725]

是最新版本 modern-screenshot@^4.2.5 把

https://codepen.io/qq15725/pen/PoBbOWm

我试试我的老 iPhone 7 能复现不

[licc666]

复现过程

[qq15725]

恩，我也发现了，从图片 url 获取 MIME type 的正则有点问题，dataURI 类型异常导致的

41aa601 modern-screenshot@^4.2.6 修复了，可以在试下

[licc666]

恩，我也发现了，从图片 url 获取 MIME type 的正则有点问题，dataURI 类型异常导致的

41aa601 modern-screenshot@^4.2.6 修复了，可以在试下

不过还挺有趣的这个问题， 画面有几张图就要调用几次

[qq15725]

😄 没其他问题，我先把 issue 关闭了

[licc666]

😄 没其他问题，我先把 issue 关闭了

刚用相同设备测试还是存在同样的问题

[qq15725]

有办法在 https://codepen.io/qq15725/pen/PoBbOWm 复现个简单的例子吗 😂

[qq15725]

好像是问题还在，我再看看什么原因 😓

[licc666]

好像是问题还在，我再看看什么原因 😓

https://codepen.io/licc666/pen/XWByGKW?editors=1010
试下这个例子可以吗
但是并没有之前那样的有规律， 貌似是随机某张图片不加载

[qq15725]

旧版本的 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 正常解析完

[licc666]

难怪呢，就是在首次执行过后， 图像都能正常显示了

[qq15725]

https://stackoverflow.com/questions/69949555/convert-svg-with-image-not-working-in-safari

估计其他库多少也有这个问题，我先瞅一瞅其他库，没好办法我就先提供个延迟 drawImage 的调用方式

[licc666]

是的， html2canvas 也有问题，起初我采用的就是延迟方案，不过不是很理想

[qq15725]

😅 这貌似是 webkit 的 bug 研究了下，貌似只能延迟调用 n（图片数）次 drawImage，其他各种办法都没用

setTimeout(() => {
  context?.drawImage(loaded, 0, 0, canvas.width, canvas.height)
}, n)

[qq15725]

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)
    })
  }

[licc666]

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)
    })
  }

是的， 暂时只有多次调用的解决方法了， 感谢