用 safari 在画布上绘制的图像不显示答案

【问题标题】：The image drawn on the canvas with safari is not displayed用 safari 在画布上绘制的图像不显示
【发布时间】：2022-02-04 09:52:06
【问题描述】：

我正在制作一个程序，它读取视频并在一秒钟后显示为图像。图像在 Mac 上正确显示，但图像在 iphone 上的 Safari 上不显示。没有特别的错误。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
</head>
<body>
<input id="input" type="file" accept="video/*">
    <video hidden id="video" width="780" height="1280" controls="false"></video>
    <svg hidden id="svg" width="100%" height="100%" viewBox="0 0 720 1080">
        <image id="image" width="320" height="300" href="" />
    </svg>
 <script>
        const video = document.querySelector('video');
        input.onchange = event => {
            let reader = new FileReader();
            reader.readAsDataURL(input.files[0]);
            reader.onload = function () {
            video.src = reader.result
            video.load();
        };
        }
        video.addEventListener('seeked', function () {
           document.getElementById("image").setAttribute('href', toDataURL(video))
           

        });
        video.addEventListener('loadeddata', function () {
            video.currentTime = 1;
        })

        function toDataURL(target, type) {
            const canvas = document.createElement('canvas')
            canvas.width = target.width
            canvas.height = target.height
            canvas.getContext('2d').drawImage(target, 0, 0, target.width, target.height)
            canvas.getContext("webkit-3d", { preserveDrawingBuffer: true });
            canvas.type = "hidden";
            return canvas.toDataURL()
        }
</body>

怎么了？

【问题讨论】：

您可以通过在渲染之前添加一些延迟来解决这个问题 - 所以在调用 drawImage() 之前。可能重复Convert SVG with image not working in safari

标签： javascript safari drawimage todataurl

【解决方案1】：

“Safari 是 Mac 用户常用的浏览器，但 Canvas 的某些功能在 Safari 中无法正常使用”

我在 This Website 找到了这个信息

可能是这样，但我不完全确定

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。