8
图片墙生成器
source link: https://greyli.com/picture-wall-builder/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
图片墙生成器
用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 %}
《图片墙生成器》上有2条评论
-
vforbox 2017年1月22日上午10:31
当我从GitHub克隆了作者的 “图片墙生成器” 到本地,上传完成, 没法生成照片墙
回复 ↓-
具体说说?确保安装了相应的扩展,上传图片数量在10~100内。
回复 ↓
-
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK