Edge и canvas.toDataUrl (), дающие неправильное / усеченное значение; - PullRequest
Новая
       76

Edge и canvas.toDataUrl (), дающие неправильное / усеченное значение;

0 голосов
/ 24 апреля 2020

Я пытаюсь отобразить миниатюру изображения из элемента видео. Код ниже работает в Chrome и Firefox, но не в Edge, и, конечно, не в IE.

Вы увидите, что я console.log определяю длину полученного значения , В Chrome это исправный 318210, но в Edge он возвращается 3338. Иногда (только иногда) последующее обновление экрана sh дает правильное значение, и изображение отображается, так что, может быть, это состояние гонки? Но я не уверен, что я участвую в гонках или как выиграть.

Вот код (TypeScript): 

public getVideoThumbnailUrl(url: string): Promise<string> {
        return new Promise((resolve, reject) => {
            this.videoElement = document.createElement('video');
            this.videoElement.setAttribute('crossorigin', 'anonymous');
            this.videoElement.onerror = e => reject(e);
            this.videoElement.addEventListener('loadedmetadata', () => this.videoMetadataLoaded(resolve));
            this.videoElement.src = url;
            this.taskQueue.queueMicroTask(
                (() => {
                    this.videoElement.muted = true;
                    this.videoElement.load();
                    this.videoElement.play();
                }).bind(this)
            );
        });
    }

    private videoMetadataLoaded(resolve: (url: string) => void) {
        this.videoElement.addEventListener('timeupdate', () => this.videoOnTimeUpdate(resolve));
        this.videoElement.currentTime = 0;
    }

    private videoOnTimeUpdate(resolve: (url: string) => void): void {
        this.videoElement.removeEventListener('timeupdate', () => this.videoOnTimeUpdate(resolve));
        console.log(this.videoElement);
        const canvasElement = document.createElement('canvas');
        canvasElement.width = this.videoElement.videoWidth;
        canvasElement.height = this.videoElement.videoHeight;
        canvasElement
            .getContext('2d')
            .drawImage(this.videoElement, 0, 0, this.videoElement.videoWidth, this.videoElement.videoHeight);
        const videoThumbnailSrc: string = canvasElement.toDataURL();
        console.log(videoThumbnailSrc.length);
        resolve(videoThumbnailSrc);
    }

Любая помощь будет оценена, а также поможет с знаменитый IE SecurityError выпуск. Кажется, установка crossorigin для элемента <video> не влияет на IE.

...