`

APICloud(十):图片裁剪功能

阅读更多

项目中有用到上传头像的功能,于是就需要根据实际情况进行裁剪了。具体代码如下:

1、事件触发

点击头像时触发uploadHead()事件,从底部弹出选项——相册、拍照——让选择,

然后调用api.getPicture()并根据选择的情况设置sourceType的值,

选择完图片之后获取到图片路径并传给openImageClipFrame()方法,openImageClipFrame()方法打开裁剪的frame

//该方法用来上传图片
function uploadHead(){	
	//弹出框让选择拍照还是从相册选择
	api.actionSheet({
		title: '选择头像',
	    cancelTitle: '取消',
	    //destructiveTitle: '红色警告按钮',//红色警示按钮标题,一般用于做一些删除之类操作
	    buttons: ['拍照','从相册选择']
    },function(ret,err){
    	//ret.buttonIndex:1、拍摄 2、从相册选择 3、取消
    	switch(ret.buttonIndex){
    		case 1:{getPictureBySourceType(1);break;}//拍摄
    		case 2:{getPictureBySourceType(2);break;}break;//从相册选择
    		case 3:return false;//取消
    	}
    });
}

/**
 *该方法用来拍照或者从相册中获取图片
 * @param source:1-拍摄 2-相册
 *  **/
function getPictureBySourceType(source){
	var sourceType = "camera";
	if(source==2){sourceType="library";}
	
	api.getPicture({
	    sourceType: sourceType,//图片源类型,从相册、图片库或相机获取图片,可选项:camera/library/album 默认library
	    encodingType: 'png',//返回图片类型,jpg或png,默认值png
	    mediaValue: 'pic',//媒体类型,图片或视频,可选项:pic-图片 video-视频 all-图片和视频,Android不支持,默认pic
	    destinationType: 'url',//返回数据类型,指定返回图片地址或图片经过base64编码后的字符串,可选项:base64/url 
	    allowEdit: false,//是否可以选择图片后进行编辑,支持iOS及部分安卓手机,默认值false
	    quality: 100,//图片质量,只针对jpg格式图片(0-100整数)
	    //targetWidth: 70,//压缩后的图片宽度,图片会按比例适配此宽度,默认值:原图宽度
	    //targetHeight: 70,
	    saveToPhotoAlbum: false//拍照或录制视频后是否保存到相册,默认值false
	}, function(ret, err) {
	    if (ret) {
	        if(ret.data.length>0){//拍摄完成取消时,会返回该方法,但是ret.data为空
		        //alert(ret.data);
		        //clipImage(ret.data);//弹出裁剪框进行裁剪
		        openImageClipFrame(ret.data);//该方法用来打开图片裁剪也页面
	        }            
        }    
	});   
}
//打开图片裁剪页面
function openImageClipFrame(img_src){
    api.openFrame({
            name : 'imageClipFrame',
            scrollToTop :true,
            allowEdit : true,
            url : 'imageClipFrame.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
    });
}

2、 裁剪页面静态页和css

<style>
	* { margin:0;padding:0;}
	ul,li{list-style-type:none; margin:0;padding:0;}
                        
    #foot_div {
            display: block;
            bottom: 0px;
            min-width: 200px;
            line-height: 30px;
            width:100%;
            position: fixed;
            text-align: center;
            color: #fff;
            background: #000;
     }
     #foot_div ul {width:99%;margin:0 auto;}
	 #foot_div li{width:33%;float:left;}
	 #foot_div ul li:nth-of-type(1){text-align:left;}
     #foot_div ul li:nth-of-type(2){text-align:center;}
	 #foot_div ul li:nth-of-type(3){text-align:right;}
</style>

<body>
	<div id="foot_div">   
		<ul>
			<li onclick="back();">取消</li>
			<li onclick="resetImageClip();">重置</li>
			<li onclick="saveImageClip();">选取</li>
		</ul>
	</div>
</body>

3、保存图片、上传图片代码

var FNImageClip;
	var BASE_IMG_HEAD_TEMP_PATH="fs://imageClip/result.png";
		
	apiready = function(){
		var img_src = api.pageParam.img_src;
		FNImageClip = api.require('FNImageClip');
		openImageClip(img_src);
    };
	//对头像进行裁剪
	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: 'rgba(0,0,0,.7)',
			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: 1,
				//(可选项)字符串类型;裁剪区域的形状,支持 circular | rectangle;默认:rectangle
				appearance: 'rectangle'
			    }
			},
			mode : 'clip',
			fixedOn: api.frameName
			}, function(ret, err){        
			 // alert(ret.status);         
		});
	}	
	//返回应用页面
    function back() {
        closeImageClip();
        api.closeFrame({
            name : 'imageClipFrame'
        });
    }
           
    //关闭裁剪组件
    function closeImageClip(){
       FNImageClip.close();
    }
           
    //重置裁剪组件
    function resetImageClip(){
         FNImageClip.reset();
    }
    
    //保存裁剪之后的图片        
    function saveImageClip(){
        FNImageClip.save({
            destPath: BASE_IMG_HEAD_TEMP_PATH,
            copyToAlbum: false,
            quality: 1
        },function(ret, err){
            if(err) {
                api.toast({
                    msg:'服务器繁忙,请稍后再试'
                });
            }else{
                 //进行文件上传
                 uploadTheHead(ret.destPath);
            }      
        });
    }
            
    //该方法用来上传文件
    function uploadTheHead(img_str){
    	api.showProgress({
    		title: '头像上传中',
			modal: true
        });
        img_str="\"file1\":\""+img_str+"\"";
        img_str = eval('('+("{"+img_str+"}")+')');
    	api.ajax({
		    url:$api.getStorage("url"),
		    method:'post',
		    dataType:'text',
		    data:{
		    	values:{
		        	'user_id':$api.getStorage("u_id"),
		        	'user_name':$api.getStorage("u_name"),
		        	'time':new Date().getTime()
		    	},	    	
		    	files:img_str
		    }
		},function(ret, err){
			api.hideProgress();//隐藏进度提示框
		    $api.setStorage("u_path",ret);//将ajax返回来图片路径存入到sorage中用来显示头像
		    //返回应用界面
		    closeImageClip();//关闭当前图片剪切功能
            api.closeFrame({
                name : 'imageClipFrame'
            });
            api.execScript({
            	name:'my_win',//刷新头像所在window
                script: 'refreshWin();'
            });
		});
    }

注意点

a、BASE_IMG_HEAD_TEMP_PATH是自己随便定义的名称,其中的内容也可以随便定义。但是一定要设置,因为必须给裁剪好的图片一个保存的地方然后才能上传到服务器啊。

b、有时候选图片的时候图片很清晰,选完了到裁剪页面时图片就很模糊了,这个其实不是FNImageClip模块的问题而是api.getPicture()的问题,将quality设置成100、targetWidth和targetHeight两个属性不添加即可

quality属性用来设置图片的质量,从0-100,默认是50,这就已经很模糊了,设置成100之后选的是什么裁剪时看到的就是什么。

targetWidth和targetHeight两个属性不添加,并不是不复制,而是在调用api.getPicture()不要加这两个属性,让它默认就行。这两个属性是用来参考压缩图片大小的,具体怎么参考和怎么计算官网上说明但是呢计算的结果跟我们设置的值总不一样,所以最好还是不要用了。

 

参考连接:

1、http://community.apicloud.com/bbs/forum.php?mod=viewthread&tid=32311&extra=&page=1

2、http://docs.apicloud.com/Client-API/Func-Ext/FNImageClip

祝好运!

分享到:
评论

相关推荐

    ApiCloud下:视频播放模块SDK

    在APICloud平台上,开发者可以利用其提供的视频播放模块SDK来构建具有强大视频播放功能的应用程序。这个SDK专为Android Studio设计,便于在apicloud的自定义模块开发中使用。以下将详细介绍APICloud视频播放模块SDK...

    APICloud教程:服务器上的页面执行API

    ### APICloud教程:服务器上的页面执行API #### 背景介绍 APICloud作为一款混合开发平台,为开发者提供了高效便捷的应用开发方案。它不仅支持原生接口的调用,还允许开发者通过HTML5、JavaScript等前端技术进行...

    APICloud开发工具:WebStorm插件

    其次,该插件提供了代码格式化和美化功能,可以按照APICloud的编码规范自动调整代码风格,保持代码的整洁和可读性。同时,它支持错误检查和实时预览,能在编写过程中即时发现语法错误或潜在问题,减少后期调试的时间...

    APICloud:轻松6步完成App软件开发

    ### APICloud:轻松6步完成App软件开发 随着移动互联网的发展,应用程序(App)已成为人们生活中不可或缺的一部分。然而,对于那些不具备编程技能的人来说,开发一款App似乎是一项难以企及的任务。幸运的是,APICloud...

    apicloud 图片上传

    本话题将详细讲解如何在APICloud环境下实现图片上传功能。 一、APICloud简介 APICloud是一款混合移动应用开发平台,它允许开发者使用HTML5、CSS3和JavaScript编写前端代码,并通过其提供的API与原生设备功能进行...

    APICloud(十三):使用jpush进行消息推送

    这篇博客文章“APICloud(十三):使用jpush进行消息推送”将详细讲解如何在APICloud项目中整合JPush服务,以实现实时、精准的消息推送功能。 首先,我们需要了解JPush的基本概念。JPush是极光公司提供的一个稳定、...

    信息安全_数据安全_APICloud:服务CAF开发者.pdf

    而APICloud提供的"一站式开发"平台,通过模块化和功能实现的理念,使开发者能够按需选择布局功能,简化了开发流程,提高了开发效率。 在数据安全方面,APICloud采用了七牛云的存储服务,确保了数据的真实性和安全性...

    apicloud h5图片上传批量上传.rar

    图片批量上传基于apicloud h5的图片上传,解决状态栏重合,并优化fixStatusBar代码,Android4.4版本以上添加25px,由于原作者删掉博文,放着备份,也方便大家,如果有影响到原作者,烦请私聊我删资源。

    apicloud模块权限.zip

    7. **feature**:这个文件夹可能包含应用的特定功能模块代码,每个模块对应APICloud中的一个功能组件。 8. **launch**:启动配置文件,通常包含了应用启动时的初始设置,如加载的首页等。 9. **html**:可能包含了...

    APICloud IDE开发指南

    - **说明**:APICloud IDE提供了云端同步功能,开发者可以轻松地将创建的应用同步至云端资源库,实现多端共享。 - **操作流程**: - 选择需要同步到云端资源库的APICloud应用。 - 右键选择“云端同步—提交”,并...

    藏经阁-APICloud服务CAF开发者:共筑YunOS开发者生态.pdf

    APICloud提供了对YunOS应用的开发支持,包括云应用开发控制台、应用配置、代码、证书、编译、协作云端模块管理等功能。APICloud还提供了丰富的开发者服务,包括文档、教程、培训、案例和开源代码等。 知识点4:...

    Node.js-apicloud蓝牙打印功能

    本文将深入探讨如何在Node.js环境中利用APICloud的BtPrintModule模块实现蓝牙打印功能,尤其针对那些不支持低功耗蓝牙(BLE)的蓝牙2.0小票机。 首先,我们需要理解APICloud。APICloud是一个跨平台的移动应用开发...

    APICloud APP开发工具新增WiFi真机调试和实时预览功能

    ### APICloud APP开发工具新增WiFi真机调试和实时预览功能详解 #### 一、概述 APICloud,作为一款高效便捷的应用开发工具,一直致力于优化开发者的体验,缩短应用开发周期。近期,APICloud对旗下开发工具进行了...

    APICloud(九):上拉加载数据和长按事件

    本篇我们将深入探讨如何在APICloud中实现上拉加载数据和长按事件,这两个功能在许多应用程序中都非常常见。 首先,我们来看上拉加载数据。在很多情况下,当用户滚动到页面底部时,我们希望动态地加载更多的内容,这...

    Atom的APICloud开发工具APICloud-For-Atom.zip

    APICloud 为 Atom 编辑器推出的开发工具包。包含新建应用模板,页面模板,WiFi 真机同步,流式日志输出...在顶部菜单 Packages/APICloud 或右击工程文件或目录,即可使用相关APICloud开发功能; 标签:APICloud

    vue_apicloud:使用vue和apicloud构建混合应用程序

    使用vue和apicloud可以快速构建一个App。 todo app推送 自动更新(apicloud官方提供了,可以整合使用) 快速开始 # 1. 先检查下 Node.js 是否安装成功 $ node -v v10.0.0 $ npm -v 6.2.0 # 2. 由于众所周知的原因,...

    apicloud七天培训课day3代码

    为了提高应用性能,需要注意减少网络请求、优化图片资源、合理使用内存和CPU,以及利用APICloud的性能监控工具进行调优。 12. **持续集成与部署**: APICloud提供了CI/CD(持续集成/持续部署)服务,可以自动化...

    apicloud制作一个app

    在本文中,我们将深入探讨如何使用APICloud来制作一个应用程序,以及这个平台为开发者带来的优势和功能。APICloud是一款强大的移动应用开发平台,它允许开发者使用HTML5、JavaScript和CSS等Web技术快速构建原生移动...

    APICloud通用命令行开发工具apicloud-cli.zip

    APICloud 提供的一款适用于终端/命令行的 APICloud 平台开发工具,基于 apicloud-tools-core 核心开发库 开发,包含新建页面模板,新建应用模板,WiFi同步等核心功能等核心库已有功能。操作系统: Mac/Windows/...

    apicloud源码

    在这个"apicloud源码"的压缩包中,我们可以期待找到一系列与 APICloud 开发相关的源代码文件,可能是用于构建特定功能或者整个应用的组件。 APICloud 的核心理念是“云端一体”,它提供了云服务和本地 API 的结合,...

Global site tag (gtag.js) - Google Analytics