228查看/2回复/收藏

admin

2019-4-10 21:32:13

1#
  1. <link href="/staticfile/cropper/cropper.min.css" rel="stylesheet">
  2. <script src="/staticfile/cropper/cropper.min.js" type="text/javascript" charset="utf-8"></script>
  3. <link href="/staticfile/cropper/sitelogo.css" rel="stylesheet">
  4. <script src="/staticfile/cropper/sitelogo.js" type="text/javascript" charset="utf-8"></script>
  5. <script src="/staticfile/cropper/html2canvas.min.js" type="text/javascript" charset="utf-8"></script>
复制代码
  1. <div class="modal fade" id="avatar-modal" aria-hidden="true" aria-labelledby="avatar-modal-label" role="dialog" tabindex="-1">
  2.         <div class="modal-dialog modal-lg">
  3.                 <div class="modal-content">
  4.                         <form class="avatar-form">
  5.                                 <div class="modal-header">
  6.                                         <h4 class="modal-title" id="avatar-modal-label">上传图片</h4>
  7.                                         <button class="close" data-dismiss="modal" type="button">×</button>
  8.                                 </div>
  9.                                 <div class="modal-body">
  10.                                         <div class="avatar-body">
  11.                                                 <div class="avatar-upload d-flex align-items-center">
  12.                                                         <input class="avatar-src" name="avatar_src" type="hidden">
  13.                                                         <input class="avatar-data" name="avatar_data" type="hidden">
  14.                                                         <button class="btn btn-primary mr-3" type="button" style="height: 35px;" onClick="jQuery('input[id=avatarInput]').click();">请选择图片</button>
  15.                                                         <span id="avatar-name" class="text-md"></span>
  16.                                                         <input class="avatar-input d-none" id="avatarInput" name="avatar_file" type="file">
  17.                                                 </div>
  18.                                                 <div class="row">
  19.                                                         <div class="col-md-9">
  20.                                                                 <div class="avatar-wrapper"></div>
  21.                                                         </div>
  22.                                                         <div class="col-md-3 pl-0">
  23.                                                                 <div class="avatar-preview preview-lg" id="imageHead"></div>
  24.                                                                 <div class="avatar-preview preview-md"></div>
  25.                                                                 <div class="avatar-preview preview-sm"></div>
  26.                                                         </div>
  27.                                                 </div>
  28.                                                 <div class="row avatar-btns">
  29.                                                         <div class="col-md-4">
  30.                                                                 <div class="btn-group">
  31.                                                                         <button class="btn btn-primary fa fa-undo" data-method="rotate" data-option="-90" type="button" title="Rotate -90 degrees"> 向左旋转</button>
  32.                                                                 </div>
  33.                                                                 <div class="btn-group">
  34.                                                                         <button class="btn  btn-primary fa fa-repeat" data-method="rotate" data-option="90" type="button" title="Rotate 90 degrees"> 向右旋转</button>
  35.                                                                 </div>
  36.                                                         </div>
  37.                                                         <div class="col-md-5" style="text-align: right;">                                                               
  38.                                                                 <button class="btn btn-primary fa fa-arrows" data-method="setDragMode" data-option="move" type="button" title="移动">
  39.                                                                 <span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="$().cropper("setDragMode", "move")"></span>
  40.                                                           </button>
  41.                                                           <button type="button" class="btn btn-primary fa fa-search-plus" data-method="zoom" data-option="0.1" title="放大图片">
  42.                                                                 <span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="$().cropper("zoom", 0.1)"></span>
  43.                                                           </button>
  44.                                                           <button type="button" class="btn btn-primary fa fa-search-minus" data-method="zoom" data-option="-0.1" title="缩小图片">
  45.                                                                 <span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="$().cropper("zoom", -0.1)"></span>
  46.                                                           </button>
  47.                                                           <button type="button" class="btn btn-primary fa fa-refresh" data-method="reset" title="重置图片">
  48.                                                                         <span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="$().cropper("reset")" aria-describedby="tooltip866214"></span>
  49.                                                           </button>
  50.                                                         </div>
  51.                                                         <div class="col-md-3">
  52.                                                                 <button class="btn btn-danger btn-block avatar-save fa fa-save" type="button" data-dismiss="modal"> 保存修改</button>
  53.                                                         </div>
  54.                                                 </div>
  55.                                         </div>
  56.                                 </div>
  57.                         </form>
  58.                 </div>
  59.         </div>
  60. </div>
  61. <div class="loading" aria-label="Loading" role="img" tabindex="-1"></div>
复制代码
  1. <script type="text/javascript">
  2.         jQuery('#avatarInput').on('change', function(e) {
  3.                 var filemaxsize = 200;//200K
  4.                 var target = jQuery(e.target);
  5.                 var Size = target[0].files[0].size / 1024;
  6.                 if(Size > filemaxsize) {
  7.                         alert('图片过大,请重新选择!');
  8.                         jQuery(".avatar-wrapper").childre().remove;
  9.                         return false;
  10.                 }
  11.                 if(!this.files[0].type.match(/image.*/)) {
  12.                         alert('请选择正确的图片!')
  13.                 } else {
  14.                         var filename = document.querySelector("#avatar-name");
  15.                         var texts = document.querySelector("#avatarInput").value;
  16.                         var teststr = texts;
  17.                         testend = teststr.match(/[^\\]+\.[^\(]+/i);
  18.                         filename.innerHTML = testend;
  19.                 }
  20.         });
  21.         jQuery(".avatar-save").on("click", function() {
  22.                 var img_lg = document.getElementById('imageHead');
  23.                 html2canvas(img_lg, {
  24.                         allowTaint: true,
  25.                         taintTest: false,
  26.                         onrendered: function(canvas) {
  27.                                 canvas.id = "mycanvas";
  28.                                 var dataUrl = canvas.toDataURL("image/jpeg");
  29.                                 var newImg = document.createElement("img");
  30.                                 newImg.src = dataUrl;
  31.                                 imagesAjax(dataUrl)
  32.                         }
  33.                 });
  34.         })
  35.         function imagesAjax(src) {
  36.                 var data = {};
  37.                 data.img = src;
  38.                 data.jid = jQuery('#jid').val();
  39.                 jQuery.ajax({
  40.                         url: "/people/misc/{$_GET['rid']}.html?type=avatar",
  41.                         data: data,
  42.                         type: "POST",
  43.                         dataType: 'json',
  44.                         success: function(re) {
  45.                                 if(re.status == '1') {
  46.                                         jQuery('.avatar-view img').attr('src',src );
  47.                                 }else{
  48.                                         toastr.error('User Error!');
  49.                                 }
  50.                         }
  51.                 });
  52.         }
  53. </script>
复制代码
  1. $filepath = DISCUZ_ROOT."/uploads/people/".$people['uid']."/";
  2. $filename = "avatar.jpg";
  3. if(!is_dir($filepath))mkdir($filepath,0755,TRUE);
  4. header('Content-type:application/json;charset=utf-8');
  5. $imgstr = $_POST['img'];
  6. $imgdata = substr($imgstr,strpos($imgstr,",") + 1);
  7. $decodedData = base64_decode($imgdata);
  8. file_put_contents($filepath.$filename,$decodedData);
  9. //@unlink(DISCUZ_ROOT."/uploads/people/".$people['uid']."/avatar_50_50.png");
  10. //imageResize($newpath,50,50);
  11. $array = array(
  12.         'status'=>'1',
  13. );
  14. echo jsonFormat($array);
复制代码



转载请注明出处。
2 回帖

何日君再来

2019-4-15 17:52:18

3#
支持触屏版吧,dz上传头像是硬伤
您需要登录后才可以回帖 登录 | 注册
高级模式