最近在做一个项目，其中包括了一个图片在线裁剪功能，于是找到了cropperjs，cropperjs的裁剪功能丰富，满足了各种需求，预览链接：cropperjs预览

裁剪图片的两种思路：

1.在前端裁剪，通过html5的HTMLCanvasElement.toBlob方法，把裁剪后的图片通过表单方式用ajax提交给后台，或者使用HTMLCanvasElement.toDataURL 把图片转换为base64提交到后台。

2.在后台裁剪，在前端裁剪后把裁剪的坐标和裁剪之前的原图发送到后台，让后台执行裁剪，把裁剪后的图片返回

以上两种方法使用cropperjs都是支持的，自己选择了第一种方案，减轻后台工作。

- 阅读剩余部分 -

输出文本

th:text="${text}"

<p th:text="${text}"><p>

text是一个变量，th:text命令输出的内容会替换当前标签里面的全部内容，上面输出：

<p>这里是输出内容<p>

注意th:text会把输出全部转换为字符串，如果你的变量里面有标签，也会解析为字符串，想要标签正常的被浏览器解析，要使用th:utext

循环数组列表

th:each=${item:list}

<p th:each="${item:list}" th:text="${item.text}" >  </p>

list是数组,item是数组的每一项

判断一个列表是否为空

${#lists.isEmpty(list)}

    <p th:if="${!#lists.isEmpty(list)} > </p>

上面的list不为空才显示p标签

未完