前言
进来要进行表单填写完之后进行截图的工作，google了一下找到了html2canvas这款工具。
原理
使用起来不算难，原理简单说一下，就是把div或者整个body刻制到一个canvas中，然后再将此canvas转化为image。
填坑
- 版本问题
html2canvas的版本控制我觉得有很大的问题，v0.4.1存在多个版本，而官方网站提供的4.1的版本最后一次是2013年的，这个版本是不能显示raido input的（这个稍后详述）,为了解决这个问题，我又找到了2014年更新的4.1版本，官网并不存在。
另外，v0.5.0稍微尝试了一下，缺陷有点多。对于div的截图智能做到可见范围内的截取，也就是说遇到大的div是不能全部截取的。所以果断又重新拾起0.4.1，注意是3034行代码的那个4.1。
- background color
因为div的background是transparent，所以截图截取下来的自然就是白色很刺眼的那种
解决方案:
1.官方版的4.1中可以对background进行颜色设定，但是因为不支持radioinput，所以摒弃；
2.对div进行background－color设定，成功。
- radio input中的dot在chrome中截图下来的效果是白点
前端不是太懂，只是发现在firefox中截取下来的点击项是黑点，而chrome中却是白点，这显然太影响视觉效果了，于是找到了一下方案，对radio input 进行加工（主要也是调background color）。
input[type=radio]{
visibility: hidden;
}
input[type=radio] + label:before{
margin-left: -20px;
height:13px;
width:13px;
margin-right: 2px;
content: " ";
display:inline-block;
vertical-align: baseline;
border:1px solid #777;
border-radius:50%;
}
input[type=radio]:checked + label:before{
background:rgb(0,238,247);
}
图片
-
图片格式问题
png转jpg的时候，图片质量进行了压缩，size小了一半，导致质量下降,看上去像是马赛克，所以在size不是太大的时候，我还是选择使用png格式。
-
缩略图制作
python中制作缩略图，采用PIL这个包(pip install pillow),
image = Image.open(path + file_name) image.thumbnail((620,620),Image.ANTIALIAS) image.save(path,"png")
图片服务器
- 最简单的服务器
将静态路径在
1.settings中设置，MEDIA_ROOT 与 MEDIA_URL
2.urls配置
DIRNAME = os.path.dirname(__file__)
urlpatterns += patterns("",
(r'^media/(?P<path>.*)$', 'django.views.static.serve', {'document_root': settings.MEDIA_ROOT, 'show_indexes': True }),)