Консоль Google Chrome, печать изображения

Примерно год назад я создал плагин для улучшения консольных журналов, основная идея заключалась в том, чтобы печатать изображения в консоли, поэтому, например, вы могли бы добавить несколько значков или глифов.

Он работал очень красиво, я увидел, что сейчас есть много доступных в Интернете. Проблема в том, что никто из них не работает.

Я заметил это после последнего обновления хром, который я думаю. в настоящее время у меня есть версия 49.0.2623.112.

Все эти плагины, включая мои работы, работают одинаково:

console.log("%c" + dim.string, dim.style + "background: url(" + url + "); background-size: " + (this.width * scale) + "px " + (this.height * scale) + "px; color: transparent;");

Например, этот: ссылка плагина на github

Кто-нибудь знает, как мы можем печатать изображения в консоли в новых версиях хром?

Ответы

Ответ 1

Попробуйте пример кода с консолью F12:

console.log('%c ', 'font-size:400px; background:url(https://pics.me.me/codeit-google-until-youfinda-stackoverflow-answerwith-code-to-copy-paste-34126823.png) no-repeat;');

Ответ 2

Некоторое время я искал то, что могло бы распечатать целое изображение, не обрезая его, и сделать его изменяемого размера, и я придумал в основном это:

console.image = function(url, size = 100) {
  var image = new Image();
  image.onload = function() {
    var style = [
      'font-size: 1px;',
      'padding: ' + this.height/100*size + 'px ' + this.width/100*size + 'px;',
      'background: url('+ url +') no-repeat;',
      'background-size: contain;'
     ].join(' ');
     console.log('%c ', style);
  };
  image.src = url;
};

а затем просто используйте console.image(URL[, size]);, чтобы распечатать изображение. URL-адрес должен быть действительным URL-адресом, а его размер в основном выражается в процентах, значение по умолчанию - 100. Он может быть уменьшен, если значение ниже, чем 100, и расширен, если значение выше, чем 100.

Ответ 3

Я столкнулся с вашим консольным хранилищем GitHub на самом деле, рассматривая ту же проблему. Хотя пост довольно старый, я узнал из уст лошади, что он работает в Chrome Canary. Фактически, я попробовал вашу демо-версию плагина в Канарских островах и смог увидеть прядильную курицу. Я до сих пор не понял, почему он внезапно прекратил работать в Chrome. Функция по-прежнему работает в Firebug для Firefox. Документация console.log() для Chrome в этом только демонстрирует стилирование на основе текста.

Я нашел один пример SO > , где сначала загружает изображение, а затем применяет стиль, используя console.log("%c....", "...");. К сожалению, это все еще не работало в "стандартном" Chrome.

Итак, короткий ответ, похоже, что Canary теперь поддерживает изображения в консоли.