报错TypeError: canvas.getContext is not a function，如何解决？

Question

<template>
    <view>
        <div class="inner">
            <video ref="video" :src="videoSrc" type="video/mp4" id="myVideo" width="200px" height="200px"
                show-snapshot-button></video>
            <button @click="play">播放</button>
            <button @click="pause">暂停</button>
            <button @click="downloadVideo">下载</button>
            <button id="save-btn" @click="saveBtn">保存图片</button>
            <canvas id="can" style="width: 200px;height: 200px;"></canvas>
        </div>
        <n-bar></n-bar>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                mp: null,
                playStatus: 1,
                autoPlay: false,
                videoSrc: '../../static/1.mp4',
                shot: '',
                videoNa: '',
                videoBur: true
            }
        },
        onLoad(option) {
            this.videoSrc = this.$baseUrlVideo + '/' + option.acNa
            this.videoNa = option.acNa
            if (uni.getSystemInfoSync().platform === 'android') {
                // this.videoBur = true
            }
        },
        mounted() {

        },
        computed: {
            videoHtml: function() {
                return `<video  autoplay loop muted controls="controls" width="100%" height="870px" src="${this.videoSrc}"></video>`;
            }
        },
        methods: {
            downloadVideo() {
                const videoUrl = this.$refs.video.src;
                const a = document.createElement("a");
                a.href = videoUrl;
                a.download = `${this.videoNa}.mp4`;
                document.body.appendChild(a);
                a.click();
                document.body.removeChild(a);
            },
            play() {
                this.$refs.video.play();
            },
            pause() {
                this.$refs.video.pause();
            },
            saveBtn() {
                const video = document.querySelector('#myVideo');
                const canvas = document.getElementById('can');
                canvas.width = video.videoWidth;
                canvas.height = video.videoHeight;
                console.log(canvas);
                const ctx = canvas.getContext('2d');
                ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
                canvas.toBlob(blob => {
                    const url = URL.createObjectURL(blob);
                    const a = document.createElement('a');
                    a.href = url;
                    a.download = 'my-image.png';
                    document.body.appendChild(a);
                    a.click();
                    document.body.removeChild(a);
                    URL.revokeObjectURL(url);
                }, 'image/png');
            }
        }
    }
</script>
<style>
    canvas {
        width: 400rpx;
        height: 400rpx;
    }

    .inner {
        text-align: center;
    }
</style>

报错TypeError: canvas.getContext is not a function，具体代码修改

Answer 1

请检查canvas元素是否正确插入到DOM中。

以上回复有部分引自免费微信小程序：皆我百晓生。 如问题尚未解决，还请稍待，如有疑问请回复进一步沟通。