时间戳

首页 > 解决方案 > Chrome中的画布drawImage

javascript - Chrome中的画布drawImage

问题描述

我需要更改背景颜色以匹配 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] + ")";
};

标签： javascriptwordpresshtmlcanvas

解决方案

我的猜测是存在某种时间问题，Chrome 与其他浏览器在调用 onload 时与视频本身已加载任何内容时有所不同。

在做画布之前尝试检查视频是否已加载，然后在必要时等待：

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

推荐阅读