思路:

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开发系列--打造自己的&ldquo;美图秀秀&rdquo;

    --绘图与滤镜全面解析 概述 在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. PHP流式上传和表单上传(美图秀秀)

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

  9. 利用Photos 框架搭建美图秀秀相册选择器

    简介:Photos框架是iOS8.0后推出的一个新的用于对系统相册进行相关操作的,在iOS8.0之前,开发中只能使用AssetsLibrary框架来访问移动设备的图片库.本文中不再对AssetsLib ...

随机推荐

  1. 类EF框架Chloe.ORM升级:只为更完美

    扯淡 Chloe.ORM:一款轻量.高效的.NET C#数据库访问框架(ORM).查询接口借鉴 Linq(但不支持 Linq).借助 lambda 表达式,可以完全用面向对象的方式就能轻松执行多表连接 ...

  2. axure复用-自定义组件,母版(模板)

    组件(控件)是用于设计线框图的用户界面元素.在组件(控件)面板中包含有常用的控件库,如按钮.图片.文本框等.从组件面板中拖动一个控件到线框图区域中,就可以添加一个组件.组件可以从一个线框图中被拷贝(C ...

  3. [Everyday Mathematic]20150216

    设 $A,B,C$ 是同阶方阵, 试证: $$\bex (A-B)C=BA^{-1}\ra C(A-B)=A^{-1}B. \eex$$

  4. 使用Eclipse调试Android Native Application---cocos2d-x + Eclipse + Android + ndk

    纠结很多天的ndk 调试, 终于在 mac  下面顺利完成(注意在windows还是没弄成功,蛋疼...) 调试方法: 1:先google, ndk demo .  把ndk 最基本的hellword ...

  5. powerdesigner设置唯一键,但不是主键的方式

    [转载]http://blog.csdn.net/cnham/article/details/6676650 唯一约束 唯一约束与创建唯一索引基本上是一回事,因为在创建唯一约束的时候,系统会创建对应的 ...

  6. Servlet的PrintWriter out = response.getWriter()使用

    一直以来,只知道out可以向客户端浏览器页面输入数据(html.txt等类型),今天在和php程序联调时发现自己的理解出现了偏差. out是输出字符流,即servlet接受到request请求后,se ...

  7. Oracle 序列的应用

    Oracle创建序列,删除序列,得到序列 序列的创建 create sequence seq_newsId increment by 1 start with 1 maxvalue 999999999 ...

  8. windows内存管理方式以及优缺点

    Windows内存管理方式:页式管理,段式管理,段页式管理 页式管理 将各进程的虚拟空间(逻辑地址)划分为若干个长度相等的页,业内管理把内存空间(物理内存)按照页的大小划分为片或者页面,从而实现了离散 ...

  9. 运行SPL Streams debugger(sdb)的两种方法

    You can use the SPL Streams Debugger in InfoSphere® Streams Studio to help you debug your SPL applic ...

  10. 用 Python 撸一个区块链

    本文翻译自 Daniel van Flymen 的文章 Learn Blockchains by Building One 略有删改.原文地址:https://hackernoon.com/learn ...