ランダムなパターンを2つの色から作成する

Question

このようなぼかし効果を持つヘッダーの背景を作成したいとします。このタイプのものを無作為に作成するためのライブラリは、2つの色をソースまたはイメージとして使用しますか？

.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

あなたは、画像をぼかすために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> 
 

Answer 2

ないまさにあなたが探しているが、私が発見これは、開始する場所を与えるかもしれないと思った：Generate a monochrome bitmap image in JavaScript

もJSでPNG画像を生成するために、このライブラリを見つけました：私は、アルゴリズムを捜しているわけではないGenerating images in JavaScript