Блог

Главная - Вопросы по программированию - Рисование на холсте в Chrome

Рисование на холсте в Chrome

#javascript #wordpress #html #canvas

#javascript #wordpress #HTML #холст

Вопрос:

Мне нужно изменить цвет фона, чтобы он соответствовал цвету видео в строке WordPress. Это работает в Firefox edge safari, но не работает в chrome. Он возвращает RGB (0,0,0)

страница с проблемой — http://flex.tmweb.ru

 window.onload = function() {
    var vid = document.getElementById('video-15-1_html5');
    var row = document.getElementById('globe-video');
    var canvas = document.createElement('canvas');

    canvas.width = 1;
    canvas.height = 1;

    var context = canvas.getContext('2d');
    context.drawImage(vid, 0, 0, 1, 1);

    var p = context.getImageData(0, 0, 1, 1).data;
    row.style.backgroundColor = "rgb("   p[0]   ","   p[1]   ","   p[2]   ")";
};

Ответ №1:

Я предполагаю, что существует какая-то проблема с синхронизацией, когда Chrome отличается от других браузеров с точки зрения того, когда он вызывает onload против когда само видео загрузило что-либо.

Попробуйте проверить, загрузилось ли видео, прежде чем выполнять свою работу с canvas, а затем подождать, если необходимо:

 function onVideoLoaded() {
    var vid = document.getElementById('video-15-1_html5');
    var row = document.getElementById('globe-video');
    var canvas = document.createElement('canvas');

    canvas.width = 1;
    canvas.height = 1;

    var context = canvas.getContext('2d');
    context.drawImage(vid, 0, 0, 1, 1);

    var p = context.getImageData(0, 0, 1, 1).data;
    row.style.backgroundColor = "rgb("   p[0]   ","   p[1]   ","   p[2]   ")";
}

window.onload = function() {
    var vid = document.getElementById('video-15-1_html5');

    if (vid.readyState === 4) {
        onVideoLoaded();
    } else {
        vid.addEventListener('loadeddata', function () {
            if (vid.readyState === 4) {
                onVideoLoaded();
            }
        });
    }
};

Смотрите эту документацию MDN на HTMLMediaElement.readyState :https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/readyState

Комментарии:

1. Спасибо, это правильный совет. Обнаружена проблема, видео вообще не воспроизводится в chrome

2. Ах, это могло бы сработать! 🙂

3. Теперь проблема с Edge. Это не входит в функцию onVideoLoaded.

4. У меня была опечатка в моем коде, которую я исправил, может быть, это связано, если вы использовали мой код? (вместо «vid» было «obj») Теперь это исправлено. В противном случае не уверен, почему у Edge возникли бы проблемы.

5. Да, я увидел вашу опечатку. Проблема в том, что Edge никогда не readyState === 4. Видимо, мне придется написать для него исключение, не самое красивое решение.