thinkphp + 美图秀秀api 实现图片裁切上传，带数据库
思路：
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">×</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 实现图片裁切上传，带数据库的更多相关文章
- 美图秀秀api实现图片的裁剪及美化
美图秀秀不仅有PC版.手机版等客户端的软件,还有Web开方接口,可以在web页面上调用美图秀秀的api接口,实现图片的编辑.像淘宝.网易.qq空间.新浪微博等大厂都使用过该接口. 官网地址:http: ...
- iOS 图片部分模糊，类似于美图秀秀
代码地址如下:http://www.demodashi.com/demo/14277.html 演示效果 演示效果 代码结构 项目结构截图如下: 该模块的核心源码部分为 MBPartBlurView, ...
- iOS开发系列--打造自己的“美图秀秀”
--绘图与滤镜全面解析 概述 在iOS中可以很容易的开发出绚丽的界面效果,一方面得益于成功系统的设计,另一方面得益于它强大的开发框架.今天我们将围绕iOS中两大图形.图像绘图框架进行介绍:Quartz ...
- iOS开发系列--打造自己的“美图秀秀”
概述 在iOS中可以很容易的开发出绚丽的界面效果,一方面得益于成功系统的设计,另一方面得益于它强大的开发框架.今天我们将围绕iOS中两大图形.图像绘图框架进行介绍:Quartz 2D绘制2D图形和Co ...
- 美图秀秀DBA谈MySQL运维及优化
美图秀秀DBA谈MySQL运维及优化 https://mp.weixin.qq.com/s?__biz=MzI4NTA1MDEwNg==&mid=401797597&idx=2& ...
- 强大的Core Image(教你做自己的美图秀秀))
iOS5新特性:强大的Core Image(教你做自己的美图秀秀)) iOS5给我们带来了很多很好很强大的功能和API.Core Image就是其中之一,它使我们很容易就能处理图片的各种效 ...
- iOS：iOS开发系列–打造自己的“美图秀秀”(下)
来源: KenshinCui 链接:http://www.cnblogs.com/kenshincui/p/3959951.html 运行效果: 其他图形上下文 前面我们也说过,Quartz 2D的图 ...
- 美图秀秀 web开发图片编辑器
美图秀秀web开发平台 http://open.web.meitu.com/wiki/ 1.环境配置 1.1.设置crossdomain.xml 下载crossdomain.xml文件,把解压出来的c ...
- PHP流式上传和表单上传（美图秀秀）
最近需要开发一个头像上传的功能,找了很多都需要授权的,后来找到了美图秀秀,功能非常好用. <?php /** * Note:for octet-stream upload * 这个是流式上传PH ...
随机推荐
- storyboard简单认识
## storyboard文件的认识 - 作用:描述软件界面 - 程序启动的简单过程 - 程序一启动,就会加载`Main.storyboard`文件 - 会创建箭头所指的控制器,并且显示控制器所管理的 ...
- one recursive approach for 3, hdu 1016 (with an improved version) , permutations, N-Queens puzzle 分类： hdoj 2015-07-19 16:49 86人阅读 评论(0) 收藏
one recursive approach to solve hdu 1016, list all permutations, solve N-Queens puzzle. reference: t ...
- glibc与MSVC CRT（转载）
glibc与MSVC CRT 运行库是平台相关的,因为它与操作系统结合得非常紧密.C语言的运行库从某种程度上来讲是C语言的程序和不同操作系统平台之间的抽象层,它将不同的操作系统API抽象成相同的库函数 ...
- DotNetBar for Windows Forms 12.5.0.2_冰河之刃重打包版原创发布-带官方示例程序版
关于 DotNetBar for Windows Forms 12.5.0.2_冰河之刃重打包版 --------------------11.8.0.8_冰河之刃重打包版-------------- ...
- 灰常好的开源项目[c/c++]
ClibPDF http://cosoft.net.cn http://www2s.biglobe.ne.jp/~Nori/ruby/dist/ClibPDF-ALPHA-20010519.tar.g ...
- C++ 之 class 的思考
工作多年,突然发现c++这么多年都是零散记录了些自己对C++的反思,没有做过任何的文字记录表示遗憾. 看到很多小伙也都在写技术博客,那我自己也就写一写自己的一些 思考吧! C++的基本类这个东西,想必 ...
- CSS布局学习笔记之position
CSS知识点 之 position布局 前段时间被同学怂恿,参加了百度前端技术学院的一个小培训,第一个阶段下来学到不少东西.课程的第一个阶段主要是HTML5 和 CSS 基础知识的一个小培训,给出的一 ...
- spring注解 @Transactional
一.@Transactional所需要的jar包 1.aopalliance.jar 这个包是AOP联盟的API包,里面包含了针对面向切面的接口.(通常Spring等其它具备动态织入功能的框架依赖此 ...
- .net core 学习笔记（4）-ViewComponent
动态菜单,以前用的是Html.Action(url)来获取的,到了 .net core 中忽然发现没有了这个方法,原来在 .net core 中是提供了个 ViewComponent,有点类似以前的用 ...
- Eclipse使用指定JDK,无需配置Path变量
修改Eclipse安装目录下的eclipse.ini配置文件 将下面内容添加到文件的首部 -vmF:/Lunatic/IDE/JDK/jdk1.7.0_67/jdk1.7.0_67/bin/javaw ...