Мобильная версияЯ новичок в vue.js, и у меня возникла проблема с созданием фона с линейным градиентом для моего проекта. Мне нужно получить каждый доминирующий цвет из URL-адреса изображений и использовать его в качестве фона в соответствующих пользовательских коротких и боковых тенях. Это то, что я сделал до сих пор, но у меня просто размыт фон. Может быть, кто-нибудь сможет мне помочь?
Сертификация {{ $t('cb10089') }} {{ $t('cb10083') }} функция getDominantColor(imageUrl) { вернуть новое обещание((разрешить, отклонить) => { const img = новое изображение() img.crossOrigin = 'анонимный' img.onload = функция () { const Canvas = document.createElement('canvas') константный контекст = холст.getContext('2d') холст.ширина = img.ширина холст.высота = img.высота context.drawImage(img, 0, 0, img.width, img.height) const imageData = context.getImageData(0, 0, холст.ширина, холст.высота) константные данные = imageData.data пусть г = 0, г = 0, б = 0 константный цветCounts = {} for (пусть я = 0; я maxCount) { maxCount = количество доминирующийЦвет = цвет } } разрешить (доминантный цвет) } img.onerror = отклонить img.src = URL-адрес изображения }) } экспортировать по умолчанию { имя: 'GameCard', реквизит: { Информация: { тип: Объект, по умолчанию: () => {} } }, настраивать() { возвращаться { PicturesUrl: window.PicturesUrl, goDetails({id}) { window.open(`/GameDetails/${id}/game`) } } }, данные() { возвращаться { угол: '' } }, асинхронное монтирование() { const color = ожидайте getDominantColor( this.PicturesUrl + this.info.gameTableImage ) const [r, g, b] = color.split(',').map(Число) this.$el.querySelector( '.customcard-short' ).style.background = `rgb(${r}, ${g}, ${b})` this.$el.querySelector( '.customcard' ).style.boxShadow = `0 5px 10px rgb(${r}, ${g}, ${b})` }, созданный() { console.log('info', this.info, this.PicturesUrl) const angularEmum = { 大额: 'новый', 上新: 'новый', 最热: 'горячий' } this.corner = angularEmum[this.info.labelName] } } .customcard { отображение: встроенный блок; высота: 450 пикселей; ширина: 350 пикселей; box-shadow: 0 5px 10px #ddd; радиус границы: 20 пикселей; поле внизу: 50 пикселей; поле справа: 50 пикселей; переполнение: скрыто; //курсор: указатель; положение: относительное; переход: все 0,3 с; непрозрачность: 0; анимация: move_opacity 0,5 с, легкость 1 вперед; &:nth-child(3n) { поле справа: 0; } &:наведите { преобразование: TranslateY (-10 пикселей); } .game-плакат { ширина: 100%; высота: 450 пикселей; //253 } .game-уголок { позиция: абсолютная; слева: 0; верх: 0; ширина: 81 пикселей; } .customcard-main { высота: 302 пикселей; гибкое сжатие: 0; фон: rgba(93, 37, 8, 0,09); фоновый фильтр: размытие (5 пикселей); размер коробки: граница-коробка; ширина: 100%; преобразование: TranslateY (-255 пикселей); переполнение: скрыто; //курсор: указатель; переход: все 0; непрозрачность: 0; анимация: move_opacity 0,5 с, легкость 1 вперед; маржа: 0 авто; .customcard-short { ширина: 100%; высота: 254 пикселей; //фон: линейный градиент (180 градусов, rgba (93, 37, 8, 0,08) 0%, #5D2508 27,56%)); фоновый фильтр: размытие (2 пикселя); преобразование: TranslateY (-12 пикселей); маржа: 0 авто; } .game-cont { отступ: 0 20 пикселей; } &:наведите { преобразование: TranslateY (-307 пикселей); } .customcard-main-tit { дисплей: гибкий; выровнять-элементы: по центру; преобразование: TranslateY (-7 пикселей); //-2 цвет: #fff; отступ: 0 20 пикселей; .customcard-значок { преобразование: TranslateY (-16 пикселей); дисплей: гибкий; ширина: 60 пикселей; высота: 60 пикселей; поле справа: 12 пикселей; } охватывать { размер шрифта: 18 пикселей; высота строки: 25,2 пикселей; вес шрифта: 500; переполнение: скрыто; дисплей: -webkit-box; -webkit-box-orient: вертикально; -webkit-line-clamp: 1; } } .customcard-main-cont { поле сверху: 5 пикселей; ширина: 100%; вес шрифта: 400; размер шрифта: 14 пикселей; цвет: #fff; преобразование: TranslateY (-2px); переполнение: скрыто; дисплей: -webkit-box; -webkit-box-orient: вертикально; -webkit-line-clamp: 2; } .флаги { поле сверху: 5 пикселей; выровнять-элементы: по центру; преобразование: TranslateY (35 пикселей); переполнение: скрыто; дисплей: -webkit-box; -webkit-box-orient: вертикально; -webkit-line-clamp: 2; отображение: встроенный блок; } .logo1-icon { ширина: 100 пикселей; поле справа: 8 пикселей; } .logo2-значок { ширина: 100 пикселей; поле справа: 22 пикселя; } .cn-значок { ширина: 30 пикселей; } .en-значок { ширина: 30 пикселей; поле справа: 10 пикселей; } .подробности { дисплей: гибкий; оправдание-содержание: пространство между; //выравнивание элементов: центр; ширина: 100%; преобразование: TranslateY (15 пикселей); } .ставка возврата, .win-line, .max-win { дисплей: гибкий; гибкое направление: столбец; преобразование: TranslateY (15 пикселей); } .акку1, .акку2, .accu3 { размер шрифта: 20 пикселей; цвет: #fff; вес шрифта: 400; высота строки: 23 пикселя; положение: относительное; } .return1, .return2, .return3 { размер шрифта: 12 пикселей; вес шрифта: 400; цвет: #fff; } .этикетка { выровнять-элементы: по центру; вес шрифта: 400; цвет: #fff; преобразование: TranslateY (35 пикселей); //233 переполнение: скрыто; дисплей: -webkit-box; -webkit-box-orient: вертикально; -webkit-line-clamp: 2; } .customcard-btn { позиция: абсолютная; внизу: 0; слева: 0; ширина: 100%; высота: 52 пикселей; фон: rgba(255, 255, 255, 0,1); фоновый фильтр: размытие (2 пикселя); вес шрифта: 400; радиус границы: 0 пикселей 0 пикселей 20 пикселей 20 пикселей; курсор: указатель; выравнивание текста: по центру; } .btn-текст { размер шрифта: 18 пикселей; вес шрифта: 400; отступ-верх: 12 пикселей; цвет: #fff; } .сертификат, .lang { размер шрифта: 12 пикселей; вес шрифта: 400; } .серт { поле справа: 162 пикселей; } } @keyframes move_opacity { от { непрозрачность: 0; } к { непрозрачность: 1; } } }
