思路:

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. 从新 开始学习java

    今天备受打击了,群里 发一个段 招租的代码.挺火的,一时没想出来.就亲测了一遍.做了两遍才看出来原因,对此感觉基础不扎实,从新学习,当做复习. 群里传的代码 亲测,代码. 了解缘由. package ...

  2. Volley之 JsonRequest 解析JSON 数据

    ReqestQueue 和 JsonRequest String jsonUrl = "http://ip.taobao.com/service/getIpInfo.php?ip=63.22 ...

  3. MindManager使用说明

    MindManager是一款很好实现思维导图的软件,唯一有些遗憾的是它并不是免费的,而且价格还不菲. 初识MindManager 正确安装好MindManager之后,打开软件,会发现MindMana ...

  4. RBAC类的方法

    rbac类的 方法 authenticate($map,$model='')方法 传入查询用户的条件和用户表的MODEL 返回数组包含用户的信息 saveAccessList($authId=null ...

  5. 【转】Linux下如何清除系统日志

    使用过Windows的人都知道,在使用windows系统的过程中系统会变得越来越慢.而对于Windows下饱受诟病的各种垃圾文件都需要自己想办法删除,不然系统将会变得越来越大,越来越迟钝!window ...

  6. C# 水印透明度图片

    /// <summary> /// 在一张图片的指定位置处加入一张具有水印效果的图片 /// </summary> /// <param name="Sourc ...

  7. 拓扑排序&&欧拉(回)路

    摘要:最近是不适合写代码么?忘记初始化wa到死<_=_=_>.唔--最近在学习图论,从基础搞起,先搞了拓扑排序和欧拉(回)路. Part 0. 拓扑排序 ==挖坑== Part 1. 欧拉 ...

  8. C#为什么不采用多继承:

    C#为什么不采用多继承: 1.继承从来未被广泛使用. 2.多继承带来的问题往往多于其解决的问题. 3.多继承会引起潜在的歧义. C#核心编程

  9. GCHandler的使用

    众所周知,我们在使用c#托管代码时,内存地址和GC回收那不是我们关心的,CLR已经给我们暗箱操作. 但是如果我们在c#中调用了一个非托管代码,比如vc的DLL,而且他有个回调函数,需要引用c#中的某个 ...

  10. Android添加代码检查权限

    1,首先创建一个项目,然后创建一个类,hello.java public class hello { public static final String PERMISSION_SAY_HELLO = ...