Используйте холст для создания инструмента для создания пиксельного аватара ветра

внешний интерфейс Командная строка Vue.js Canvas
Используйте холст для создания инструмента для создания пиксельного аватара ветра

Некоторые люди в Интернете обсуждали, как автоматически создавать аватары. Некоторые генерируются напрямую с использованием первой буквы регистрационного идентификатора, а некоторые напрямую используются в базе данных аватаров. Как создать аватар, который автоматически отличает аватар каждого пользователя? Что насчёт генерирования инструментов, так что я заморочился и придумал неведомый способ.

Определите наш текущий стек техники

  1. canvas
  2. node
  3. Машинное обучение
  4. Некоторые небольшие операции с интерфейсом Когда мы узнаем, что не знаем машинного обучения, это тяжело.Лучшая идея — просканировать много данных, чтобы обучить нашу модель, забыть об этом, не делать этого, на этом серия заканчивается.

Начать проектирование того, что нам нужно

Наша цель – использовать vue для создания инструмента для создания пиксельных изображений ветра. Здесь мы напрямую используем Vue-cli в качестве интерфейса для обработки страницы и выражаем для обработки представленных данных. Преимущество этого заключается в том, чтобы сделать нашу разработку более подходящей. для нашего рутинного развития.

раздел страницы

Здесь мы напрямую генерируемHelloworldнаписать в компоненте.

Настройки фреймворка

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <canvas id="view" width="200px" height="200px"></canvas></br>
    <input type="email" name="email" placeholder="邮箱" v-model="email">
    <input type="password" name="password" placeholder="密码" v-model="password"></br>
    <a href="#" v-on:click="getHead">create</a>
  </div>
</template>

Общая структура страницы такая, мы хотели, чтобы не было слишком пусто, пока аватарка не будет отображаться на странице, и мы не хотели настраивать дизайн, поэтому мы нашли логотип vue, поэтому я планировал его пикселизировать. .

принцип пикселизации

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

  1. Страница разделена на несколько прямоугольных областей.
  2. Возьмите медиану значений пикселей на странице
  3. Затем перерисуйте область с промежуточными значениями

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

1. Используйте закадровый холст для сохранения изображений

    this.offCan=document.createElement('canvas');
    this.offCan.width=20;
    this.offCan.height=20;
    this.default_logo.src=logo;
    this.default_logo.onload =function(){
      _self.render();
    }

Может быть странно, почему ширина и высота моего закадрового холста установлены равными 20, что тоже является очень важным шагом в пикселизации, о котором речь пойдет ниже.

      this.ctx=this.view.getContext('2d');
      this.o_ctx=this.offCan.getContext('2d');
      this.o_ctx.drawImage(this.default_logo,0,0,20,20);
      this.ctx.imageSmoothingEnabled = false;
      this.ctx.webkitImageSmoothingEnabled = false;
      this.ctx.msImageSmoothingEnabled = false;
      this.bitMap(this.o_ctx);
      this.ctx.drawImage(this.offCan,0,0,200,200);

Вот основная логическая часть, где трехэтапная настройка заключается в установке свойства сглаживания основного холста.

2. Пиксельная обработка

        var arrayData=this.o_ctx.getImageData(0,0,20,20);
        var data = arrayData.data;
        for (var i = 0; i < data.length; i += 4) {
            var red = data[i];
            var green = data[i + 1];
            var blue = data[i + 2];
            var alpha = data[i + 3];

            data[i]     =  red ;    
            data[i + 1] =green ;
            data[i + 2] = blue; 
            data[i + 3] = alpha >= 208 ? 255 : 0;               
        }
        ctx.putImageData(arrayData, 0, 0);

Тайна вdata[i + 3] = alpha >= 208 ? 255 : 0;этот шаг. Растровое изображение рисуется холстом, поэтому при увеличении изображения оно будет размыто и появятся блоки пикселей, что нам и нужно.Таким принципом воспользуемся для рисования изображения на маленьком холсте, установивalphaПороговое значение используется для фильтрации частей, которые могут вызвать размытие в части тона.Когда он наконец отрисовывается на основной холст, остаются только блоки пикселей.

Общий рендеринг выглядит следующим образом, он не чувствует себя роднымinputРама чувствует себя прекрасно.

Продолжение следует

Создание демонстрационной версии инструмента уже является сложной частью, как обрабатывать пользовательские данные и генерировать соответствующие данные аватара, а также сообщать о текущем прогрессе.

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

Так как она не доделана, демку сюда выкладывать не буду, ссылка будет в конце статьи, а так же можно сначала зайти на мой гит погулять.мой мерзавец

Поскольку я не знаю, какой тип учебников вам нравится, вам нужно искать их, когда они выходят.Если вам это нравится, вы можете сказать мне, и я разберу соответствующие уроки и принципы. Время от времени обновляйте технические руководства, связанные с холстом и svg, включая фактический тип боя и тип основного принципа, включая 2d, 2.5d и 3d, а также включают базовые знания линейной алгебры, физики, графики и т. д.

Приглашаем гостей собрать и обратить внимание

Категории