Question

我想用这种模糊效果创建标题背景。有任何库可以随机制作这种类型的东西，使用两种颜色作为源，还是图像？

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

https://jsfiddle.net/6wp1qyr9/

Answer 1

不完全是你想要的，但我发现了这一点，并认为它可能会给你一个开始的地方：Generate a monochrome bitmap image in JavaScript

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

Answer 2

您可以使用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>

从两种颜色创建随机模式

2 个答案: