zoukankan      html  css  js  c++  java
  • 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: 100%;
        }
        #wrap{
            height: 100%;
            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;
             100%;
        }
        #header h1{
            font-size: 20px; height: 44px; line-height: 44px; margin: 0em; color: #fff;
        }
        #main{
            -webkit-box-flex: 1;
            -webkit-flex: 1;
            flex: 1;
        }
        #footer{
            height: 30px; line-height: 30px;
            background-color: #81a9c3;
             100%;
            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;100px;height:50px;background-color: pink;border:none;">点击上传图片</button>
                <div class="imgBox" style="position:relative;200px;height:200px;border:1px solid red;">
                    <img id="imgUp" style="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 (1 == ret.buttonIndex) {/* 打开相机*/
            sourceType = "camera";
            openPicture(sourceType);
          } else if (2 == ret.buttonIndex) {
            sourceType = "album";
            openPicture(sourceType);
          } else {
            return;
          }
          });
     }
    
      //  选取图片
    function openPicture(sourceType) {
      var q = 100;
      //获取一张图片
      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 : 0,
          y : 0,
          w : api.winWidth,
          h : api.winHeight,
        },
        animation : {
          type : "reveal", //动画类型(详见动画类型常量)
          subType : "from_right", //动画子类型(详见动画子类型常量)
          duration : 300
        },
        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==0){
                                $("#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- 200px;
            line-height: 30px;
            100%;
            position: fixed;
            /*border: 1px solid #fff;*/
            text-align: center;
            color: #fff;
            background: #000;
        }
      </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 - 2);
      var clip_y = parseInt((rect_h - clip_w - 30) / 2);
      FNImageClip.open({
        rect: {
            x: 0,
            y: 0,
            w: rect_w,
            h: rect_h - 30
        },
        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: 0,
            y: clip_y,
            borderColor: '#0f0',
            borderWidth: 0,
            //(可选项)字符串类型;裁剪区域的形状,支持 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: 1
      },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>
  • 相关阅读:
    shell脚本从文件夹中递归提取文件
    php生成图片缩略图,支持png透明
    shell脚本批量下载资源并保留路径
    PHP字符串word末字符大小写互换
    编译gearman提示缺少boost
    Rebranding(模拟+思维)
    拼接平方数(枚举每个数的组合情况就好)----------蓝桥备战系列
    格子刷油漆(dp)-----------蓝桥备战系列
    高僧斗法(nim博弈)----------蓝桥备战系列
    网络寻路(思维+vector的应用)-----------蓝桥备战系列
  • 原文地址:https://www.cnblogs.com/yongwang/p/7097382.html
Copyright © 2011-2022 走看看