用Flask重写了图片墙生成器。
Github项目:https://github.com/greyli/image-wall
图片墙Demo:http://fanxiangce.com/demo1(旧Demo)
主要变化
和之前的Python版本相比的变动:
- 实现了上传功能
- 优化了CSS和JS代码
- 简化了页面元素,去掉了没用的赞助页面
- 把HTML分离出Python,代码结构更清晰
实现步骤
1、用户上传图片;
2、生成用户文件夹,重命名图片;
@app.route('/', methods=['GET', 'POST'])
def index():
# 为每一个用户创建文件夹
username = hashlib.md5('demo' + str(time.time())).hexdigest()[:7]
if request.method == 'POST' and 'photo' in request.files:
amount = len(request.files.getlist('photo'))
if amount in range(10, 101): # 控制图片数量在10~100之间
for num, img in enumerate(request.files.getlist('photo')):
filename = username + str(num) # 使用用户名加序号命名图片
photos.save(img, name=username + '/' + filename + '.')
return redirect(url_for('image_wall', username=username))
return render_template('index.html')
3、根据图片数量分配相应的行列图片数量,并为每一张图片生成三维坐标;
4、渲染模板,传入这些坐标;
{% for image in images %}
<div class="step center-text" data-x="{{ image[1] }}" data-y="{{ image[2] }}" data-z="{{ image[3] }}">
<img class="image" src="{{ url_for('static', filename='photos/') }}{{ image[0] }}">
</div>
{% endfor %}