Anzeigename Avatar (Fallback), wenn Bild nicht mit Canvas gefunden wurde

Question

Wie wird der Avatar angezeigt, wenn Buchstaben aus dem Namen wie Google genommen werden, wenn das tatsächliche Bild nicht gefunden wird. ========>

Ich würde eine Lösung bevorzugen, die Fallback Image mit Canvas erstellen.

Answer 1

Ich habe eine Lösung erstellt, aber ich suche nach einer besseren Lösung. Hier geht es Erstellen Ausweich Leinwand von Namen

var username = attr.username; 
    var name = attr.name; 
    var imgSrc = "https://path/to/server/"+username+".jpg"; 


    var canvas = document.createElement('canvas'); //es-lint disable 
    canvas.width = '32'; 
    canvas.height = '32'; 
    var context = canvas.getContext('2d'); 
    context.fillStyle = "#D6B478"; 
    context.fillRect(0, 0, canvas.width, canvas.height); 
    context.font = "16px 'Roboto'"; 
    context.fillStyle = "white"; 
    var nameArr = name.split(' ') 
    context.fillText(nameArr[0].charAt(0)+nameArr[1].charAt(0),7,22 
    var dataUrl = canvas.toDataURL(); 

Handhabung Bild Last mit Fehlerzustand

var elem = document.getElementById('#Target') 
    var img = new Image(); 
    img.src = imgSrc; 
    elem.html('<img src="'+dataUrl+'" alt="" />') 
    img.onerror = function() { 
    console.log("Error Occured to load Avatar for " + imgSrc); 
    img.onerror = null 
    img.src = dataUrl 
    } 
    img.onload = function() { 
    elem.html('') 
    elem.append(img) 
    } 

Answer 2

HTML und CSS nur. Fügen Sie hinzu, was immer Sie wollen, um den IMG zu erkennen.

.avatar{ 
 
    background: #D770AD; 
 
    padding: 10px; 
 
    width: 32px; 
 
    height: 32px; 
 
    -webkit-border-radius: 50%; 
 
    -moz-border-radius: 50%; 
 
    -ms-border-radius: 50%; 
 
    border-radius: 50%; 
 
    display: inline-block; 
 
    text-align: center; 
 
    line-height: 32px; 
 
    font-weight: 700; 
 
    margin-right: 5px; 
 
    color: #FFFFFF; 
 
    }

<div class="avatar">FL</div>