Thread replies: 11
Thread images: 1
Thread images: 1
File: Capture d’écran 2016-11-12 à 23.42.58.png (826KB, 1146x1163px) Image search:
[Google]
826KB, 1146x1163px
Anon's challenge: convert a picture into 1px by 1px html elements.
This is the best solution I have at the moment, (improved from another anon):from PIL import Image, ImageOps
im = Image.open("1447035697098.jpg")
# Ratio
MAX_WIDTH = 1000
if im.size[0] > MAX_WIDTH:
r = im.size[0] / im.size[1]
h = int(MAX_WIDTH * r)
im = ImageOps.fit(im, [MAX_WIDTH, h], Image.ANTIALIAS)
x = im.size[0]
y = im.size[1]
pixels = []
w = 0
h = 0
pix = im.load()
for j in range(y):
for i in range(x):
pixels.append('#%02x%02x%02x' % (pix[i, j]))
width = int(x)
q = open('output.html', 'w')
lines = [pixels[i:i + width] for i in range(0, len(pixels), width)]
script = """
document.addEventListener('DOMContentLoaded', function() {
var h = 0;
draw = document.getElementById("draw");
for (var l = 0; l < pix.length; l++) {
h++;
for (var p = 0; p < pix[l].length; p++) {
var newPix = document.createElement('div');
newPix.style.position = "absolute";
newPix.style.height = 1 + "px";
newPix.style.width = 1 + "px";
newPix.style.left = p + "px";
newPix.style.top = h + "px";
newPix.style.backgroundColor = pix[l][p];
draw.appendChild(newPix)
}
}
});
"""
body = """
<html>
<head>
<script>window.pix = %s;</script>
<script>%s</script>"
</head>
<body>
<div id='draw'></div>
</body>
</html>
""" % (str(lines), script)
q.write(body)
q.close()
A 4.7MB image goes to 11.4MB of HTML. Thoughts?
>>
>>57483143
Why?
>>
>>57483164
Why not?
>>
How big gzipped HTML is?
>>
>>57483169
The challenge is raw output / rendering speed. Not compression and delivery
>>
>>57483180
I know, just curious.
>>
>>57483164
>>57483167
>>57483180
>>57483188
Do not post your solution for this. OP is either a pajeet in too deep at his company, or he's trying to make some shit eating DRM for his website.
Go away OP.
>>
A little neater, now that I am done fucking aroundfrom PIL import Image, ImageOps
im = Image.open("1447035902821.jpg")
x, y = im.size[0], im.size[1]
pixels, w, h = [], 0, 0
pix = im.load()
for j in range(y):
temp = []
for i in range(x):
temp.append('#%02x%02x%02x' % (pix[i, j]))
pixels.append(temp)
q = open('output.html', 'w')
body = """
<html>
<head>
<script>window.pix = %s;</script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var h = 0;
draw = document.getElementById("draw");
for (var l = 0; l < pix.length; l++) {
h++;
for (var p = 0; p < pix[l].length; p++) {
var newPix = document.createElement('div');
newPix.style.position = "absolute";
newPix.style.height = 1 + "px";
newPix.style.width = 1 + "px";
newPix.style.left = p + "px";
newPix.style.top = h + "px";
newPix.style.backgroundColor = pix[l][p];
draw.appendChild(newPix)
}
}
});
</script>
</head>
<body>
<div id='draw'></div>
</body>
</html>
""" % (str(pixels))
q.write(body)
q.close()
>>57483223
t. no fun allowed
>>
>>57483223
Doubt it. Why not just use base64 or canvas or something. I can't think of any possible real world use for this
>>
<img height=1 width=1 src=hello.jpg></img>
Yall niggas makin this too hard LOL
>>
>not using a context manager for open files
kill yourself
Thread posts: 11
Thread images: 1
Thread images: 1