The image drawn on the canvas with safari is not displayed

Question

I am making a program that reads a video and displays one second later as an image. The image is displayed correctly on Mac, but the image is not displayed on Safari on iphone. There are no particular errors.

<!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>

What's wrong?

Answer 1

"Safari is a common browser for Mac users, but there are some features with Canvas that don't work well in Safari"

I found this info on This Website

That Might Be It But I'm Not Fully Sure

The image drawn on the canvas with safari is not displayed

Question

1 answers

solution1
0 2022-02-04 01:45:21

The image drawn on the canvas with safari is not displayed

Question

1 answers

solution1 0 2022-02-04 01:45:21

solution1
0 2022-02-04 01:45:21