关于表单截图的使用填坑

前言

进来要进行表单填写完之后进行截图的工作，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 }),)