效果图:
给官方文档的链接:
http://open.web.meitu.com/wiki/
这是yii论坛别人推荐用的头像编辑器,新浪也在用这个。
根据文档的内容一步一步做。
- 设置crossdomain.xml
这个要特别注意,要把这个文件下载下来之后放在根目录,比如 123.132.42.45/crossdomain.xml,要直到你在浏览器能访问到 -
3.
//js
<script src="http://open.web.meitu.com/sources/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%","100%");
//修改为您自己的图片上传接口
xiuxiu.setUploadURL("<?= PRE_FRONTEND_URL ?>center/upload");
xiuxiu.setUploadType(2);
xiuxiu.setUploadDataFieldName("Filedata");
xiuxiu.onInit = function ()
{
xiuxiu.loadPhoto("");//修改为要处理的图片url
}
xiuxiu.onUploadResponse = function (data)
{
// alert("上传响应" + data); 可以开启调试
console.log(data);
if(data == 1) {
if(confirm("头像已经成功保存!") == true){
window.location.href="<?= PRE_FRONTEND_URL ?>center/changephoto";
return true;
}else{
return false;
}
}else{
alert(data);
}
}
}
</script>
//html
<div id="tabContent2">
<div id="altContent"></div>
</div>