Иконка аватара без потери качества

314

10 сентября 2017, 02:54

Добрый День! Столкнулся с проблемой. Существуют ли способы сохранения качества аватара без потери качества изображения? Проблема заключается в том, что при загрузке аватара хорошего качества, в миниатюре он теряет все свойства своего качества. Приведу пример отображения при загрузки фотографии хорошего качества: Подозреваю что проблема заключается в сжатии, но есть ли варианты отключения этого сжатия при загрузке? Ниже приведу мой код:

function setAvatar(evt, id) { 
  saveImageToDataStorage("/update-avatar", evt, id, localUser.uid, function() { 
    // var avatar = document.getElementById("nav_bar_avatar"); 
    // avatar.style.backgroundImage = "url('" + STORAGE_url + "/public/users/" + localUser.uid + ".jpg?cache=" +  + (new Date()).getTime() + "')"; 
 
    let img = new Image; 
    img.crossOrigin = "Anonymous"; 
    img.onerror = function() { 
      img.src = "static/assets/foto_placeholder72.svg"; 
    }; 
    img.onload = function() { 
      let canvas = document.getElementById("nav_bar_avatar"); 
      var scaledCanvas = scaleAndCropImage(img, canvas.width, canvas.height); 
      canvas.getContext('2d').drawImage(scaledCanvas, 0, 0, canvas.width, canvas.height); 
    }; 
    img.src = STORAGE_url + "/public/users/" + localUser.uid + ".jpg?cache=" + (new Date()).getTime(); 
  }) 
}

<td class="itemMenu profile"> 
  <a href="/profile" class="nav_bar_avatar"> 
    <canvas id="nav_bar_avatar" height="28" width="28" style=" -webkit-clip-path: circle(50.0% at 50% 50%); clip-path: circle(50.0% at 50% 50%); height: 100%; width: 100%"></canvas> 
  </a> 
  {{if eq .Active "editProfile"}} 
  <a id="nav_bar_user" href="/profile" class="nav_bar_text current"></a> 
  {{else}} 
  <a id="nav_bar_user" href="/profile" class="nav_bar_text"></a> 
  {{end}} 
</td>

Заранее спасибо.

Answer 1

Зачем помещать картинку в канвас для дальнейшего сжатия? Вы думаете, так будет меньше нагрузка? Нет, вы все равно скачиванием с сервера картинку, а на канвас задействуется больше мощности браузера. Почему бы просто не помещать картинку в тег IMG, таким образом как вы описали, и не использовать для этого инструменты, не предназначенные для этого.