从两种颜色创建随机图案答案

【问题标题】：Create random pattern from two colors从两种颜色创建随机图案
【发布时间】：2017-09-08 15:17:08
【问题描述】：

我想创建一个具有这种模糊效果的标题背景。有没有库可以随机制作这种类型的东西，使用两种颜色作为源，或者一个图像？

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

https://jsfiddle.net/6wp1qyr9/

【问题讨论】：

@artgb 我不是在寻找算法。
你可以使用 JavaScript 轻松完成。

标签： javascript css plugins

【解决方案1】：

不完全是您要找的东西，但我找到了这个，并认为它可能会给您一个起点：Generate a monochrome bitmap image in JavaScript

还发现了这个用于在 JS 中生成 PNG 的库：Generating images in JavaScript

【讨论】：

【解决方案2】：

您可以使用 CSS blur 属性来模糊图像。例如：

img {
  width: 100%;
}

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

&lt;img class="blur" src="https://cdn-images-1.medium.com/max/2000/1*YRINRZFr0E1FRJ4JpizEMw.jpeg"&gt;

或者，放大图像的一部分：

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>

【讨论】：