技术分享

后台换头像、商品传主图，用户丢进来的经常是横图或竖图。不裁就塞进方框会被压扁，做成圆头像还会对不齐。这类需求要在网页里先弹出裁剪窗，让用户框住要用的那一块，再把裁好的图显示到页面上，并交给后台保存。选图、开窗、框选、导出是同一套流程，头像和主图都能套。这一步做完再存库。

本文介绍公司官网新闻中心列表页如何写。这类栏目页通常包括页头导航、横幅、面包屑、左侧栏目、右侧图文列表和底部分页，用来展示公司要闻等内容。文章说明这些区块如何排，日期角标怎么叠在缩略图上，标题和摘要如何截断，分页和返回顶部怎么做，以及列表如何接到真实项目的接口上。

本文介绍系统升级维护时，如何做一页面向用户的友好提示页。站点停机时，用户容易看到空白页或报错，误以为网站挂了。单独做一页提示，把正在维护、预计多久、请稍后再试说清楚。文章写了为什么需要、能起哪些作用，以及用到哪些文件、配图和中英文案怎么排、移动端如何适配。

订单、合同、报表预览经常要把当前页存一份给对方。这版用 jQuery 1.9.1：html2canvas 把指定节点画成一张长图，jsPDF 再按 A4 往 PDF 里贴；高度超过一页，就把这张图按页切开。

​公祭日、重大哀悼，整站要先铺一层灰。这版走两条路：Chrome / Firefox / Edge 用 CSS filter，IE9 及以下用 grayscale.js。

后台、报表、详情页经常要铺一层字，标明谁在看这份页。这版用 jQuery 1.9.1。核心是按页宽页高算出行列，每个格子一个 div，再旋转、调透明。