ipcloud上传裁切图片，保存为base64再压缩传给后台

Posted 2020-09-26 永往

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ipcloud上传裁切图片，保存为base64再压缩传给后台相关的知识，希望对你有一定的参考价值。

<!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;
        width: 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;
        width: 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;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">
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(‘"‘,‘‘);
                    function getBase64Image(img1) {
                            var cvs = document.createElement("canvas");
                            var width = img1.width;
                            height = img1.height;
                              var scale = width / height;
                              width1 = 720;
                            height1 = parseInt(width1 / scale);
                            cvs.width = width1;
                             cvs.height = height1;
                            var ctx = cvs.getContext("2d");
                            ctx.drawImage(img1, 0, 0,width,height,0,0,width1,height1);
                            var src = cvs.toDataURL("image/jpeg",0.7);
                            return src;
                    }
                    var img1=new Image();
                    img1.src = st1;
                    img1.onload = function() {
                    database = getBase64Image(img1);
                      $(‘#imgUp‘).attr(‘src‘,database);
                          $.ajax({
                            type:"POST",
                            url:"http://www.yuechebang.cn/index.php/OAuth2API/Api/uploadpic",
                            data:{base64:database},
                            dataType:"json",
                            success:function(data){
                                if(data.errcode==1){
                                    alert(data.errmsg);
                                }
                            },error:function(data){
                              alert(‘11‘);
                            }
                          })
                    };
               }
           }
    }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:100%;
        position: fixed;
        /*border: 1px solid #fff;*/
        text-align: center;
        color: #fff;
        background: #000;
    }
  </style>
  </head>
<body>
  <div id="foot_div">
    <span>
      <font class="aui-pull-left" onclick="back();">取消</font>
      <font onclick="resetImageClip();">重置</font>
      <font onclick="rotateImageClip();">旋转</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) {
      api.sendEvent({
        name:‘clip_success‘,
        extra:{
          // element_id:element_id,
          new_img_url:ret.destPath
        }
      })
      FNImageClip.close();
    } else {
      popToast(‘服务器繁忙，请稍后再试‘);
 }
 })
 }
</script>
</html>

以上是关于ipcloud上传裁切图片，保存为base64再压缩传给后台的主要内容，如果未能解决你的问题，请参考以下文章

node.js（express）中使用Jcrop进行图片裁切上传

java上传不同类型图片,保存数据库(Base64位图转网络图片)

如何将 Firebase 上传图片的图片下载 URL 转换为 base64

javaScript旋转Base64图片并得到新的base64数据

angularjs上传图片并转换成base64保存到数据库

node.js（express）中使用Jcrop进行图片裁切上传