Создать случайный узор из двух цветов

Question

Создать случайный узор из двух цветов

1

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

.myElement { 
    background-size: cover;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAADCAYAAABfwxXFAAAAYklEQVQYVwFXAKj/AUkdUf8hDh8AXFpKAOXO1gAp+RYAIRgdAJnNwwABs2an/+LZ3gDqCvcAPVVLANm6xAA3CxYAMyIuAAGNTY3/6evjAOT99QAtRTkAHR4UAMuaugAyFSkAiWIgFtwHkmoAAAAASUVORK5CYII=");
  width:1000px;
  height:500px;
}

https://jsfiddle.net/6wp1qyr9/

anvd 08 сен. 2017, в 17:28

Источник

0

@artgb Я не ищу алгоритм.
anvd 08 сен. 2017, в 15:23
0

Вы можете сделать это достаточно легко с помощью JavaScript.
Adam 08 сен. 2017, в 15:24

Теги:

javascript

css3

plugins

2 ответа

Ещё вопросы

Вы можете сделать это достаточно легко с помощью JavaScript.

Brian · Answer 1 · 2017-09-08T13-46-00.000Z

Вы можете использовать свойство размытия CSS для размытия изображений. Например:

img {
  width: 100%;
}

.blur {
  filter: blur(10px);
}

<img class="blur" src="https://cdn-images-1.medium.com/max/2000/1*YRINRZFr0E1FRJ4JpizEMw.jpeg">

В качестве альтернативы, увеличьте часть изображения:

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
canvas.height = window.innerHeight;
canvas.width = window.innerWidth;


function drawPartialImage() {
  var base64 = this.result;
  var image = new Image();
  image.src = base64;
  image.onload = function() {
    context.drawImage(
      image,
      Math.floor(image.width * Math.random()),
      Math.floor(image.height * Math.random()),
      12,
      12,
      0,
      0,
      canvas.width,
      canvas.height);
  }
}

document.getElementById('fileInput').onchange = function(event) {
  var file = event.target.files[0];
  var reader = new FileReader();
  reader.onload = drawPartialImage.bind(reader);
  reader.readAsDataURL(file);
}

  <input type="file" id="fileInput" style="position: fixed; z-index: 1; top: 0; left: 0;"><br>
  <canvas id="canvas" style="position: fixed; top: 0; left: 0; z-index: 0;"></canvas>

пожалуйста, см. градиент.quasi.ink в качестве примера.

Brian · Answer 2 · 2017-09-08T13-35-00.000Z

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

Также найдена эта библиотека для генерации PNG в JS: Генерация изображений в JavaScript