页面特效 UI组件库 菜单导航 窗口特效 幻灯片滑动 图像相册 表单 选项卡 表格 评分星级 手风琴 文本链接 布局 日历 颜色选择器 按钮 图表 html5 提示 ExtJS 在线客服 其他特效 地图 树形控件 移动开发 BootStrap 滑动条 文件上传 表单验证 分页 播放器 Angular

富头像上传编辑器-fullavatareditor

文件上传 表单 HTML我帮您 1年前  次浏览
富头像上传编辑器是一款支持本地上传、预览、视频拍照和网络加载的flash头像编辑上传插件,可缩放、裁剪、旋转、定位和调色等... 富头像上传编辑器-fullavatareditor 小巧的身材:文件大小仅仅只有 48 KB,而新浪的头像编辑器组件有 58.1 KB,更有甚者达 80 KB 之多。 漂亮的外观:灰色系的外观设计,适用于所有风格的站点。还可轻松地实现换肤。 强大的功能:原图支持本地上传、视频拍照和网络加载,图片编辑有缩放、裁剪、旋转、定位和调色等功能。 丰富的接口:可自定义头像(大小、数目...)、所有文本(包括其字体,大小,颜色,方便扩展多语言站点)、可在外部接口中定义选项卡、按钮... 跨平台兼容:运行环境Flash Player 10.1+,任何浏览器 IE All、Firefox、 Chrome、Opera...都正常使用。 极致的体验:人性化的设计方式,细节上精心的处理,用户使用起来得心应手。
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>Simple demo</title>
        <script type="text/javascript" src="/scripts/swfobject.js"></script>
        <script type="text/javascript" src="/scripts/fullAvatarEditor.js"></script>
    </head>
    <body>
        <div style="width:800px;margin: 0 auto;">
            <h1 style="text-align:center">富头像上传编辑器演示</h1>
            <div>
                <p id="swfContainer">
                    本组件需要安装Flash Player后才可使用,请从
                    <a href="http://www.adobe.com/go/getflashplayer">这里</a>
                    下载安装。
                </p>
            </div>
            <button type="button" id="upload">自定义上传按钮</button>
        </div>
        <script type="text/javascript">
            swfobject.addDomLoadEvent(function () {
                var swf = new fullAvatarEditor("fullAvatarEditor.swf", "expressInstall.swf", "swfContainer", {
                        id : "swf",
                        upload_url : "/upload.php?userid=999&username=looselive",
                        method : "post",
                        src_url : "/samplePictures/Default.jpg",
                        src_upload : 2
                    }, function (msg) {
                        switch(msg.code)
                        {
                            case 1 : alert("页面成功加载了组件!");break;
                            case 2 : alert("已成功加载图片到编辑面板。");break;
                            case 3 :
                                if(msg.type == 0)
                                {
                                    alert("摄像头已准备就绪且用户已允许使用。");
                                }
                                else if(msg.type == 1)
                                {
                                    alert("摄像头已准备就绪但用户未允许使用!");
                                }
                                else
                                {
                                    alert("摄像头被占用!");
                                }
                            break;
                            case 5 :
                                if(msg.type == 0)
                                {
                                    if(msg.content.sourceUrl)
                                    {
                                        alert("原图片已成功保存至服务器,url为:\n" + msg.content.sourceUrl);
                                    }
                                    alert("头像已成功保存至服务器,url为:\n" + msg.content.avatarUrls.join("\n"));
                                }
                            break;
                        }
                    }
                );
                document.getElementById("upload").onclick=function(){
                    swf.call("upload");
                };
            });
        </script>
    </body>
</html>

相关链接

发表评论