上传图片（photoClip）

首先我们需要引入4个js包(这4个包总共106.6KB)

<script src="__STATIC__/hammer.min.js" ></script>

<script src="__STATIC__/iscroll-zoom.min.js"></script>

<script src="__STATIC__/lrz.all.bundle.js" ></script>

<script src="__STATIC__/PhotoClip.min.js"></script>

html:

<!--上传图片功能-->

<div id="src_0" class="weui_uploader_input_wrp">

    <input type="file" id="file" class="upload_img_btn">

</div>

<!--预览图片功能-->

<li hidden class="weui_uploader_file upload_img_box_file" id="view" data-id=""><span class="del">×</span></li>

<!--剪裁图片功能-->

<div class="upload_img_box" id="upload_img_box">
    <div class="pic middle" id="clipArea"></div>
    <button type="submit" class="weui_btn vote_detail_btn btn" id="clipBtn">裁剪</button>
</div>

css:

.upload_img_box {width: %;min-width: 320px;max-width: 640px;background: #fff;position: fixed;top: ;bottom: ;left: ;right: ;z-index: ;display: none;}

.upload_img_box .pic {width: %;position: absolute;top: ;bottom: .05rem;left: ;}

.middle {width: %;display: flex;display: -webkit-box;display: -moz-box;-webkit-box-pack: center;-moz-box-pack: center;-webkit-box-align: center;-moz-box-align: center;}

.upload_img_box .btn {width: %;height: .65rem;background: #f8a513;color: #fff;position: absolute;bottom: .2rem;left: ;right: ;margin:  auto;}

button.weui_btn, input.weui_btn {width: %;border-width: ;outline: ;}

.uploadify-button, input[type=file] {background: #33ab07;border-radius: 3px;padding: 10px ;display: block;width: %;text-align: center;color: #fff;font-size: 16px;text-decoration: none;border: none;}

.upload_img_btn {position: absolute;top: ;bottom: ;left: ;right: ;opacity: ;z-index: ;}

.weui_uploader_input_wrp {position: relative;margin-left: .34rem;height: .2rem;width: .9rem;border: 1px solid #D9D9D9;}

.weui_uploader_file {position: relative;margin-left: .34rem;height: .2rem;width: .9rem;background: center center no-repeat;background-size: cover;border: 1px solid #D9D9D9;}

.weui_uploader_file .del {width: .2rem;height: .2rem;border-radius: %;background: rgba(,,,.);font-size: .22rem;color: #fff;text-align: center;line-height: .2rem;position: absolute;top: -.1rem;right: -.1rem;}