You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
90 lines
2.4 KiB
90 lines
2.4 KiB
<html> |
|
<head> |
|
<title></title> |
|
<style type="text/css"> |
|
body { |
|
margin: 0px |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<script type="text/javascript"> |
|
|
|
var svg = (function(colors){ |
|
var canvas = document.createElement('canvas'), |
|
ctx = canvas.getContext('2d'); |
|
|
|
canvas.width = 10 |
|
canvas.height = 5 |
|
var upscale = 10 |
|
|
|
var im = ctx.getImageData(0,0,canvas.width,canvas.height) |
|
for (var i = 0; i < im.data.length; i+=4) { |
|
im.data[i] = Math.round(Math.random()*255) |
|
im.data[i+1] = Math.round(Math.random()*255) |
|
im.data[i+2] = Math.round(Math.random()*255) |
|
im.data[i+3] = 255 |
|
}; |
|
ctx.putImageData(im,0,0) |
|
var url = canvas.toDataURL() |
|
im = new Image() |
|
im.src = url |
|
canvas.width *= upscale |
|
canvas.height *= upscale |
|
ctx.drawImage(im,0,0,canvas.width, canvas.height) |
|
im = ctx.getImageData(0,0,canvas.width,canvas.height) |
|
|
|
var xmlns = "http://www.w3.org/2000/svg"; |
|
var svg = document.createElementNS(xmlns, 'svg') |
|
svg.setAttribute('viewBox',"0 0 "+im.width+" "+im.height) |
|
for (var i = 0; i < im.data.length; i+=4) { |
|
var mindist = 195075 |
|
var mincolor = [0,0,0] |
|
var pix = [im.data[i],im.data[i+1],im.data[i+2]] |
|
for (var j = 0; j < colors.length; j++) { |
|
var color = colors[j] |
|
var d0 = color[0] - pix[0] |
|
var d1 = color[1] - pix[1] |
|
var d2 = color[2] - pix[2] |
|
var d = Math.abs(d0)+Math.abs(d1)+Math.abs(d2) |
|
if (d<mindist) { |
|
mindist = d |
|
mincolor = color |
|
} |
|
}; |
|
|
|
var n = i/4 |
|
ctx.fillStyle = 'rgba('+Math.min(mincolor[0]+n%2*20,255)+', '+mincolor[1]+', '+mincolor[2]+',1)' |
|
var elem = document.createElementNS(xmlns, "rect"); |
|
|
|
elem.setAttributeNS(null,"x",n%im.width); |
|
elem.setAttributeNS(null,"y",Math.floor(n/im.width)); |
|
elem.setAttributeNS(null,"width",1.5); |
|
elem.setAttributeNS(null,"height",1.5); |
|
elem.setAttributeNS(null,"fill", 'rgba('+Math.min(mincolor[0]+n%2*20,255)+', '+mincolor[1]+', '+mincolor[2]+',1)'); |
|
|
|
svg.appendChild(elem); |
|
}; |
|
return svg |
|
})([[39, 198, 249], [6, 188, 249], [116, 218, 251], [91, 211, 251]]) |
|
|
|
document.body.appendChild(svg) |
|
// wrap.appendChild(svg) |
|
|
|
// document.body.style.backgroundImage = "url(data:image/svg+xml;utf8,"+wrap.innerHTML+")" |
|
// document.styleSheets[0].insertRule("body {background: url('data:image/svg+xml;utf8,"+wrap.innerHTML+"')}",0) |
|
|
|
// ctx.putImageData(im,0,0) |
|
// canvas.style.width = 2000 |
|
// canvas.style.height = 2000 |
|
|
|
// document.body.appendChild(canvas) |
|
|
|
|
|
|
|
|
|
|
|
</script> |
|
<!-- <script type="text/javascript" src="wolo.js"></script> --> |
|
</body> |
|
</html> |