Flask實踐：圖片牆生成器

Demo：http://fanxiangce.com/demo1

Demo請使用電腦端瀏覽器打開，建議使用Chrome或Firefox，這個並不是實際Demo，這是還沒學Flask時用Python生成的HTML文件，但效果基本相同。現在用Flask重寫了它，更新了UI，你可以在本地安裝體驗實際效果。

實現步驟

1、用戶上傳圖片；

2、生成用戶文件夾，重命名圖片；

@app.route(/, methods=[GET, POST])ndef index():n # 為每一個用戶創建文件夾n username = hashlib.md5(demo + str(time.time())).hexdigest()[:7]n if request.method == POST and photo in request.files:n amount = len(request.files.getlist(photo))n if amount in range(10, 101): # 控制圖片數量在10~100之間n for num, img in enumerate(request.files.getlist(photo)):n filename = username + str(num) # 使用用戶名加序號命名圖片n photos.save(img, name=username + / + filename + .)n return redirect(url_for(image_wall, username=username))n return render_template(index.html)n

3、根據圖片數量分配相應的行列圖片數量，並為每一張圖片生成三維坐標；

4、渲染模板，傳入這些坐標；

{% for image in images %}n<div class="step center-text" data-x="{{ image[1] }}" data-y="{{ image[2] }}" data-z="{{ image[3] }}">n <img class="image" src="{{ url_for(static, filename=photos/) }}{{ image[0] }}">n</div>n{% endfor %}n

最終效果

上傳：

（點擊圖片可以拉近，點擊周圍的圖片即可跳轉）

相關鏈接

Github項目：https://github.com/greyli/image-wall

圖片牆Demo：http://fanxiangce.com/demo1

- - - - -

更多關於Flask和Web開發的原創內容，歡迎關注知乎專欄 - Hello, Flask!。