用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 %}