PhotoClip 上传图片

暂无标签
<script src="/staticfile/cover/iscroll-zoom.js" type="text/javascript" charset="utf-8"></script>
<script src="/staticfile/cover/hammer.js" type="text/javascript" charset="utf-8"></script>
<script src="/staticfile/cover/lrz.all.bundle.js" type="text/javascript" charset="utf-8"></script>
<script src="/staticfile/cover/jquery.photoClip.min.js" type="text/javascript" charset="utf-8"></script>
jQuery(".upimg-btn").on("click",'',function(e){
  var file_i = jQuery(e.target).data("options").i; // input id
  var file_v = jQuery(e.target).data("options").v; // 展示容器
  var file_w = jQuery(e.target).data("options").w; // 宽度
  var file_h = jQuery(e.target).data("options").h; // 高度
  var file_a = jQuery(e.target).data("options").a; // 裁剪容器
  var file_o = jQuery(e.target).data("options").o; // 提交按钮
  var file_m = jQuery(e.target).data("options").m; // 弹出层
  var file_t = jQuery(e.target).data("options").t; // 所属类型
  var file_c = jQuery(e.target).data("options").c; // 位置之后弹出层
  var file_n = jQuery(e.target).data("options").n; // 传递id
  if(jQuery("#"+file_m).length == 0){
    if(file_t == "spacecover"){
            jQuery(file_c).after('<div id="'+file_m+'" class="card" style="display:none;position:absolute;left:-1px;top:0;width:1002px;height:auto;z-index: 9999;text-align:center;"><div style="width:1002px;height:310px;"><div id="'+file_a+'" style="height:242px;"></div><div class="d-flex align-items-center mt-3"><div class="col text-muted">裁剪尺寸1000*240,鼠标滚轮放大缩小,左键可拖动</div><div class="text-center col"><button id="'+file_o+'" class="btn btn-primary mr-3">保存封面</button><button type="button" class="btn btn-danger" onclick="CloseBox(\''+file_m+'\')">取消</button></div></div></div></div>');
    }else if(file_t == "avatar"){
            jQuery(file_c).after('<div id="'+file_m+'" class="modal" style="z-index:9999"><div class="modal-dialog modal-sm"><div class="modal-content p-4"><div class="modal-body" style="height:200px;" id="'+file_a+'"></div><button id="'+file_o+'" class="btn btn-primary my-3">保存封面</button><button type="button" class="btn btn-danger" onclick="CloseBox(\''+file_m+'\')">取消</button></div></div></div>');
    }
  }
  var clipArea = new bjj.PhotoClip("#"+file_a, {
    size: [file_w, file_h],// 截取框的宽和高组成的数组。默认值为[260,260]
    outputSize: [file_w, file_h], // 输出图像的宽和高组成的数组。默认值为[0,0],表示输出图像原始大小
    //outputType: "jpg", // 指定输出图片的类型,可选 "jpg" 和 "png" 两种种类型,默认为 "jpg"
    file: "#"+file_i, // 上传图片的<input type="file">控件的选择器或者DOM对象
    view: "."+file_v, // 显示截取后图像的容器的选择器或者DOM对象
    ok: "#"+file_o, // 确认截图按钮的选择器或者DOM对象
    loadStart: function() {
      // 开始加载的回调函数。this指向 fileReader 对象,并将正在加载的 file 对象作为参数传入
      jQuery("#"+file_m).fadeIn();
      if(jQuery(".modal-backdrop").length == 0){
                jQuery('body').append('<div class="modal-backdrop fade in"></div>');
      }
    },
    loadComplete: function(dataURL) {
      // 加载完成的回调函数。this指向图片对象,并将图片地址作为参数传入
      // console.log("照片读取完成");
    },
    //loadError: function(event) {}, // 加载失败的回调函数。this指向 fileReader 对象,并将错误事件的 event 对象作为参数传入
    clipFinish: function(dataURL) {
      // 裁剪完成的回调函数。this指向图片对象,会将裁剪出的图像数据DataURL作为参数传入
      jQuery("#"+file_m).fadeOut();
      jQuery('.modal-backdrop').remove();
      jQuery("."+file_v).css('background-size','100% 100%');
      coverAjax(dataURL,file_t,file_v,file_n);
    }
  });
});
function CloseBox(box){
  jQuery("#"+box).hide();
  jQuery('.modal-backdrop').remove();
}
function coverAjax(src,type,view,file_n) {
  var data = {};
  data.img = src;
  jQuery.ajax({
    url: "/people/misc/"+file_n+".html?type="+type,
    cache: false,
    data: data,
    type: "POST",
    dataType: 'json',
    success: function(re) {
        if(re.status == '1') {
                jQuery("."+view+" > img").attr("src",src);
        }else{
                toastr.error('User Error!');
        }
    }
  });
};

e.g. 1

<div class="avatar-view card-cover" id="avatar-view">
    <img src="{echo face($people['uid'])}" class="card-img" width="120" height="120">
    <label for="avatar" class="avatar-mask text-center d-flex btn btn-outline-secondary card-cover-upload-btn upimg-btn" data-options='{"i":"avatar","v":"avatar-view","w":"120","h":"120","a":"clipAvatar","o":"bbtn","m":"avatarmodal","t":"avatar","c":"#append_parent","n":"$people['uid']"}'><input type="file" id="avatar" class="d-none"><i class="fa fa-camera-retro align-self-center text-white m-auto fa-3x"></i></label>
</div>

e.g. 2

<div class="card-img-top view" style="height:240px;" >
    <img src="{echo spacecover($people['uid'])}">
    <label for="file" class="btn btn-outline-secondary card-cover-upload-btn upimg-btn" data-options='{"i":"file","v":"view","w":"1000","h":"240","a":"clipCover","o":"clipBtn","m":"cover-wrap","t":"spacecover","c":".view","n":"$people['uid']"}'><i class="fa fa-camera-retro mr-1"></i>上传封面<input type="file" id="file" class="d-none"></label>
</div>