动态给图片加相框的DEMO
1.制作缘由:
需要展示瀑布流,但是只是单个的图片展示过于单调。添加相框时需要美工大批量的作图,修改相框还需要从来一遍。于是制定了好多的解决方案,根据实际的需求,最后使用了最灵活的、最美观的实现方案。
2.功能:
只需指定一个相框图,相框图要求:宽高长度要大于等于展示内容中的图片的长宽。
可为图片指定上下左右四个边框不同宽度的相框。
可动态设置相框图片。
3.工作
先写一个固定一个相框的样式,全部写完后,将需要动态读取相框宽度的参数,统一整合起来,用来进行动态设置。代码简单,功能强大。如图:
这个图从网上找的,不是很规格。原图:
我们可以动态生成的图片只能是比较规范一点的图片:
最后就可以生成效果了:
小图可以,因为相框比图片大。大图就不行了,所以说:相框大小必须大于等于最大图片大小。
需要的前端程序员们,源码链接: