photoclip进行图片裁剪上传

最新推荐文章于 2022-08-26 14:48:16 发布

Charles D

最新推荐文章于 2022-08-26 14:48:16 发布

阅读量2.3k

点赞数

分类专栏： TP5 PHP

本文链接：https://blog.youkuaiyun.com/qq_36607076/article/details/87800230

版权

PHP 同时被 2 个专栏收录

45 篇文章

订阅专栏

TP5

30 篇文章

订阅专栏

1.前端html内容如下：

 <!DOCTYPE html>
<html>

<head>
 <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telphone=no,email=no" />


    <link rel="stylesheet" type="text/css" href="../up/css/style.css" />
     <script type="text/javascript">
        var _width = $(window).width();
        var _ziHao = 20 * (_width/320);
        if(_width < 641){
            $("#ben").css({"font-size":_ziHao + "px"})
        }
    </script>
    
<body style="background-color:#000000">
<div id="app" style="background-color: #000000" v-cloak>

    <div class="main">
        <div class="fills">
            <div class="mui-row">
                <section class="logo-license">
                    <div class="half">
                        <a class="logo" id="logox">
                            <img id="bgl" src="../userinfo/black.jpg">
                        </a>
                    </div>
                    <div class="clear"></div>
                </section>
                <article class="htmleaf-container">
                    <div id="clipArea" style="height: 80%;position:static"></div>
                    <div class="foot-use">
                        <div class="uploader1 blue">
                            <input type="button" name="file" class="button" value="选择头像">
                            <input id="file" type="file" accept="image/*" multiple  />
                        </div>
                        <button id="clipBtn">保存头像</button>
                    </div>
                    <div id="view"></div>
                </article>
            </div>


            <div class="fill">
                <div class="fill_name">昵称：</div>
                <div class="fill_val">
                    <input type="text" v-model="name">
                </div>
            </div>
            <div class="fill">
                <div class="fill_name" >性别：</div>
                <div class="fill_val fill_val_select">
                    <div :class="`fill_select ${index === selectSexIndex?'fill_select_active':''}`" v-for="(i,index) in sexLists" @click="selectNav(index)">
                        <div></div>
                        <div>{{i.name}}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="message">
        </div>
        <div style="text-align: center"><button class="btn_sure" @click="submit" :disabled="isdisabledFn">保存</button></div>


    </div>
</div>

</body>

</html>

<script type="text/javascript" src="../lib/js/mui.min.js"></script>
<script type="text/javascript" src="../js/user_head.js"></script>
<script src="../up/scripts/iscroll-zoom.js"></script>
<script src="../up/scripts/hammer.js"></script>
<script src="../up/scripts/jquery.photoClip.js"></script>

<script>
    var obUrl = ''
    $("#clipArea").photoClip({
        width: 300,
        height: 300,
        file: "#file",
        view: "#view",
        ok: "#clipBtn",
        loadStart: function() {
            console.log("照片读取中");
        },
        loadComplete: function() {
            console.log("照片读取完成");
        },
        clipFinish: function(dataURL) {
            console.log(dataURL);//图片路径
            localStorage.setItem('dataUrl',dataURL)
        }
    });
</script>
<script>
    $(function(){
        $("#logox").click(function(){
            $(".htmleaf-container").show();
        })
        $("#clipBtn").click(function(){
            $("#logox").empty();
            $('#logox').append('<img src="' + imgsource + '" align="absmiddle" style=" width: 4rem;height: 4rem;border: 2px solid #cfb070">');
            $(".htmleaf-container").hide();

        })
    });
</script>

2.ajax调用

 //提交
        submit(){
            this.isdisabledFn = true;
            const fromData = new FormData()
            // fromData.append('file', $('#file')[0].files[0]);
            fromData.append('code',this.code)
            fromData.append('nickname',this.name)
            fromData.append('sex',this.sexLists[this.selectSexIndex].value)
            fromData.append('dataUrl',localStorage.getItem('dataUrl'))
            $.ajax({
                type:'POST',
                url:'http://×××××××××××.com/api/userinfo/updateUserInfo',
                processData: false,
                contentType: false,
                data: fromData,
                success:function(re){
                    const data = JSON.parse(re);
                    if (data.success == 0){

                        localStorage.setItem('nickname',data.data.nickname);
                        localStorage.setItem('sex',data.data.sex);
                       const nickname = localStorage.getItem('nickname');
                       const  sex= localStorage.getItem('sex');
                       const  imgurl= data.data.imgurl;
                       console.log(imgurl)       
                    }
                    if (data.success == 1){
                        $('.message').html('保存失败');
                    }

                }
            })
        }

3.接口编写

//修改昵称、头像上传等
    public function updateUserInfo(){
        $res = [];
        $code = trim($this->param['code']);
        $userid = $this->idbycode($code);
        $user = new Us();
        $this->param['userid'] = $userid;
        if($this->param['dataUrl']){
            $base64_dataUrl = $this->param['dataUrl'];
            $path = base64_image_content($base64_dataUrl,'uploads');  //将base64编码字符串文件转图片，并保存到服务器上
            $imgurl = 'http://'.$_SERVER['HTTP_HOST'].$path;
            $this->param['photo'] = $imgurl;
            $res['imgurl']  = $imgurl;
        }
        if($this->param['nickname'] == '请输入昵称') $this->getBackTo('未填写昵称',1);
        $data =  $user->isUpdate(true)->save($this->param);
        if($data){
            $res['nickname']  = $this->param['nickname'];
            $res['userid']  = $this->param['nickname'];
            $res['sex']  = $this->param['sex'];
            $this->getBackTo('获取成功',0,$res);
        }else{
             $this->getBackTo('获取失败',1);
        }

    }

插件地址：https://pan.baidu.com/s/1SzwHtKe_sU2mjWC4_RLNaQ 提取码：t8iw