PhotoClip上传图片

浏览
70
回复
8
收藏
0
点赞
2

1#

2019-4-10 22:28:09
  1. <script src="/staticfile/cover/iscroll-zoom.js" type="text/javascript" charset="utf-8"></script>
  2. <script src="/staticfile/cover/hammer.js" type="text/javascript" charset="utf-8"></script>
  3. <script src="/staticfile/cover/lrz.all.bundle.js" type="text/javascript" charset="utf-8"></script>
  4. <script src="/staticfile/cover/jquery.photoClip.min.js" type="text/javascript" charset="utf-8"></script>
复制代码
  1. jQuery(".upimg-btn").on("click",'',function(e){
  2.         var file_i = jQuery(e.target).data("options").i; // input id
  3.         var file_v = jQuery(e.target).data("options").v; // 展示容器
  4.         var file_w = jQuery(e.target).data("options").w; // 宽度
  5.         var file_h = jQuery(e.target).data("options").h; // 高度
  6.         var file_a = jQuery(e.target).data("options").a; // 裁剪容器
  7.         var file_o = jQuery(e.target).data("options").o; // 提交按钮
  8.         var file_m = jQuery(e.target).data("options").m; // 弹出层
  9.         var file_t = jQuery(e.target).data("options").t; // 所属类型
  10.         var file_c = jQuery(e.target).data("options").c; // 位置之后弹出层
  11.         var file_n = jQuery(e.target).data("options").n; // 传递id
  12.         if(jQuery("#"+file_m).length == 0){
  13.                 if(file_t == "spacecover"){
  14.                         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>');
  15.                 }else if(file_t == "avatar"){
  16.                         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>');
  17.                 }
  18.         }
  19.         var clipArea = new bjj.PhotoClip("#"+file_a, {
  20.                 size: [file_w, file_h],// 截取框的宽和高组成的数组。默认值为[260,260]
  21.                 outputSize: [file_w, file_h], // 输出图像的宽和高组成的数组。默认值为[0,0],表示输出图像原始大小
  22.                 //outputType: "jpg", // 指定输出图片的类型,可选 "jpg" 和 "png" 两种种类型,默认为 "jpg"
  23.                 file: "#"+file_i, // 上传图片的<input type="file">控件的选择器或者DOM对象
  24.                 view: "."+file_v, // 显示截取后图像的容器的选择器或者DOM对象
  25.                 ok: "#"+file_o, // 确认截图按钮的选择器或者DOM对象
  26.                 loadStart: function() {
  27.                         // 开始加载的回调函数。this指向 fileReader 对象,并将正在加载的 file 对象作为参数传入
  28.                         jQuery("#"+file_m).fadeIn();
  29.                         if(jQuery(".modal-backdrop").length == 0){
  30.                                 jQuery('body').append('<div class="modal-backdrop fade in"></div>');
  31.                         }
  32.                 },
  33.                 loadComplete: function(dataURL) {
  34.                         // 加载完成的回调函数。this指向图片对象,并将图片地址作为参数传入
  35.                         // console.log("照片读取完成");
  36.                 },
  37.                 //loadError: function(event) {}, // 加载失败的回调函数。this指向 fileReader 对象,并将错误事件的 event 对象作为参数传入
  38.                 clipFinish: function(dataURL) {
  39.                         // 裁剪完成的回调函数。this指向图片对象,会将裁剪出的图像数据DataURL作为参数传入
  40.                         jQuery("#"+file_m).fadeOut();
  41.                         jQuery('.modal-backdrop').remove();
  42.                         jQuery("."+file_v).css('background-size','100% 100%');
  43.                         coverAjax(dataURL,file_t,file_v,file_n);
  44.                 }
  45.         });
  46. });
  47. function CloseBox(box){
  48.         jQuery("#"+box).hide();
  49.         jQuery('.modal-backdrop').remove();
  50. }
  51. function coverAjax(src,type,view,file_n) {
  52.         var data = {};
  53.         data.img = src;
  54.         jQuery.ajax({
  55.                 url: "/people/misc/"+file_n+".html?type="+type,
  56.                 cache: false,
  57.                 data: data,
  58.                 type: "POST",
  59.                 dataType: 'json',
  60.                 success: function(re) {
  61.                         if(re.status == '1') {
  62.                                 jQuery("."+view+" > img").attr("src",src);
  63.                         }else{
  64.                                 toastr.error('User Error!');
  65.                         }
  66.                 }
  67.         });
  68. };
复制代码
e.g. 1
  1. <div class="avatar-view card-cover" id="avatar-view">
  2. <img src="{echo face($people['uid'])}" class="card-img" width="120" height="120">
  3. <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>
  4. </div>
复制代码
e.g. 2
  1. <div class="card-img-top view" style="height:240px;" >
  2. <img src="{echo spacecover($people['uid'])}">
  3. <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>
  4. </div>
复制代码



SIGNATURE
想的简单做的复杂
何日君再来 发表于 2019-4-15 17:09
插件要是能分享出来就好了,dz手机版上次头像老大也研究一下吧,对了,怎样不登陆也能查看用户的帖子呢。 ...

1.插件分享不了,能不能做完还是个事儿。
2.目前不用手机版。
3.Discuz!教程之游客无法查看空间用户发帖记录问题的解决办法
SIGNATURE
想的简单做的复杂
这个替换DZ上的图片上传,我们DZ目前整合的七牛上传?
第一次 发表于 2019-4-11 09:16
这个替换DZ上的图片上传,我们DZ目前整合的七牛上传?

和你说的完全不搭。
这个是做插件的时候用到的,不涉及系统文件,连图片路径都是另外的。
论坛的图片上传不好改,涉及设置封面和ubb。
SIGNATURE
想的简单做的复杂
admin 发表于 2019-4-11 09:56
和你说的完全不搭。
这个是做插件的时候用到的,不涉及系统文件,连图片路径都是另外的。
论坛的图片上传 ...

什么研究一下DZ原先还未HTML5图片上传,现在HTML5上传,还要点击上传,太麻烦了。
第一次 发表于 2019-4-11 12:08
什么研究一下DZ原先还未HTML5图片上传,现在HTML5上传,还要点击上传,太麻烦了。 ...

你说的这是啥?
SIGNATURE
想的简单做的复杂
admin 发表于 2019-4-11 20:19
你说的这是啥?

DZ原生的HMTL5图片上传功能,上传图片,要点击上传才能上传!
第一次 发表于 2019-4-12 12:45
DZ原生的HMTL5图片上传功能,上传图片,要点击上传才能上传!

那个支持的也不好。
其实我的插件里包含了两种,和表单同步和异步。
如果表单里有其他需要填写或选中的内容时,最好不要用直接上传的方式,有时候图片上传了,表单却可能被取消了,那还要去删除图片。

如果只是单独的上传图片功能,那能简单就简单点。

本贴这个是用来上传头像和个人主页背景图的,用了ajax json,省事儿。
微信截图_20190412191322.png
SIGNATURE
想的简单做的复杂
插件要是能分享出来就好了,dz手机版上次头像老大也研究一下吧,对了,怎样不登陆也能查看用户的帖子呢。

回复主题

已有 8 条回复
您需要登录后才可以回帖 登录 | 注册
高级模式

关于楼主
管理员
帖子
1483
日志
41
精华
19
精华推荐