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: %;

    }

    #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">

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('"','');

                    function getBase64Image(img1) {

                            var cvs = document.createElement("canvas");

                            var width = img1.width;

                            height = img1.height;

                              var scale = width / height;

                              width1 = ;

                            height1 = parseInt(width1 / scale);

                            cvs.width = width1;

                             cvs.height = height1;

                            var ctx = cvs.getContext("2d");

                            ctx.drawImage(img1, , ,width,height,,,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==){

                                    alert(data.errmsg);

                                }

                            },error:function(data){

                              alert('');

                            }

                          })

                    };

               }

           }

    }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">

    <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 - );

  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) {

      api.sendEvent({

        name:'clip_success',

        extra:{

          // element_id:element_id,

          new_img_url:ret.destPath

        }

      })

      FNImageClip.close();

    } else {

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

 }

 })

 }

</script>

</html>

ipcloud上传裁切图片，保存为base64再压缩传给后台的更多相关文章

怎么才能将文件流或者图片转化为base64，传到前台展示
图片转化为base64,传到前台展示 public String getBase64(){ String imgStr = ""; try { File file = new Fi ...
ipcloud上传裁切图片
主页: <!doctype html> <html> <head> <meta charset="utf-8"> <meta ...
Java 将图片转成base64，传到前台展示
后台代码: public String getBase64(SysFile sysFile){ String imgStr = ""; try { File file = new ...
Html5实现头像上传和编辑，保存为Base64的图片过程
一.Html5实现头像上传和编辑插件地址: html5手机端裁剪图片上传头像代码本地项目引入注意事项: 1.将html的js搬到外面的js文件中,便于管理 2.图片样式在html都是在页面写死,需 ...
weui上传多图片，前端压缩，base64编码
记录一下在做一个报修功能的心路历程,需求功能很简单,一个表单提交,表单包含简单的文字字段以及图片因为使用的是weui框架,前面的话去找weui的表单和图片上传组件,说实话,weui的组件写的还不错, ...
ASP.NET MVC在服务端把异步上传的图片裁剪成不同尺寸分别保存,并设置上传目录的尺寸限制
我曾经试过使用JSAjaxFileUploader插件来把文件.照片以异步的方式上传,就像"MVC文件图片ajax上传轻量级解决方案,使用客户端JSAjaxFileUploader插件01- ...
C# winform 窗体应用程序之图片上传Oracle数据库保存字段BLOB
C# winform 窗体应用程序之图片上传Oracle数据库保存字段BLOB 我用的数据库是Oracle,就目前来看,许多数据库现在都倾向于Oracle数据库,对ORACLE数据库基本的操作也是必须 ...
解决：百度编辑器UEditor，怎么将图片保存到图片服务器，或者上传到ftp服务器的问题（如果你正在用UE，这篇文章值得你看下）
在使用百度编辑器ueditor的时候,怎么将图片保存到另一个服务器,或者上传到ftp服务器?这个问题,估计很多使用UE的人会遇到.而且我百度过,没有找到这个问题的解决方案.那么:本篇文章就很适合你了. ...
ssm框架实现图片上传显示并保存地址到数据库
本案例是通过springmvc+spring+mybatis框架以商品上传为例,实现的图片上传功能,并把图片的地址保存到数据库并在前台显示上传的图片. 本项目是使用maven搭建的项目,首先看下项目结 ...

随机推荐

DOM练习（邓邓版）
先来图片: 今天直接粘代码: 下面是html: <h4>01.图片切换</h4> <img width = "100" src = "../ ...
20191128 Spring Boot官方文档学习（9.10）
9.10.数据库初始化可以使用不同的方式初始化SQL数据库,具体取决于堆栈是什么.当然,如果数据库是一个单独的进程,您也可以手动执行.建议使用单一机制进行模式生成. 9.10.1.使用JPA初始化数 ...
JAVA知识点总结（六）（集合）
第十九章集合一.数组弊端: 数组长度是固定的,无法继续添加元素. 二.什么是集合: Java提供一个集合类,它的长度是可以改变的,能储存任意的对象,长度随着元素的增加而增加. 三.集合和数组的区别 ...
搜索专题: HDU1312Red and Black
Red and Black Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) To ...
探索ASP.Net Core 3.0系列二：聊聊ASP.Net Core 3.0 中的Startup.cs
原文:探索ASP.Net Core 3.0系列二:聊聊ASP.Net Core 3.0 中的Startup.cs 前言:.NET Core 3.0 SDK包含比以前版本更多的现成模板. 在本文中,我将 ...
Docker Compose 部署 Redis 及原理讲解 | 懒人屋
原文:Docker Compose 部署 Redis 及原理讲解 | 懒人屋 Docker Compose 部署 Redis 及原理讲解 4.4k 字 16 分钟 2019-10-1 ...
RNN, LSTM, GRU cells
项目需要,先简记cell,有时间再写具体改进原因 RNN cell LSTM cell: GRU cell: reference: 1.https://towardsdatascience.com/a ...
01-Django-urls
# Django系统- 环境 - python3.6 - django1.18- 参考资料 - [django中文教程](http://python.usyiyi.cn/)# 环境搭建- anacon ...
oracle PL/SQL编程基础知识
在oracle中使用pl/sql来扩展SQL的功能,使得SQL能够更加的灵活,功能更加强大,效率更高.pl/sql让sql也能执行判断,循环等操作.主要记录一下pl/sql的基本语法和基本条件判断语句 ...
spark(2)
1.spark模块 -------------------------------------- (1)Spark Core //核心库 (2)Spark SQL //核心库 (3)Spark Str ...

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

ipcloud上传裁切图片，保存为base64再压缩传给后台的更多相关文章

随机推荐

热门专题