思路：

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/

thinkphp + 美图秀秀api 实现图片裁切上传，带数据库的更多相关文章

  1. 美图秀秀api实现图片的裁剪及美化

    美图秀秀不仅有PC版.手机版等客户端的软件,还有Web开方接口,可以在web页面上调用美图秀秀的api接口,实现图片的编辑.像淘宝.网易.qq空间.新浪微博等大厂都使用过该接口. 官网地址:http: ...

  2. iOS 图片部分模糊，类似于美图秀秀

    代码地址如下:http://www.demodashi.com/demo/14277.html 演示效果 演示效果 代码结构 项目结构截图如下: 该模块的核心源码部分为 MBPartBlurView, ...

  3. iOS开发系列--打造自己的“美图秀秀”

    --绘图与滤镜全面解析 概述 在iOS中可以很容易的开发出绚丽的界面效果,一方面得益于成功系统的设计,另一方面得益于它强大的开发框架.今天我们将围绕iOS中两大图形.图像绘图框架进行介绍:Quartz ...

  4. iOS开发系列--打造自己的“美图秀秀”

    概述 在iOS中可以很容易的开发出绚丽的界面效果,一方面得益于成功系统的设计,另一方面得益于它强大的开发框架.今天我们将围绕iOS中两大图形.图像绘图框架进行介绍:Quartz 2D绘制2D图形和Co ...

  5. 美图秀秀DBA谈MySQL运维及优化

    美图秀秀DBA谈MySQL运维及优化 https://mp.weixin.qq.com/s?__biz=MzI4NTA1MDEwNg==&mid=401797597&idx=2& ...

  6. 强大的Core Image(教你做自己的美图秀秀))

    iOS5新特性:强大的Core Image(教你做自己的美图秀秀))       iOS5给我们带来了很多很好很强大的功能和API.Core Image就是其中之一,它使我们很容易就能处理图片的各种效 ...

  7. iOS：iOS开发系列–打造自己的“美图秀秀”(下)

    来源: KenshinCui 链接:http://www.cnblogs.com/kenshincui/p/3959951.html 运行效果: 其他图形上下文 前面我们也说过,Quartz 2D的图 ...

  8. 美图秀秀 web开发图片编辑器

    美图秀秀web开发平台 http://open.web.meitu.com/wiki/ 1.环境配置 1.1.设置crossdomain.xml 下载crossdomain.xml文件,把解压出来的c ...

  9. PHP流式上传和表单上传（美图秀秀）

    最近需要开发一个头像上传的功能,找了很多都需要授权的,后来找到了美图秀秀,功能非常好用. <?php /** * Note:for octet-stream upload * 这个是流式上传PH ...

随机推荐

  1. NET出现频率非常高的笔试题

    又到了金三银四的跳槽季,许多朋友又开始跳槽了,这里我简单整理了一些出现频率比较高的.NET笔试题,希望对广大求职者有所帮助. 一..net基础 1.  a=10,b=15,请在不使用第三方变量的情况下 ...

  2. android 开发中 添加库文件 和so 文件的存放位置和添加依赖

    so文件一般存储在  main 当中  jniLibs 当中 然后在build.gradle中添加 sourceSets { main { jniLibs.srcDirs = ['src/main/j ...

  3. 灰常好的开源项目[c/c++]

    ClibPDF http://cosoft.net.cn http://www2s.biglobe.ne.jp/~Nori/ruby/dist/ClibPDF-ALPHA-20010519.tar.g ...

  4. JAVA多线程超时加载当网页图片

    先上图: 这一次没有采取正则匹配,而采取了最简单的java分割和替代方法进行筛选图片 它能够筛选如下的图片并保存到指定的文件夹 如: “http://xxxx/xxxx/xxx.jpg” 'http: ...

  5. CSS3的透明度使用

    大家在敲代码的时候总会遇见一个问题.就是透明度opacity 会导致整个元素内全部都会改变,通常的方法是在同级元素后面再加上一个元素标签,但是现在有CSS3 ,我们完全不用这么做了.看代码 <! ...

  6. 小型资源管理器，IO操作，读取和写入文件和目录的常用操作

    解决方案: 小总结: 用IO流,的file,DirectoryInfo的方法绑定Treeview控件上和删除,读取, 可以熟练掌握一下IO流 主页面: private void Form1_Load( ...

  7. 通过本地IIS服务器+路由器==实现本地局域网WIFI覆盖

    这是一张手机连接wifi局域网下载视频的图片,速度可以达到10M/S左右,下面让我们来看一下,本地服务器是如何建立的. 1.启动本地IIS服务 步骤如下 一.电脑右键-属性-控制面板-程序和功能-打开 ...

  8. D3的参考样例

    官网进去就可以看到很多样例了.但是最喜欢的是mbostock的http://bl.ocks.org 然后其它的也有一些: 看上去很酷--http://www.visualcinnamon.com/po ...

  9. MeshDog

    一.TransforMesh 1. CGAL (http://www.cgal.org/download/windows.html#GeneralPrerequisites) 预装软件 1.1 cma ...

  10. [驱动开发] struct _LDR_DATA_TABLE_ENTRY

    @Windows XP Professional Service Pack 3 (x86) (5.1, Build 2600) lkd> dt -b _LDR_DATA_TABLE_ENTRY ...