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.
61 lines
1.8 KiB
61 lines
1.8 KiB
10 years ago
|
var svg = (function(colors){
|
||
|
|
var canvas = document.createElement('canvas'),
|
||
|
|
ctx = canvas.getContext('2d');
|
||
|
|
|
||
|
|
canvas.width = 10
|
||
|
|
canvas.height = 2
|
||
|
|
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
|
||
|
|
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]+0%2*20,255)+', '+mincolor[1]+', '+mincolor[2]+',1)');
|
||
|
|
|
||
|
|
svg.appendChild(elem);
|
||
|
|
};
|
||
|
|
return svg
|
||
|
|
})([
|
||
|
|
[39, 198, 249],
|
||
|
|
[6, 188, 249],
|
||
|
|
// [154, 218, 198],
|
||
|
|
[116, 218, 251],
|
||
|
|
[91, 211, 251]])
|
||
|
|
document.getElementById('marterial').appendChild(svg)
|