[

](medium.com/@hitesh-man…)

郝特西-曼达夫

关注

6月11日

-

6分钟阅读

学习如何在短时间内为你的网络应用创建自定义占位符图片

图片占位符对于任何应用程序来说都是非常重要的，虽然有很多假的API可用于此。很多时候，我发现自己不想依赖这些，可能是出于稳定性、成本或流量等方面的考虑。因此，有时我们最终会对所有的配置文件使用相同的通用占位符，我觉得这很无聊。所以我写了这个小教程，它将有助于快速为用户设置自定义占位符图片。

在这里，我们将使用画布在Angular应用程序中创建一个带有姓名首字母的占位符简介图片和一个具有相同颜色的渐变标题图片占位符，如果这些图片不在数据库中。

在这里，我们将涵盖以下主题。

• 概述
• 生成随机颜色
• 生成倒置的颜色
• 生成头像样式
• 生成简介图片

概况

我将在此演示中使用的API响应样本。

// Sample JSON respponse for user Data{ "id": 1, "firstName": "Den", "lastName": "Draysay", "role": "Professor", "profileImg": null, "headerImg": null}

创建一个angular组件 "user-profile"，服务 "color "和 "user "以及一个管道 "profile-image"。

在用户配置文件组件中，我们可以创建一个类型为 "用户 "的变量，以存储来自API onInit的响应。

import { Component, OnInit } from '@angular/core';import { ActivatedRoute } from '@angular/router';import { User } from 'src/app/models/user';import { UserService } from 'src/app/services/user.service';

用户服务将被用来进行HTTP调用。

import { HttpClient } from '@angular/common/http';import { Injectable } from '@angular/core';import { Observable } from 'rxjs';import { User } from '../models/user';

生成随机颜色

我们的第一步是获得占位符图片中使用的随机颜色。因此，我们将在服务中创建一个方法，它将返回有效的十六进制代码。

public generateRandomColorCode(): string {    const hex = Math.floor(Math.random()*16777215).toString(16);    const randomColorCode = hex.toString().length < 6 ?        this.generateRandomColorCode() : `#${hex}`;    return randomColorCode ;}

现在我们可以用这个方法为在用户配置文件组件中获取的用户配置文件设置一个颜色。

在fetchUserData.订阅中，我们可以在构造函数中注入颜色服务后调用这个服务。

如果我们想在以后的任何登录中为用户保持相同的颜色，我们可以把随机生成的颜色和用户的详细资料一起保存到数据库中，或者如果我们在用户每次访问时需要一个新的颜色，我们可以调用这个方法。

// to use a new color every timethis.userProfile.color = this.color.generateRandomColorCode();// to use same color every timethis.userProfile.color = this.userProfile.color ?    this.userProfile.color :    this.color.generateRandomColorCode();

生成反转的颜色

我们还需要一个方法，可以根据我们的十六进制颜色给我们一个黑色或白色的颜色，以便在个人资料图片上打印首字母，或为标题创建一个梯度。

我们可以在颜色服务中创建这个方法。

public getInvertedColor(hex: string): string{    if (hex.indexOf('#') === 0) {        hex = hex.slice(1);    }

注意：这个方法可以被改进，以提供广泛的颜色，这些颜色与十六进制颜色成反比，以产生一个渐变，并使用一个标志有条件地只为个人资料图片字体提供黑色和白色。

生成页眉样式

现在我们可以在颜色服务中创建一个方法，或者创建一个自定义的管道，以你的用例为准，但基本的逻辑是一样的，我们需要一个方法，根据用户的资料给我们提供CSS样式。

所以要考虑的是，用户可能已经上传了一张头像，所以在这些情况下，我们必须显示该图片，如果用户没有头像，我们将根据我们为用户生成的随机颜色生成一个线性梯度。

public getHeaderStyles(user: User): any {    let headerBkg: any;    if (user.profile.headerImg) {        headerBkg = {           'background-image': `url('${user.headerImg}')`,           'background-size': 'cover',        }    } else {        const secondaryColor = this.getInvertedColor(user.profile.color || '');        headerBkg = {        'background': `linear-gradient(${user.profile.color}, ${secondaryColor})`,        }    }return headerBkg;}

user-profile.component.html

<div    class="user-profile-cover"    [ngStyle]= "headerBkg"></div>

user-profile.component.scss

.user-profile{    &-cover{        height: 20%;    }}

user-profile.component.ts

创建一个变量

public headerBkg!: any;

在fetchUserData.subscribe中，将随机颜色分配给userProfile.color属性后，将CSS样式分配给创建的变量

this.headerBkg = this.color.getHeaderStyles(this.userProfile);

现在，如果没有头像，你应该有一个随机颜色的头像占位符，如果提供了头像，则应该有一个图像。

如果有头像

如果没有头像

生成简介图片

现在到了有趣的部分，如果用户不提供的话，就生成一张个人简介的照片。

我将使用一个自定义的管道简介图片。

profile-image.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';import { User } from 'src/app/models/user';import { ColorService } from '../util/color.service';

注意：现在我们可以在html中直接在img的src属性上使用这个管道，或者在用户配置文件组件中创建一个变量，并使用管道转换方法在该变量中存储src值。

user-profile.component.html

<!--Header--><div    class="user-profile-cover"    [ngStyle]= "headerBkg"></div><div class="user-profile-info">   <!--profile Image-->    <div class="user-profile-info-img">        <img            class="user-profile-info-img__img"            [src]="userProfile | profileImage"       >   </div>

user-profile.component.scss

.user-profile {    &-cover {       height: 20%;    }

在所有这些编码完成后，你应该有一个头像和简介图片的占位符样本，如果这两者不是由用户提供的，如果用户提供了图片，那么应该显示图片而不是占位符。

如果用户提供了图像。

如果用户不提供图片

谢谢你的阅读，如果你有任何问题或建议，请在评论中与我联系。