ipcloud上传裁切图片

主页：

<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>

    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">

    <title>Hello APP</title>

    <link rel="stylesheet" type="text/css" href="./css/api.css" />

    <style type="text/css">

    html,body{

        height: %;

    }

    #wrap{

        height: %;

        display: -webkit-box;

        display: -webkit-flex;

        display: flex;

        -webkit-box-orient: vertical;

        -webkit-flex-flow: column;

               flex-flow: column;

    }

    #header{

        text-align: center; background-color: #81a9c3; color: #fff;

        width: %;

    }

    #header h1{

        font-size: 20px; height: 44px; line-height: 44px; margin: 0em; color: #fff;

    }

    #main{

        -webkit-box-flex: ;

        -webkit-flex: ;

        flex: ;

    }

    #footer{

        height: 30px; line-height: 30px;

        background-color: #81a9c3;

        width: %;

        text-align: center;

    }

    #footer h5{

        color: white;

    }

    .con{font-size: 28px; text-align: center;}

    </style>

</head>

<body>

    <div id="wrap">

        <div id="header">

            <h1>cutcut</h1>

        </div>

        <div id="main">

            <button class="uploadBtn" type="text" onclick="getPicture();" style="position: relative;left:50%; margin-left:-50px;width:100px;height:50px;background-color: pink;border:none;">点击上传图片</button>

            <div class="imgBox" style="position:relative;width:200px;height:200px;border:1px solid red;">

                <img id="imgUp" style="width:100%;height:100%;" src=""/>

            </div>

        </div>

        <div id="footer">

            <h5>Copyright &copy;<span id="year"></span> </h5>

        </div>

    </div>

</body>

<script type="text/javascript" src="script/jquery-1.8.3.min.js"></script>

<script type="text/javascript" src="./script/api.js"></script>

<script type="text/javascript" src="./script/jquery-1.8.3.min.js"></script>

<script type="text/javascript">

function getPicture() {

    api.confirm({

      title : "提示",

      msg : "您需要如何选择自己的头像？",

      buttons : ["现在照", "相册选", "取消"]

    }, function(ret, err) {

      //定义图片来源类型

      var sourceType;

      if ( == ret.buttonIndex) {/* 打开相机*/

        sourceType = "camera";

        openPicture(sourceType);

      } else if ( == ret.buttonIndex) {

        sourceType = "album";

        openPicture(sourceType);

      } else {

        return;

      }

      });

 }

  //  选取图片

function openPicture(sourceType) {

  var q = ;

  //获取一张图片

  api.getPicture({

    sourceType : sourceType,

    encodingType : 'png',

    mediaValue : 'pic',

    //返回数据类型，指定返回图片地址或图片经过base64编码后的字符串

    //base64:指定返回数据为base64编码后内容,url:指定返回数据为选取的图片地址

    destinationType : 'url',

    //是否可以选择图片后进行编辑，支持iOS及部分安卓手机

    allowEdit : false,

    //图片质量，只针对jpg格式图片（0-100整数）,默认值：50

    quality : q,

    //                targetWidth : 100,

    //                targetHeight : 1280,

    saveToPhotoAlbum : true

  }, function(ret, err) {

    if (ret) {

      /*

       * data:"",                //图片路径

       base64Data:"",          //base64数据，destinationType为base64时返回

       */

      var img_url = ret.data;

      if (img_url != "") {

        //打开裁剪frame

        openImageClipFrame(img_url);

      }

    }

  });

}

    // 打开图片裁剪页面

function openImageClipFrame(img_src){

  api.openFrame({

    name : 'main',

    scrollToTop : true,

    allowEdit : true,

    url : 'html/main.html',

    rect : {

      x : ,

      y : ,

      w : api.winWidth,

      h : api.winHeight,

    },

    animation : {

      type : "reveal", //动画类型（详见动画类型常量）

      subType : "from_right", //动画子类型（详见动画子类型常量）

      duration :

    },

    pageParam : {

      img_src : img_src,

    },

    vScrollBarEnabled : false,

    hScrollBarEnabled : false,

    //页面是否弹动 为了下拉刷新使用

    bounces : false

  });

}

apiready = function() {

api.addEventListener({

    name:'clip_success'

}, function(ret, err){

    if( ret ){

         var jsonstr= JSON.stringify(ret);

         for (var key in ret)

           {

               for (var key2 in ret[key]){

                  var st1=JSON.stringify(ret[key][key2]).replace('"','');

                  var st1=st1.replace('"','');

                  // $("#imgUp").attr("src",st1);

                  $.ajax({

                    type:"POST",

                    url:"http://www.yuechebang.cn/index.php/OAuth2API/Api/index",

                    data:{},

                    dataType:'json',

                    success:function(data){

                        if(data.errcode==){

                            $("#imgUp").attr("src",st1);

                        }else{

                            alert(data.errmsg);

                        }

                    }

                    })

                   break;

               }

           }

    }else{

         alert( JSON.stringify( err ) );

    }

});

}

</script>

</html>

副页：

<!DOCTYPE html>

<html>

  <head>

  <meta charset="utf-8">

  <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>

  <title>图片裁剪</title>

  <!-- 在IOS设备上，有时会将数字转为手机号，这里也要禁止下 -->

  <meta name="format-detection" content="telephone=no"/>

  <link rel="stylesheet" type="text/css" href="css/api.css" />

  <link rel="stylesheet" type="text/css" href="css/aui.css" />

  <style>

      html, body {

        /*background-color: transparent;

        background: rgba(0,0,0,0);*/

      }

      #foot_div {

        display: block;

        bottom: 0px;

        padding-left : 20px;

        padding-right : 20px;

        /*right: 18px;*/

        min-width: 200px;

        line-height: 30px;

        width:%;

        position: fixed;

        /*border: 1px solid #fff;*/

        text-align: center;

        color: #fff;

        background: #;

    }

  </style>

  </head>

<body>

  <div id="foot_div">

    <!--<div id="container" class="aui-button-row">-->

    <span>

      <font class="aui-pull-left" onclick="back();">取消</font>

      <font onclick="resetImageClip();">重置</font>

      <font onclick="saveImageClip();" class="aui-pull-right">选取</font>

    </span>

  </div>

</body>

<script type="text/javascript" src="script/jquery-1.8.3.min.js"></script>

<script type="text/javascript" src="script/api.js"></script>

<script type="text/javascript" src="script/base_config.js" ></script>

<script type="text/javascript" src="script/common/common.js" ></script>

<script type="text/javascript">

var FNImageClip;

apiready = function() {

  var img_src = api.pageParam.img_src;

  FNImageClip = api.require('FNImageClip');

  openImageClip(img_src);

  // alert(img_src);

  //安卓关闭

  if (api.systemType == 'android') {

    backForAndroid();

  }

};

  // 对头像进行裁剪

function openImageClip(img_src){

  var rect_w = api.winWidth;

  var rect_h = api.winHeight;

  var clip_w = parseInt(rect_w - );

  var clip_y = parseInt((rect_h - clip_w - ) / );

  FNImageClip.open({

    rect: {

        x: ,

        y: ,

        w: rect_w,

        h: rect_h -

    },

    srcPath: img_src,

    style: {

          //（可选项）字符串类型；图片裁剪控件遮罩层背景，支持 rgb，rgba，#；默认：#888

      mask: '#000',

      clip: {

        //（可选项）数字类型；裁剪区域的宽度，当 appearance 为 circular 时，w 为半径；默认：rect.w / 2

        w: clip_w,

        //（可选项）数字类型；裁剪区域的高度，当 appearance 为 circular 时，h 无效；默认：w

        h: clip_w,

        x: ,

        y: clip_y,

        borderColor: '#0f0',

        borderWidth: ,

        //（可选项）字符串类型；裁剪区域的形状，支持 circular | rectangle；默认：rectangle

        appearance: 'rectangle'

      }

    },

    mode : 'image',

    fixedOn: api.frameName

  }, function(ret, err){

  });

}

  //  安卓点击返回的时候

function backForAndroid() {

  api.addEventListener({

    name : "keyback"

  }, function(ret, err) {

    back();

  });

}

      //  返回应用页面

function back() {

  closeImageClip();

  api.closeFrame({

    name : 'main'

  });

}

// 关闭裁剪组件

function closeImageClip(){

  FNImageClip.close();

}

  //  重置裁剪组件

function resetImageClip(){

  FNImageClip.reset();

}

          // 保存裁剪组件

function saveImageClip(){

  FNImageClip.save({

      destPath: 'fs://imageClip/result.png',

      copyToAlbum: false,

      quality:

  },function(ret, err){

    if(ret) {

      alert(ret);

      api.sendEvent({

        name:'clip_success',

        extra:{

          // element_id:element_id,

          new_img_url:ret.destPath

        }

      })

      FNImageClip.close();

    } else {

      alert('失败:err');

      popToast('服务器繁忙，请稍后再试');

 }

 })

 }

 // function savepic(){

 //  //  alert('script');

 //  //  var id=api.pageParam.img_picid;

 //  // //  alert(api.pageParam.img_picid);

 //  //  alert(id);

 //

 //  //  $('#imgUp').attr('src',file_attrs[0]);

 //   $.ajax({

 //       type:"POST",

 //       url:"http://www.yuechebang.cn/index.php/OAuth2API/Api/index",

 //       data:{},

 //       dataType:'json',

 //       success:function(data){

 //           if(data.errcode==0){

 //               img_picid.attr('src',file_attrs[0]);

 //           }else{

 //               alert(data.errmsg);

 //           }

 //       }

 //   })

 // }

</script>

</html>

ipcloud上传裁切图片的更多相关文章

ipcloud上传裁切图片，保存为base64再压缩传给后台
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name ...
thinkphp 3.2.3整合ueditor 1.4，给上传的图片加水印
今天分享一下thinkphp 3.2.3整合ueditor 1.4,给上传的图片加水印.博主是新手,在这里卡住了很久(>_<) thinkphp 3.2.3整合ueditor 1.4 下载 ...
ASP.NET、JAVA跨服务器远程上传文件(图片)的相关解决方案整合
一.图片提交例: A端--提交图片 protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { string u ...
如何预览将要上传的图片-使用H5的FileAPI
这篇将要说的东西已经不新鲜了. 参考资料: Reading files in JavaScript using the File APIs (鉴于作者在美国, 我姑且认为作者母语是英语, 当然链接中有 ...
js上传压缩图片
原文链接:http://blog.csdn.net/iefreer/article/details/53039848 手机用户拍的照片通常会有2M以上,这对服务器带宽产生较大压力. 因此在某些应用下( ...
php 实现接收客户端上传的图片
今天,遇到一个服务端接收客户端上传图片的需求,经过学习.我写了个简单的demo 以备下次学习. 首先服务器接收的发送图片的请求一定要是post请求,而且请求一定要加上 enctype="mu ...
KindEditor上传本地图片在ASP.NET MVC的配置
http://www.cnblogs.com/upupto/archive/2010/08/24/1807202.html 本文解决KindEditor上传本地图片在ASP.NET MVC中的配置. ...
.net mvc4 利用 kindeditor 上传本地图片
http://blog.csdn.net/ycwol/article/details/41824371?utm_source=tuicool&utm_medium=referral 最近在用k ...
解决uploadify多图片上传部分图片丢失，且不提示任何错误的问题
这两天用到uploadify的flash版本进行批量图片上传并生成缩略图的功能,之前用uploadify用的好好的,这次突然出现了一个奇怪的问题. 问题描述如下:当我选择单个图片上传的时候,图片上传都 ...

随机推荐

MACBOOK蓝牙连接丢失恢复
MACBOOK用户可能会碰到一个神奇而无奈的问题: 某些情况下,很多时候从睡眠状态回来,会发现蓝牙设备再也无法连接,包括蓝牙鼠标.键盘等等... 恢复方法一般是,重启或注销后重新登陆,然后所有工作现场 ...
索尼A6300
1. 开机提示的NTSC NTSC和PAL,是两种不同视频录制标准,也就是说拍摄视频的时候才有用. a6300 1080P下,最大可以以每秒 120p(ntsc下)或者 100p(pal下)录制.播 ...
解决react项目中跨域和axios封装使用
最新几天学了一下react,发现了几个问题,估计新入坑的同学们也会遇到,下面我先列出来几点 1.请求跨域问题 2.如何发起请求 3.axios的简单封装全局安装create-react-app脚手架 ...
python学习-第四天补充-面向对象
python学习-第四天补充-面向对象 python 私有 --name mangling(名字修改.名字) 在命名时,通过使用两个下划线作为开头,可以使得这个变量或者函数编程私有的,但是这个其实的p ...
java int转Short
使用short(xx) problemMultipleChoiceDO.setExamCount((short)0);//在数据库中是smallint类型
UML类图（一）
前言最近在学习程杰老师的<大话设计模式>,觉得非常不错,就做了一些学习笔记和总结.如果对设计模式很感兴趣的,可以直接阅读书籍,相信会有更多的收获. 本人小菜一枚,如果理解的不对的还请多多 ...
Ajax请求后台数据
一.前期准备安装好XAMPP软件,并运行起来.本文代码是基于XAMPP开发环境,XAMPP是完全免费且易于安装的Apache发行版,其中包含MariaDB.PHP和Perl.XAMPP开放源码包的设 ...
原生js实现深度克隆
总体思路: 判断对象当中的值为引用值还是原始值如果是引用值,判断是数组还是对象,如果是原始值直接copy 递归注意:不要忘了排除null,因为typeof null = 'object' func ...
封装自己的framework静态库
ios中我们写的代码有时不愿意让别人看到,可能对它进行封装,生成一个静态库如典型的.a,还有一种就是和苹果自带的库一样的后缀名为.framework的库,个人推荐使用.framework,因为.a不 ...
python2和3的一些区别，编码方式
python2与python3的区别: #python2 print() print'abc' #range() xrange()生成器 #raw_input()#python3 #print('ab ...

ipcloud上传裁切图片

ipcloud上传裁切图片的更多相关文章

随机推荐

热门专题