用Flask重写了图片墙生成器。
Github项目:https://github.com/greyli/image-wall
图片墙Demo:http://fanxiangce.com/demo1(旧Demo)
主要变化
和之前的Python版本相比的变动:
- 实现了上传功能
- 优化了CSS和JS代码
- 简化了页面元素,去掉了没用的赞助页面
- 把HTML分离出Python,代码结构更清晰
实现步骤
1、用户上传图片;
2、生成用户文件夹,重命名图片;
1 2 3 4 5 6 7 8 9 10 11 12 |
@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、渲染模板,传入这些坐标;
1 2 3 4 5 |
{% 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 %} |
当我从GitHub克隆了作者的 “图片墙生成器” 到本地,上传完成, 没法生成照片墙
具体说说?确保安装了相应的扩展,上传图片数量在10~100内。