上传图片（photoClip）

Posted 2020-10-08 前端开发-阿锋

首先我们需要引入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: 100%;min-width: 320px;max-width: 640px;background: #fff;position: fixed;top: 0;bottom: 0;left: 0;right: 0;z-index: 99999;display: none;}
.upload_img_box .pic {width: 100%;position: absolute;top: 0;bottom: 1.05rem;left: 0;}
.middle {width: 100%;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: 60%;height: .65rem;background: #f8a513;color: #fff;position: absolute;bottom: .2rem;left: 0;right: 0;margin: 0 auto;}
button.weui_btn, input.weui_btn {width: 100%;border-width: 0;outline: 0;}
.uploadify-button, input[type=file] {background: #33ab07;border-radius: 3px;padding: 10px 0;display: block;width: 100%;text-align: center;color: #fff;font-size: 16px;text-decoration: none;border: none;}
.upload_img_btn {position: absolute;top: 0;bottom: 0;left: 0;right: 0;opacity: 0;z-index: 2;}
.weui_uploader_input_wrp {position: relative;margin-left: 0.34rem;height: 1.2rem;width: 0.9rem;border: 1px solid #D9D9D9;}
.weui_uploader_file {position: relative;margin-left: 0.34rem;height: 1.2rem;width: 0.9rem;background: center center no-repeat;background-size: cover;border: 1px solid #D9D9D9;}
.weui_uploader_file .del {width: .2rem;height: .2rem;border-radius: 50%;background: rgba(0,0,0,.5);font-size: .22rem;color: #fff;text-align: center;line-height: .2rem;position: absolute;top: -0.1rem;right: -0.1rem;}