Если вы можете анимировать пиксельные холсты в JavaScript - PullRequest
Новая
       29

Если вы можете анимировать пиксельные холсты в JavaScript

0 голосов
/ 15 июня 2019

Таким образом, вы можете сделать пикселизацию изображения, нарисовав его на холсте, как this : 

/* css */
.pixelate {
  image-rendering: optimizeSpeed;
  image-rendering: -moz-crisp-edges;
  image-rendering: -o-crisp-edges;
  image-rendering: -webkit-crisp-edges;
  image-rendering: crisp-edges;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: pixelated;
  -ms-interpolation-mode: nearest-neighbor;
}

// js
var canvas = document.createElement('canvas')
var context = canvas.getContext('2d')

context.webkitImageSmoothingEnabled = false
context.mozImageSmoothingEnabled = false
context.msImageSmoothingEnabled = false
context.imageSmoothingEnabled = false

enter image description here

Мне интересно, есть ли способ затем выяснить, где находятся квадраты на холсте и какие они цвета, чтобы вы могли что-то делать с ними, как (в данном случае), анимировать их так, чтобы это выглядело как они сверкают, или, может быть, проще просто оживить их взад-вперед, как волна.

1 Ответ

1 голос
/ 15 июня 2019

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

Вы можете сделать это самостоятельно, однако. В основном вы должны определить размер пикселя для вашей мозаики - например, 16. Теперь переберите полное изображение и получите цвет одного пикселя 1x1 с координатами экрана, кратными размеру пикселя. Наконец, сохраните каждую позицию пикселя, ее размер и цвет в массиве.

Теперь вы можете циклически перемещаться по массиву и рисовать отдельные прямоугольники на холсте или анимировать их как хотите.

Вот пример: 

Square = function(x, y, w, h, color) {
  this.x = x;
  this.y = y;
  this.width = w;
  this.height = h;
  this.color = color;
}

var squares = new Array();
var canvas = document.createElement("canvas");
var canvas2 = document.createElement("canvas");
canvas.width = canvas2.width = 200;
canvas.height = canvas2.height = 100;
var context = canvas.getContext("2d");
var context2 = canvas2.getContext("2d");
document.body.appendChild(canvas);
document.body.appendChild(canvas2);

function rgbToHex(r, g, b) {
  return ((r << 16) | (g << 8) | b).toString(16);
}

var img = new Image();
img.onload = function() {

  context.drawImage(this, 0, 0);

  var pixelSize = 8;
  var ySteps = Math.round(this.height / pixelSize);
  var xSteps = Math.round(this.width / pixelSize);
  var colorX;
  var colorY;
  var square;
  var color;
  var hexColor;
  
  for (var i = 0; i <= ySteps; i++) {
    if (i == ySteps) {
      colorY = pixelSize * (i - 1);
    } else {
      colorY = pixelSize * (i);
    }

    for (var j = 0; j <= xSteps; j++) {
      if (j == xSteps) {
        colorX = pixelSize * (j - 1);
      } else {
        colorX = pixelSize * (j);
      }

      color = context.getImageData(j * pixelSize, i * pixelSize, 1, 1).data;
      hexColor = "#" + ("000000" + rgbToHex(color[0], color[1], color[2])).slice(-6);

      square = new Square(j * pixelSize, i * pixelSize, pixelSize, pixelSize, hexColor);
      squares.push(square);
    }
  }

  for (var a = 0; a < squares.length; a++) {
    square = squares[a];
    context2.fillStyle = square.color;
    context2.fillRect(square.x, square.y, square.width, square.height);
  }
}

img.crossOrigin = "anonymous";
img.src = "https://picsum.photos/id/76/200/100";
...