APICloud（十）：图片裁剪功能

最新推荐文章于 2022-05-14 17:36:42 发布

wjiaoling136

最新推荐文章于 2022-05-14 17:36:42 发布

阅读量1.1k

点赞数

分类专栏： APICloud 文章标签：图片裁剪功能 FNImageClip

本文链接：https://blog.csdn.net/wjiaoling136/article/details/84883847

版权

APICloud 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

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

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 οnclick="back();">取消</li>
			<li οnclick="resetImageClip();">重置</li>
			<li οnclick="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

祝好运！