<!DOCTYPE html>
<html>
<head>
<title>美图WEB开放平台</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/xiuxiu.css" />
<script type="text/javascript" src="plugin/jquery/jquery-1.11.1.js"></script>
<script src="http://open.web.meitu.com/sources/xiuxiu.js" type="text/javascript"></script>
<script type="text/javascript" src="js/xiuxiu.js"></script>
</head>
<body>
<div class="xiuxiuUploadImg">
<div id="xiuxiuFlashBox"></div>
</div>
</body>
</html>
xiuxiu.css文件
/*@charset "UTF-8";*/
.xiuxiuUploadImg { width:600px; height:400px; padding:1px; border:1px solid #666; background:#666; margin:5px }
xiuxiu.js文件
$(function(){
//自定义函数
function xiuxiuUploadImg(xiuxiuFlashBox,editorType,uploadUrl,uploadType,uploadDataFieldName,defaultImgUrl,cropPresets){
//设置裁剪的比例或尺寸,请在xiuxiu.embedSWF之前调用此函数,否则无法生效。
xiuxiu.setLaunchVars("cropPresets", cropPresets);
/*第1个参数是加载编辑器div容器,第2个参数是编辑器类型,第3个参数是div容器宽,第4个参数是div容器高*/
xiuxiu.embedSWF(xiuxiuFlashBox,editorType,"100%","100%");
//设置上传路径
xiuxiu.setUploadURL(uploadUrl);
//设置上传方式
xiuxiu.setUploadType(uploadType);
//设置html<input type="file" name="Filedata" id="file" />中的name
xiuxiu.setUploadDataFieldName(uploadDataFieldName);
//设置默认图片
xiuxiu.onInit = function(){
xiuxiu.loadPhoto(defaultImgUrl);
}
//处理服务器响应
xiuxiu.onUploadResponse = function(data){
uploadResponseResult(data);
}
}
//用户设置美图秀秀的参数
//容器ID
var xiuxiuFlashBox = "xiuxiuFlashBox";
//要嵌入的编辑器类型(1为轻量编辑,2为轻量拼图,3为完整版,5为头像编辑器,默认值1)
var editorType = 5;
//裁剪的比例或尺寸
var cropPresets = "1000:618";
//上传路径
var uploadUrl = "http://web.upload.meitu.com/image_upload.php";
//上传方式
var uploadType = 2;
//对应于设置html<input type="file" name="upload_file" id="file" />中的name
var uploadDataFieldName = "upload_file";
//默认图片路径
var defaultImgUrl = "http://open.web.meitu.com/sources/images/1.jpg";
//处理服务器的响应
function uploadResponseResult(data){
var json = $.parseJSON(data);
var img = '<img src="'+json.original_pic+'" alt="alt图片" />';
//$(".xiuxiuUploadImg").css({"width":"auto","height":"auto"}).html(img);
$("body").html(img);
}
//调用自定义美图秀秀函数
xiuxiuUploadImg(xiuxiuFlashBox,editorType,uploadUrl,uploadType,uploadDataFieldName,defaultImgUrl,cropPresets);
});
保存后的效果