thinkphp + 美图秀秀api 实现图片裁切上传，带数据库

时间：2021-05-30 08:31:20

思路：

1.数据库 创建test2 创建表img，字段id，url，addtime

2.前台页：

　　1>我用的是bootstrap 引入必要的js，css

　　2>引入美图秀秀的js

3.后台：图片上传

直接上代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>thinkphp+美图接口，实现图片上传+裁切</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="__PUBLIC__/js/jquery.min.js"></script>
    <script type="text/javascript" src="__PUBLIC__/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/css/bootstrap.css"></head>
    <style type="text/css">
    html, body { height:100%; overflow:hidden; }
    body { margin:0; }
</style>
<body>
    <div class="container">
        <div class="panel">
            <a rowspan="3" class="text-center" data-toggle="modal" data-target="#head">
                <notempty name="info">
                    <img id="img" src="{$info.url}" width="150px" class="img-rounded" />
                    <else/> <i class="glyphicon glyphicon-user" style="color:#6E6E6E; font-size:150px;"></i>
                </notempty>
            </a>
    </div>
</div>

<div class="modal fade" id="head" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <style>.modal-body object{ position:relative;}</style>
            <div class="modal-body">
                <div class="clearfix" style="position:absolute; width:100%; left:0px; right:0px;" >
                    <div id="altContent"></div>
                </div>
                <script src="__PUBLIC__/js/xiuxiu.js" type="text/javascript"></script>
                <script type="text/javascript">
                    window.onload=function(){
                           /*第1个参数是加载编辑器div容器，第2个参数是编辑器类型，第3个参数是div容器宽，第4个参数是div容器高*/
                        xiuxiu.embedSWF("altContent",5,"100%","400px",'headeditor');
                           //修改为您自己的图片上传接口
                        xiuxiu.setUploadURL("{:C('URL')}/index.php/Home/Upload/uploadImg.html");
                            xiuxiu.setUploadType(2);
                            //xiuxiu.setUploadDataFieldName("upload_file");
                        xiuxiu.onInit = function ()
                        {
                            xiuxiu.loadPhoto("{:C('URL')}{$info.url}");
                        }
                        xiuxiu.onBeforeUpload = function (data, id)
                        {
                          var size = data.size;
                          if(size > 2 * 1024 * 1024)
                          { 
                            alert("图片不能超过2M"); 
                            return false; 
                          }
                          return true; 
                        }
                        xiuxiu.onUploadResponse = function (data)
                        {
                            //data=JSON.parse(data);
                            setTimeout(function(){
                                window.location.reload();
                            },1000);
                            //alert("上传响应" + data);  //可以开启调试
                        }
                        // 调试
                        /*xiuxiu.onDebug = function (data)
                        {
                            alert("错误响应" + data);
                        }*/
                    }
        </script>
            </div>
        </div>
    </div>
</div>

</body>
</html>

uploadcontroller.class.php

<?php
namespace Home\Controller;
use Think\Controller;
/**
* 图片上传
*/
class UploadController extends Controller
{
    // 图片上传
    public function uploadImg()
    {

        $upload = new \Think\Upload();// 实例化上传类
        $upload->maxSize   =     3145728 ;// 设置附件上传大小
        $upload->exts      =     array('jpg', 'gif', 'png', 'jpeg');// 设置附件上传类型
        $upload->rootPath  =      './image/'; // 设置附件上传目录
        //$upload->savePath  =      'img/'; // 设置附件上传目录
            // 上传文件
        $info   =   $upload->upload();
        if(!$info) {// 上传错误提示错误信息
        $this->error($upload->getError());
        }else{// 上传成功
            $where = array('id'=>1);
            foreach ($info as $file) {
                $savename = $upload->rootPath.$file['savepath'].$file['savename'];
                $msg = M('Img')->where($where)->find();
                if ($msg) {
                    $res = M('Img')->where($where)->setField('url',$savename);
                }else{
                    $data = array(
                        'id'      => 1,
                        'url'     => $savename,
                        'addtime' => time()
                        );
                    $res = M('Img')->add($data);
                }
                $this->ajaxReturn(array('img'=>$savename,'status'=>1));
            }
        }
    }

}

?>

下载完整demo，带数据库sql文件

 

美图秀秀的详细开发文档：http://open.web.meitu.com/wiki/

标签：

相关文章