标签归档:翻相册

图片墙生成器

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

 

 

翻相册(fanxiangce.com)

搭积木

本来说要好好学习一下前端技术,可没过几天,又开始了堆积木式的创造:把各种JS库,CSS库搭配起来,最终用Python做胶水实现了一个网页相册生成器。顺便用Bootstrap的模板做了一个介绍页:翻相册(fanxiangce.com)

 

翻相册

故事还要从我上次做幻灯片讲起。用impress.js做了幻灯片不久,就想着用Python搭配impress.js做一个幻灯片生成器,最终实现的效果是:可以从一个文本文档里读取文本,每一行创建一张幻灯片,坐标可以固定(通过在每一行的结尾传入坐标参数),也可以随机(没解决遮盖问题)。做着做着,发现这并不实用。估计没人愿意用这种死板无聊的幻灯片。没过几天,又想用impress.js搭配csshke做一个记单词的网页程序,几天后因为能力不够被暂时搁置了。

接着,又有了新的想法,在原来的幻灯片生成器的基础上改了改,做成了一个照片墙生成器。原理很简单。就是通过获取图片的数量和文件名,生成足量的坐标,然后用Python生成相应的div,最后连接头尾组成一个完整的HTML文件。做成这样一个照片墙:

图片墙示例

点击任一张图片可以拉近,点击相邻图片可以移动位置。

又过了几天,照片墙实现了tooltip功能,可以自动把文件名(没有格式后缀)设为tooltip内容。我想到的一个理想的应用场景是:集体制作照片墙,每个人上传自己的照片给某个人,以自己的名字作为文件名,收集照片的人只需要上传照片,设置标题,然后点击生成。打开后每张照片在鼠标掠过时都会用tooltip显示姓名。像这样:

tooltip

tooltip的颜色可以自定义。

故事还没完。又过了几天,我买了fanxiangce.com,做了一个粗糙的介绍页。发现功能还太单调,和其他的在线相册相比没有什么吸引力。又实现了立体相册,像这样:

3d

点击任意一张照片可以拉近

随机散落(仍然没有解决遮盖问题),像这样:

随机散落的照片,点击任一张可以拉近

随机散落的照片,点击任一张可以拉近

标签云(使用svg3dtagcloud.js):

基于文本的标签云

基于文本的标签云

点击标签就会打开相应的图片:

使用remodal.js实现的弹窗

使用remodal.js实现的弹窗

现在只是一个简单的demo,未来还会实现很多功能,比如把标签换成图片缩略图。可以参见TagCanvas

 

总结

上面的相册都有相应的demo,欢迎到翻相册上体验。也欢迎申请试用。虽然已经花了很多时间在上面,但是要做的事情还有很多。比如实现模拟翻页的相册,让图片更美观的排列,不是单一的对齐。等我暑假学习一下Flask和JS,把网站做出来,顺便把电脑端程序和在线程序做出来,就可以开放注册和在线自动生成相册了。