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 ...
随机推荐
- Spark机器学习读书笔记-CH04
[root@demo1 ch04]# spark-shell --master yarn --jars /root/studio/jblas-1.2.3.jar scala> val rawDa ...
- 使用rem缩放网页的javascript代码
<script type="text/javascript"> (function(doc, win) { var docEl = doc.documentElemen ...
- 同上！ 下拉复选框 点击当前的checkbox 选中后面li 添加到指定区域
(function() { $(".cxbtntj").click(function(){ console.log($("#jsLi1").attr(" ...
- vps推荐之DigitalOcean
作为一个爱折腾的网站”程序猿“,我用过多家vps,由于一般支持paypal 月付, 所以基本上都会用两三个月,不行就换另一家. 1.Yard VPS 台湾人开的,有中文支持,貌似也支持支付宝付款,偶尔 ...
- Pair Project: Elevator Scheduler [电梯调度算法的实现和测试] --11061188刘强
结对编程总结 队员:刘强(11061188) 林谋武(11061169) 结对编程: 结对编程的优点: 1. 两个人合作,相比于一个人自己奋斗而言,更能激发自己的潜能:我们在合作过程中,互相学习,互 ...
- Python的平凡之路（21）
上节内容回顾:1.请求周期url> 路由 > 函数或类 > 返回字符串或者模板语言?Form表单提交: 提交 -> url > 函数或类中的方法 - ... ...
- js之事件冒泡和事件捕获详细介绍
(1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发. IE 5.5: div -> body -> document IE 6.0: div ...
- Android 图片浏览器 从原来位置放大至全屏显示
android 图片浏览器 特点: 1.从网络加载图片,只需要传图片地址数组即可 2.点击图片,从原来位置放大至全屏 3.支持手势操作 4.完全自定义布局 项目源码请到GitHub下载:https:/ ...
- OpenSSL 使用拾遗（一）---- 生成 pkcs12 文件
从本期开始,记录一些在使用 OpenSSL 过程中碰到的问题及解决办法 在 Linux 下需要生成 pkcs12 文件,立即想到 OpenSSL.键入如下命令 ~ # openssl pkcs12 - ...
- centos6.4下面安装postgresql以及客户端远程连接
一.安装 centos6.4服务器IP:192.168.220.131 window7客户端IP:192.168.199.218 在centos官网http://www.postgresql.org/ ...