x15904151985/ArtPlayer
1
0 Fork 0
mirror of https://github.com/zhw2590582/ArtPlayer.git synced 2026-10-12 06:26:16 -08:00
Code Issues Packages Projects Releases Wiki Activity

Update index.js

Browse Source
This commit is contained in:
Harvey Zack authored and GitHub committed 2019-04-18 21:37:31 +08:00
1 parent b434fa0d79
commit 662531b35f
1 file changed
+46 -42
Download Patch File Download Diff File Expand all files Collapse all files
packages/artplayer-plugin-backlight/src/index.js
+46 -42
View File
@@ -1,27 +1,3 @@
function getAverageColor(img, left, top, width, height) {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = width;
canvas.height = height;
ctx.drawImage(img, -left, -top);
const imageData = ctx.getImageData(0, 0, width, height);
const { data } = imageData;
let r = 0;
let g = 0;
let b = 0;
for (let i = 0, l = data.length; i < l; i += 4) {
r += data[i];
g += data[i + 1];
b += data[i + 2];
}
r = Math.floor(r / (data.length / 4));
g = Math.floor(g / (data.length / 4));
b = Math.floor(b / (data.length / 4));
return { r, g, b };
}
function matrixCallback(callback) {
const result = [];
const x = 10;
@@ -37,8 +13,29 @@ function matrixCallback(callback) {
}
function getColors($img, width, height) {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = width;
canvas.height = height;
ctx.drawImage($img, 0, 0);
return matrixCallback((xIndex, yIndex, x, y) => {
return getAverageColor($img, (xIndex * width) / x, (yIndex * height) / y, width / x, height / y);
const itemW = width / x;
const itemH = height / y;
const itemX = xIndex * itemW;
const itemY = yIndex * itemH;
const { data } = ctx.getImageData(itemX, itemY, itemW, itemH);
let r = 0;
let g = 0;
let b = 0;
for (let i = 0, l = data.length; i < l; i += 4) {
r += data[i];
g += data[i + 1];
b += data[i + 2];
}
r = Math.floor(r / (data.length / 4));
g = Math.floor(g / (data.length / 4));
b = Math.floor(b / (data.length / 4));
return { r, g, b };
});
}
@@ -50,6 +47,8 @@ function creatMatrix(parent, width, height) {
$box.style.top = `${(yIndex * height) / y}px`;
$box.style.width = `${100 / x}%`;
$box.style.height = `${100 / y}%`;
$box.style.webkitBorderRadius = '50%';
$box.style.borderRadius = '50%';
$box.style.webkitTransition = 'all .2s ease';
$box.style.transition = 'all .2s ease';
parent.appendChild($box);
@@ -88,23 +87,28 @@ function artplayerPluginBacklight(art) {
art.on('firstCanplay', () => {
const { clientWidth, clientHeight } = $video;
const matrix = creatMatrix($backlight, clientWidth, clientHeight);
art.on('video:timeupdate', () => {
const dataUri = player.getScreenshotDataURL();
const $img = document.createElement('img');
$img.onload = () => {
const colors = getColors($img, clientWidth, clientHeight);
colors.forEach(({ r, g, b }, index) => {
const { $box, left, right, top, bottom } = matrix[index];
// eslint-disable-next-line no-nested-ternary
const x = left ? '-60px' : right ? '60px' : '0';
// eslint-disable-next-line no-nested-ternary
const y = top ? '-60px' : bottom ? '60px' : '0';
$box.style.webkitBoxShadow = `rgb(${r}, ${g}, ${b}) ${x} ${y} 120px`;
$box.style.boxShadow = `rgb(${r}, ${g}, ${b}) ${x} ${y} 120px`;
});
};
$img.src = dataUri;
});
const $img = document.createElement('img');
(function loop() {
window.requestAnimationFrame(() => {
if (player.playing) {
const dataUri = player.getScreenshotDataURL();
$img.onload = () => {
const colors = getColors($img, clientWidth, clientHeight);
colors.forEach(({ r, g, b }, index) => {
const { $box, left, right, top, bottom } = matrix[index];
// eslint-disable-next-line no-nested-ternary
const x = left ? '-64px' : right ? '64px' : '0';
// eslint-disable-next-line no-nested-ternary
const y = top ? '-64px' : bottom ? '64px' : '0';
$box.style.webkitBoxShadow = `rgb(${r}, ${g}, ${b}) ${x} ${y} 128px`;
$box.style.boxShadow = `rgb(${r}, ${g}, ${b}) ${x} ${y} 128px`;
});
};
$img.src = dataUri;
};
loop();
});
})();
});
return {