forgeplus/public/react/src/common/components/Cropper.js

import React, { Component } from 'react';

import { getUrl2, isDev } from 'educoder'
const $ = window.$

let _url_origin = getUrl2()
// let _url_origin = `http://47.96.87.25:48080`;



function save_avatar(){        
        
    // if($(img_lg).html().trim() == ""){            
        // $("#avatar-name").html("请先选择图片上传").css("color", 'red');        
    // } else {            
        // $("#avatar-name").html("").css("color", '#333');    
        const previewId = this.props.previewId
        var img_lg = document.getElementById(previewId || 'img-preview');           
        // 截图小的显示框内的内容          
        window.html2canvas(img_lg).then(function(canvas) {
            // for test
            // document.getElementById('canvasWrap').appendChild(canvas);

            var dataUrl = canvas.toDataURL("image/jpeg");    
            console.log(dataUrl)   
            // TODO upload base64 image data to server
        });  
        return

        // 老版接口：
        // html2canvas(img_lg, {               
        //     allowTaint: true,                
        //     taintTest: false,                
        //     onrendered: function(canvas) {                    
        //         canvas.id = "mycanvas";                    
        //         //生成base64图片数据                    
        //         var dataUrl = canvas.toDataURL("image/jpeg");    
        //         console.log(dataUrl)   

        //         var newImg = document.getElementById("showImg");                    
        //         newImg.src = dataUrl;    
        //         return;   

        //         imagesAjax(dataUrl);                    
        //         $(".avatar-save").attr("disabled","true");                
        //     }            
        // });       
    // }    
}   
/** 
    props 说明：
    imageId 源图片标签的id
    previewId crop后预览dom的id
    imageSrc 源图片src
    width  数字格式
    height 数字格式 
*/ 
class Cropper extends Component {
  state = {
  };

  handleChange = (info) => {
  }

  componentDidMount() {
      this.options = {
        aspectRatio: 1,
        crop(event) {
            // console.log(event.detail.x);
            // console.log(event.detail.y);
            // console.log(event.detail.width);
            // console.log(event.detail.height);
            // console.log(event.detail.rotate);
            // console.log(event.detail.scaleX);
            // console.log(event.detail.scaleY);
        },
        preview: this.props.previewId ? `#${this.props.previewId}` : '.img-preview',
      }

      if (!window.Cropper) {
        $.ajaxSetup({
            cache: true
        });
        const _isDev = isDev()
        let _path = _isDev ? 'public' : 'build'

        $('head').append($('<link rel="stylesheet" type="text/css" />')
            .attr('href', `${_url_origin}/react/${_path}/js/cropper/cropper.min.css`));

        $.getScript(
          `${_url_origin}/react/${_path}/js/cropper/cropper.js`,
          (data, textStatus, jqxhr) => {
          
        });
        $.getScript(
          `${_url_origin}/react/${_path}/js/cropper/html2canvas.min.js`,
          (data, textStatus, jqxhr) => {
          
        });
      }

      setTimeout(() => {
        const image = document.getElementById(this.props.imageId || '__image');
        this.cropper = new window.Cropper(image, this.options);
      }, 1200)
  }
  
  renew = (image) => {
    this.cropper && this.cropper.destroy();
    this.cropper = new window.Cropper(image, this.options);

  }
  render() {
    
    const { width, height, previewId, imageSrc } = this.props;

    return (
      <div>
        {/* This rule is very important, please do not ignore this! */}
        <style>{`
            .wrapper {
                width: ${ width ? (width+'px') : '500px'};
                height: ${ height ? (height+'px') : '500px'};
                border: 1px solid #eee;
            }
            img {
                max-width: 100%; 
            }
            .preview-lg {
                overflow: hidden;
                background-color: #fff;
                border-radius: 50%;
                text-align: center;
            }
        `}</style>
        <div className="wrapper">
            {/* http://localhost:3007/images/footNavLogo.png  图片转了后不对 
                || "/images/testPicture.jpg"
                || "/images/shixun0.jpg"
            */}
            <img id={this.props.imageId || "__image"} src={`${imageSrc }`}></img>
        </div>
        {/* background: 'aquamarine', 
            'border-radius': '128px'
        */}
        {!previewId && <div id="img-preview" className="img-preview preview-lg" style={{width: '128px', height: '128px',  }}>
        </div>}

        {/* <img id="showImg" src="http://localhost:3007/images/testPicture.jpg"></img> */}

        {/* <div id="canvasWrap"></div> */}
        {/* <button onClick={save_avatar.bind(this)}>save </button> */}
      </div>
    );
  }
}

export default  Cropper;


// function aaa () {
//     function showedit_headphoto() {
//         var html = `
//         <script src=\"../head/jquery.min.js\"><\/script>\n
//         <link href=\"../head/cropper.min.css\" rel=\"stylesheet\">\n
//         <link href=\"../head/sitelogo.css\" rel=\"stylesheet\">\n
//         <script src=\"../head/bootstrap.min.js\"><\/script>\n
//         <script src=\"../head/cropper.js\"><\/script>\n
//         <script src=\"../head/sitelogo.js\"><\/script>\n
//         <script src=\"../head/html2canvas.min.js\" type=\"text/javascript\" charset=\"utf-8\"><\/script>\n\n

//         <div class=\"task-popup\" style=\"width: 550px;\">\n  <div class=\"task-popup-title clearfix task-popup-bggrey\">上传头像<\/div>\n  <div class=\"clearfix\">\n    
//         <div class=\"modal fade\" style=\"outline: none;\" id=\"avatar-modal\" aria-hidden=\"true\" aria-labelledby=\"avatar-modal-label\" role=\"dialog\" tabindex=\"-1\">\n      
//         <div class=\"modal-dialog modal-lg\">\n        <div class=\"modal-content\">\n          <form class=\"avatar-form\">\n            <div class=\"modal-body\">\n              
//         <div class=\"padding20\">\n                <div class=\"avatar-upload\">\n                  <input class=\"avatar-src\" name=\"avatar_src\" type=\"hidden\">\n                  
//         <input class=\"avatar-data\" name=\"avatar_data\" type=\"hidden\">\n\n                  <span id=\"avatar-name\"><\/span>\n                  
//         <input class=\"avatar-input\" style=\"display:none;\" id=\"avatarInput\" value=\"avatars/User/116\" name=\"avatar_file\" type=\"file\">\n                  
//         <input type=\"hidden\" id=\"source_id\" value=\"116\"/>\n                  <input type=\"hidden\" id=\"source_type\" value=\"User\"/>\n                <\/div>\n                
//         <div class=\"row clearfix mt20 pl20\">\n                  <div class=\"task-form-45 fl panel-box-sizing uplaodImg\">\n                    
//         <div class=\"avatar-wrapper\" id=\"wrapper_image_show\">\n                      <!--<span style=\"display: block;\">\n                                             选择你要上传的图片<br/>
//         \n                                             仅支持JPG、GIF、PNG，且文件小于2M\n                                           <\/span>-->\n                    <\/div>\n                    
//         <div class=\"row avatar-btns clearfix\">\n                      <a href=\"javascript:void(0);\" class=\"fl\" type=\"button\" onClick=\"$(\'input[id=avatarInput]\').click();\">重新上传<\/a>\n
//                               <!--<div class=\"btn-group\">\n                        <a href=\"javascript:void(0);\" class=\"fa fa-repeat fr mt5 color-grey-9\" data-method=\"rotate\" data-option=\"90\" 
//                               type=\"button\" title=\"Rotate 90 degrees\">\n                          <\/a>\n                      <\/div>-->\n                    <\/div>\n                  <\/div>\n   
//                                              <div class=\"task-form-50 panel-box-sizing fr color-grey pr20\" style=\"width: 128px;\">\n                    <div class=\"edu-txt-center\">\n                     
//                                               <div class=\"avatar-preview preview-lg radius\" id=\"imageHead\">\n                        
//                                               <img alt=\"头像\" height=\"128\" nhname=\"avatar_image\" src=\"/images/avatars/User/116?1556802838\" width=\"128\" />\n                      <\/div>\n  
//                                                                   <span>头像预览<\/span>\n                    <\/div>\n                    
//                                                                   <p class=\"color-grey-9 font-12 mt110 justify\">仅支持JPG、GIF、PNG，且文件小于2M<\/p>\n                  <\/div>\n                <\/div>\n
//                                                                                 <\/div>\n              <div class=\"clearfix edu-txt-center mb20 mt10\">\n                
//                                                                                 <a href=\"javascript:void(0);\" class=\"task-btn mr20\" onclick=\"hideModal()\">取消<\/a>\n               
//                                                                                 <a href=\"javascript:void(0);\" class=\"avatar-save task-btn task-btn-orange\" data-dismiss=\"modal\">确定<\/a>\n              
//                                                                                 <\/div>\n            <\/div>\n          <\/form>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>\n\n<script>\n 
//                                                                                    $(function () {\n        new CropAvatar($(\'#crop-avatar\'), 1/1);\n\n        //---------------------------头像上传-----------------------------//\n        //做个下简易的验证  大小 格式\n        $(\'#avatarInput\').on(\'change\', function(e) {\n            var filemaxsize = 1024 * 5;//5M\n            var target = $(e.target);\n            var Size = target[0].files[0].size / 1024;\n            if(Size > filemaxsize) {\n                alert(\'图片过大，请重新选择!\');\n                $(\".avatar-wrapper\").children().remove;\n                return false;\n            }\n            if(!this.files[0].type.match(/image.*/)) {\n                alert(\'请选择正确的图片!\')\n            } else {\n                /*var filename = document.querySelector(\"#avatar-name\");*/\n                var texts = document.querySelector(\"#avatarInput\").value;\n                var teststr = texts; //你这里的路径写错了\n                testend = teststr.match(/[^\\\\]+\\.[^\\(]+/i); //直接完整文件名的\n                /*filename.innerHTML = testend;\n                $(filename).css(\"color\", \'#333\');*/\n                $(\".avatar-save\").removeClass(\"task-btn-grey\").addClass(\"task-btn-orange\");\n                $(\".avatar-save\").on(\"click\", save_avatar);\n            }\n\n        });\n    });\n\n    function save_avatar(){\n        var img_lg = document.getElementById(\'imageHead\');\n        if($(img_lg).html().trim() == \"\"){\n            $(\"#avatar-name\").html(\"请先选择图片上传\").css(\"color\", \'red\');\n        } else {\n            $(\"#avatar-name\").html(\"\").css(\"color\", \'#333\');\n            // 截图小的显示框内的内容\n            html2canvas(img_lg, {\n                allowTaint: true,\n                taintTest: false,\n                onrendered: function(canvas) {\n                    canvas.id = \"mycanvas\";\n                    //生成base64图片数据\n                    var dataUrl = canvas.toDataURL(\"image/jpeg\");\n                    var newImg = document.createElement(\"img\");\n                    newImg.src = dataUrl;\n                    imagesAjax(dataUrl);\n                    $(\".avatar-save\").attr(\"disabled\",\"true\");\n                }\n            });\n        }\n    }\n\n    function imagesAjax(src) {\n        var data = {};\n        data.img = src;\n        data.source_id = $(\'#source_id\').val();\n        data.source_type = $(\'#source_type\').val();\n        data.is_direct = 0;\n        $.ajax({\n            url: \"/upload_avatar\",\n            beforeSend: function(xhr) {xhr.setRequestHeader(\'X-CSRF-Token\', $(\'meta[name=\"csrf-token\"]\').attr(\'content\'))},\n            data: data,\n            type: \"POST\",\n            success: function (re) {\n                console.log(re);\n                console.log(1562050370);\n                if(re){\n                    var o = JSON.parse(re);\n                    if (o.status !=0 ){\n                        console.log(o.message);\n                    } else {\n                        var imgSpan = $(\"img[nhname=\'avatar_image\']\");\n                        imgSpan.attr({\"src\": o.url + \'?1562050370\'});\n                        $(\"#user_code\").html(o.grade);\n                        notice_box_redirect(\"/users/shitou\", \"上传成功\");\n                    }\n                } else {\n                    notice_box(\"上传出错\");\n                }\n\n            },\n            error: function (e) {\n                alert(e);\n            }\n        });\n    }\n
//                                                                                    <\/script>`;
//         pop_box_new(html, 550, 510);
//         $("#imageHead img").attr({"src": $("#user_avatar_show").attr("src")});
//         $("#wrapper_image_show img").attr({"src": $("#user_avatar_show").attr("src")});

        
//     }

//     $(function () {        
//         new CropAvatar($('#crop-avatar'), 1/1);        
//         //---------------------------头像上传-----------------------------//        
//         //做个下简易的验证  大小 格式        
//         $('#avatarInput').on('change', function(e) {            
//             var filemaxsize = 1024 * 5;//5M            
//             var target = $(e.target);            
//             var Size = target[0].files[0].size / 1024;            
//             if(Size > filemaxsize) {                
//                 alert('图片过大，请重新选择!');                
//                 $(".avatar-wrapper").children().remove;                
//                 return false;            
//             }            
//             if(!this.files[0].type.match(/image.*/)) {                
//                 alert('请选择正确的图片!')            
//             } else {                
//                 /*var filename = document.querySelector("#avatar-name");*/                
//                 var texts = document.querySelector("#avatarInput").value;                
//                 var teststr = texts; //你这里的路径写错了                
//                 testend = teststr.match(/[^\\\\]+\\.[^\\(]+/i); //直接完整文件名的                
//                 /*filename.innerHTML = testend;                $(filename).css("color", '#333');*/                
//                 $(".avatar-save").removeClass("task-btn-grey").addClass("task-btn-orange");                
//                 $(".avatar-save").on("click", save_avatar);            
//             }        
//         });    
//     });    
//     function save_avatar(){        
//         var img_lg = document.getElementById('imageHead');        
//         if($(img_lg).html().trim() == ""){            
//             $("#avatar-name").html("请先选择图片上传").css("color", 'red');        
//         } else {            
//             $("#avatar-name").html("").css("color", '#333');           
//             // 截图小的显示框内的内容            
//             html2canvas(img_lg, {               
//                 allowTaint: true,                
//                 taintTest: false,                
//                 onrendered: function(canvas) {                    
//                     canvas.id = "mycanvas";                    
//                     //生成base64图片数据                    
//                     var dataUrl = canvas.toDataURL("image/jpeg");                    
//                     var newImg = document.createElement("img");                    
//                     newImg.src = dataUrl;                    
//                     imagesAjax(dataUrl);                    
//                     $(".avatar-save").attr("disabled","true");                
//                 }            
//             });       
//         }    
//     }    
//     function imagesAjax(src) {        
//         var data = {};        
//         data.img = src;        
//         data.source_id = $('#source_id').val();        
//         data.source_type = $('#source_type').val();        
//         data.is_direct = 0;        
//         $.ajax({            
//             url: "/upload_avatar",            
//             beforeSend: function(xhr) {
//                 xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content'))
//             },            
//             data: data,            
//             type: "POST",            
//             success: function (re) {                
//                 console.log(re);                
//                 // console.log(1562050370);                
//                 if(re){                    
//                     var o = JSON.parse(re);                    
//                     if (o.status !=0 ){                        
//                         console.log(o.message);                    
//                     } else {                        
//                         var imgSpan = $("img[nhname='avatar_image']");                        
//                         imgSpan.attr({"src": o.url + '?1562050370'});                        
//                         $("#user_code").html(o.grade);                        
//                         notice_box_redirect("/users/shitou", "上传成功");                    
//                     }                
//                 } else {                    
//                     notice_box("上传出错");                
//                 }            
//             },            
//             error: function (e) {                
//                 alert(e);            
//             }        
//         });    
//     }


// }