Funk
Funk
  • 发布:2015-08-21 15:42
  • 更新:2016-08-01 09:06
  • 阅读:4496

想实现拍照,然后跳转到裁剪图片处理…… 不知道问题出在哪里……

分类:HTML5+
//拍照获取(目前还是不行)  
        function getImage() {  
            //开始拍照  
            var cmr = plus.camera.getCamera();  
            cmr.captureImage( function ( p ) {  
                //拍照成功调用的函数  
                plus.io.resolveLocalFileSystemURL( p, function ( entry ) {  
                    //console.log(entry.toLocalURL());对应的照片路径  
                    //裁剪  
                    var IMAGE_UNSPECIFIED = "image/*";  
                    var main = plus.android.runtimeMainActivity();  
                    var Intent = plus.android.importClass("android.content.Intent");  
                    var MediaStore = plus.android.importClass("android.provider.MediaStore");  
                    var File = plus.android.importClass("java.io.File");  
                    var Uri = plus.android.importClass("android.net.Uri");  

                    var outPutPath = plus.io.convertLocalFileSystemURL("_www/images/5566.jpg");  
                    var file = new File(outPutPath);  
                    // 输出目录uri  
                            var outPutUri = Uri.fromFile(file);  
                   //拍照回来的绝对路径(此处已更正Uri的问题)  
                       var path= entry.toLocalURL();  
                           //去掉\\或者file://  
                       path=path.replace("\\", "");  
                           //绝对路径转uri  
                       var curCropUri=Uri.fromFile(new File(path));  
                       //裁切  
                    var cropIntent = new Intent("com.android.camera.action.CROP");  
                    cropIntent.setDataAndType(curCropUri, IMAGE_UNSPECIFIED);  
                    // 截图完毕后 输出目录  
                    cropIntent.putExtra(MediaStore.EXTRA_OUTPUT, outPutUri);  
                    cropIntent.putExtra("crop", "true");  
                    // aspectX aspectY 是宽高的比例  
                    cropIntent.putExtra("aspectX", 1);  
                    cropIntent.putExtra("aspectY", 1);  
                    // outputX outputY 是裁剪图片宽高  
                    cropIntent.putExtra("outputX", 64);  
                    cropIntent.putExtra("outputY", 64);  
                    cropIntent.putExtra("return-data", true);  
                    main.startActivityForResult(cropIntent);  

                    main.onActivityResult = function(requestCode, resultCode, data) {  
                        //裁剪成功图片上传  
                        upload(outPutPath);  
                    };  
                    //上传  
                }, function ( e ) {  
                    console.log("读取拍照文件错误:"+e.message);  
                } );  
            }, function ( e ) {  
                console.log("失败:"+e.message);  
            }, {filename:"_doc/camera/",index:1} );  
        }

完整代码(JS):

    <script type="text/javascript">  
        mui.init();  
        var IMAGE_UNSPECIFIED = "image/*";  
        var PHOTOZOOM = 2; // 获取完图片返回key  
        var PHOTOLAT = 1; // 剪裁完毕后返回key  
        var main;  
        var Intent;  
        var MediaStore;  
        var File;  
        var Uri;  
        mui.plusReady(function(){  
            //请求数据,刷新数据  
            refreshInfo();  
            //变量初始化  
            main = plus.android.runtimeMainActivity();  
            Intent = plus.android.importClass("android.content.Intent");  
            MediaStore = plus.android.importClass("android.provider.MediaStore");  
            File = plus.android.importClass("java.io.File");  
            Uri = plus.android.importClass("android.net.Uri");  

            plus.webview.currentWebview().show();  
        });  

        //临时的服务区位置  
        // 上传文件  
        function upload(fullurl){  

            var wt=plus.nativeUI.showWaiting();  
            var task=plus.uploader.createUpload(conf.restUrl+conf.version+"/"+"member/uploadAvatar",  
                {method:"POST"},  
                function(t,status){ //上传完成  
                    if(status==200){  
                        //到时候把t.responseText解析成json就好  
                        var dt=JSON.parse(t.responseText);  
                        if(dt.error==0)  
                        {  
                            sdk.obj('authorimg').src=dt.data.avatar;  
                            mui.fire(plus.webview.getWebviewById('person/index.html'),'selfCallBack',null);  
                        }  
                        wt.close();  
                        plus.nativeUI.toast('上传成功');  
                    }else{  
                        plus.nativeUI.toast('上传成功');  
                        wt.close();  
                    }  
                }  
            );  
            task.addFile(fullurl,{key:'avatar'});  
            task.addData("token",global.getStorage('token'));  
            task.start();  
        }  

        // 从相册中选择图片,并裁剪  
        function galleryImg() {  
            var intent = new Intent(Intent.ACTION_PICK, null);  
            intent.setDataAndType(MediaStore.Images.Media.EXTERNAL_CONTENT_URI, IMAGE_UNSPECIFIED);  
            console.log(intent);  
            main.startActivityForResult(intent, PHOTOZOOM);  
//            
            var outPutPath;  
            main.onActivityResult = function(requestCode, resultCode, data) {  
                if (PHOTOZOOM == requestCode) {  
                        //输出的文件目录  
                    outPutPath = plus.io.convertLocalFileSystemURL("_www/images/5566.jpg");  
                    var file = new File(outPutPath);  
                    // 输出目录uri  
                    var outPutUri = Uri.fromFile(file);  
                    plus.android.importClass(data);  
                    var uri = data.getData();  
                    console.log("uri:"+uri);  
                    var cropIntent = new Intent("com.android.camera.action.CROP");  
                    cropIntent.setDataAndType(uri, IMAGE_UNSPECIFIED);  
                    // 截图完毕后 输出目录  
                    cropIntent.putExtra(MediaStore.EXTRA_OUTPUT, outPutUri);  
                    cropIntent.putExtra("crop", "true");  
                    // aspectX aspectY 是宽高的比例  
                    cropIntent.putExtra("aspectX", 1);  
                    cropIntent.putExtra("aspectY", 1);  
                    // outputX outputY 是裁剪图片宽高  
                    cropIntent.putExtra("outputX", 64);  
                    cropIntent.putExtra("outputY", 64);  
                    cropIntent.putExtra("return-data", true);  
                    main.startActivityForResult(cropIntent, PHOTOLAT);  
                } else if (requestCode == PHOTOLAT) {  
                    // 判断 剪裁完后的图片输出是否存在  
//                  var _file = new File(outPutPath);  
//                  sdk.obj('authorimg').src=outPutPath;  
                    console.log(outPutPath);  
                    //这里是否存在的判断还是需要的  
//                  var a = _file.exists();  
//                  alert(a);  

                    //查看本地是否有缓存图片 进行删除  
//                  _file.remove( function ( entry ) {  
//                          plus.console.log( "Remove succeeded" );  
//                      }, function ( e ) {  
//                          alert( e.message );  
//                  });  

                    //压缩图片  
//                  plus.zip.compressImage({  
//                          src:outPutPath,  
//                          dst:"_doc/header.jpg",  
//                          quality:20  
//                      },  
//                      function() {  
//                          alert("Compress success!");  
//                      },function(error) {  
//                          alert("Compress error!");  
//                  });  
                    //上传头像->然后进行处理,上传完毕之后 需要删除头像图片  

                    upload(outPutPath);  
                }  
            };  
        }  

        //拍照获取  
        function getImage() {  
            //开始拍照  
            var cmr = plus.camera.getCamera();  
            cmr.captureImage( function ( p ) {  
                //拍照成功调用的函数  
                plus.io.resolveLocalFileSystemURL( p, function ( entry ) {  
//                  upload(entry.toLocalURL());  
//                  plus.zip.compressImage({  
//                          src:entry.toLocalURL(),  
//                          dst:"_doc/a.jpg",  
//                          clip:{top:"25%",left:"25%",width:"50%",height:"50%"}        // 裁剪图片中心区域  
//                      },  
//                      function() {  
//                          alert("Compress success!");  
//                      },function(error) {  
//                          alert("Compress error!");  
//                  });  

                    //裁剪  
                    var outPutPath = plus.io.convertLocalFileSystemURL("_www/images/5566.jpg");  
                    var file = new File(outPutPath);  
                    // 输出目录uri  
                    var outPutUri = Uri.fromFile(file);  

                    //拍照回来的绝对路径  
                    var path=entry.toLocalURL();  
                    //去掉\\或者file://  
                    path=path.replace("\\", "");  
                    path=path.replace("file://", "");  

                    var _file = new File(path);  
                    var a = _file.exists();  
                    //alert(a);  

                    //绝对路径转uri  
                    var curCropUri=Uri.fromFile(new File(path));  
                    console.log("uri:"+curCropUri);  
                    //裁切  
                    var cropIntent = new Intent("com.android.camera.action.CROP");  
                    cropIntent.setDataAndType(curCropUri, IMAGE_UNSPECIFIED);  
                    // 截图完毕后 输出目录  
                    cropIntent.putExtra(MediaStore.EXTRA_OUTPUT, outPutUri);  
                    cropIntent.putExtra("crop", "true");  
                    // aspectX aspectY 是宽高的比例  
                    cropIntent.putExtra("aspectX", 1);  
                    cropIntent.putExtra("aspectY", 1);  
                    // outputX outputY 是裁剪图片宽高  
                    cropIntent.putExtra("outputX", 64);  
                    cropIntent.putExtra("outputY", 64);  
                    cropIntent.putExtra("return-data", true);  
                    main.startActivityForResult(cropIntent,1);  

                    main.onActivityResult = function(requestCode, resultCode, data) {  
                        //裁剪成功图片上传  
                        upload(outPutPath);  

                    };  
                    //上传  
                }, function ( e ) {  
                    console.log("读取拍照文件错误:"+e.message);  
                } );  
            }, function ( e ) {  
                console.log("失败:"+e.message);  
            }, {filename:"_doc/camera/",index:1} );  
        }  

        //头像处理  
        function showActionSheet(){  
            var bts=[{title:"本地相册",style:"destructive"},{title:"拍照"}];  //暂时不支持{title:"拍照"}  
            plus.nativeUI.actionSheet({cancel:"取消",buttons:bts},  
                function(e){  
                    if(e.index==1) {  
                        //1 本地相册,包括裁剪  
                        galleryImg();  
                    }   
                    else if(e.index==2) {  
                        //2 拍照  
                        getImage();  
                    }  
                    else {  
                        //3 取消  
                    }  
                }  
            );  
        }  
    </script>
2015-08-21 15:42 负责人:无 分享
已邀请:
wenju

wenju - http://www.mescroll.com -- 精致的下拉刷新和上拉加载js框架. 主流APP案例, 一套代码多端运行~ 问题咨询请发私信哈~

//拍照回来的绝对路径  
var path= entry.toLocalURL();  
//去掉\\或者file://  
path=path.replace("\\", "");  
path=path.replace("file://", "");  
//绝对路径转uri  
var curCropUri=Uri.fromFile(new File(path));  
//裁切  
cropIntent.setDataAndType(curCropUri, IMAGE_UNSPECIFIED);  
...  
..  
  • Funk (作者)

    555……还是不行 目前的现象是跳转回来屏幕变暗了 但是依旧无法进行裁剪之类的操作

    2015-08-24 10:41

  • wenju

    我建议你用原生的写,用js调;plus.android.runtimeMainActivity();这里会卡..

    2015-08-24 17:54

  • Funk (作者)

    用原生的写 是需要importClass之类的吗?我看你上次给我写的那段 我直接写成class导入 使用 是这样吗?

    2015-08-25 15:20

  • Funk (作者)

    回复 wenju:搞定了!!! 激动~~ 开心~~ 哈哈哈 冷静…… 说明一下 本身这段代码是没有问题了…… 主要是作用域的问题 我把和从相册选择共有的东西 放到全局上 就没有问题了~~

    2015-08-25 16:22

  • Funk (作者)

    回复 wenju:万分感谢~~~~~~~~~

    2015-08-25 16:22

  • 阿东

    @77821 主要是作用域的问题 具体怎么解决呢,我也遇到这个问题,求解答

    2015-10-11 22:27

  • Funk (作者)

    回复 阿东:我说了呀 把共有的东西放到全局上就好了呀 你弄不清楚就把所有的变量放到全局就好了 我是把这些放到全局:

    var IMAGE_UNSPECIFIED = "image/*";

    var PHOTOZOOM = 2; // 获取完图片返回key

    var PHOTOLAT = 1; // 剪裁完毕后返回key

    var main;

    var Intent;

    var MediaStore;

    var File;

    var Uri;

    2015-10-21 17:28

wenju

wenju - http://www.mescroll.com -- 精致的下拉刷新和上拉加载js框架. 主流APP案例, 一套代码多端运行~ 问题咨询请发私信哈~

var main = plus.android.runtimeMainActivity();
这里会有500毫秒的卡顿 如果是mui集成原生 建议还是把裁切的方法写在原生 用js调用

问题出在这里
var uri = entry.toLocalURL();

cropIntent.setDataAndType(uri, IMAGE_UNSPECIFIED);//这里的uri类型是Uri 不是String字符串路径

DCloud_Android_ST

DCloud_Android_ST

你先用原生实现调用系统裁剪,然后再转换NJS

  • liuzhuolin

    是不是可以这么理解:

    需求:

    我用HB开发应用,但是里面有个处理图片的功能,需要使用原生方式去实现,虽然可以用plus.android.invoke去调用(Js调用原生代码),但是按照官方所说会有500毫秒的延迟


    那么比较好的解决方法:

    使用AS开发完原生处理图片的功能,在把HB里写的www等相关文件放到AS中,然后使用AS打包,生成APK,安装使用。(把JS打包到原生的开发环境中,发布)

    2016-02-17 23:55

趴趴熊

趴趴熊

路飞大哥好,能把调整后的手机拍照剪切代码发一下吗?我昨天整了一天实在是没搞定。谢谢啦大哥

  • Funk (作者)

    我更新了问题,我不确定现在的mui在这块有没有改动……

    2015-12-10 12:46

  • 趴趴熊

    好的,我看看,谢啦。

    2015-12-10 12:56

  • 趴趴熊

    回复 Funk:路飞哥, var myfile = new File(outPutPath);console.log(outPutPath);

    var a = myfile.exists();

    alert(a);

    这里的a总是false;

    如果我不上传裁剪后的图片,裁剪完直接在页面显示出来,那么正常用该是document.getElementById('id').src = outPutPath吧

    2015-12-10 15:24

  • 趴趴熊

    回复 Funk:路飞哥,搞好了,谢谢。

    2015-12-10 16:24

  • Funk (作者)

    回复 趴趴熊:ok

    2015-12-10 16:28

  • 趴趴熊

    回复 Funk:路飞哥,这块又遇到问题了,在手机与电脑真机测试时没问题,但是打包后就无法跳转到图像剪切页面了。打断点只能跑到

    //裁切

    var cropIntent = new Intent("com.android.camera.action.CROP");

    cropIntent.setDataAndType(curCropUri, IMAGE_UNSPECIFIED);

    后面的就不执行了。我把所有的打包权限全加上也不行。望路飞哥帮忙看哈。谢谢

    2015-12-17 16:08

liuzhuolin

liuzhuolin

我也正在纳闷呢?写的JAVA代码怎么集成到hb里?
是不是可以这么理解:
需求:
我用HB开发应用,但是里面有个处理图片的功能,需要使用原生方式去实现,虽然可以用plus.android.invoke去掉用,但是按照官方所说会有500毫秒的延迟。

那么比较好的解决方法:
使用AS开发完原生处理图片的功能,在把HB里写的www等相关文件放到AS中,然后使用AS打包,生成APK,安装使用

ywg369

ywg369

打开眼界,原来可以这样

恰恰好

恰恰好

显示无法保存裁剪的图像 怎么办

笑一阵

笑一阵

真机打包之后 图片路径错误 改成他们说的_downloads也没用

ccfto

ccfto

make下~~~有空研究下 呵呵

DCloud_Android_ST

DCloud_Android_ST

var outPutPath = plus.io.convertLocalFileSystemURL("_www/images/5566.jpg"); 这个地址图片有吗?
不应该是entry.toLocalURL() 获取到的地址吗

  • Funk (作者)

    设定裁剪拍照的图片输出的目录,不是拍照得到的照片的目录 我是这样理解的:)

    2015-08-24 10:37

  • ywg369

    之前用的好好的,更新HBuilder,重新打包后,都不能使用了,知道原因么?@87929

    2017-02-09 14:11

  • 老哥教教我

    src: path,

    dst: '_doc/' + Math.ceil(Math.random() * 100000) + '.jpg',

    width: "150px",

    format: 'jpg',


                    clip: {  
    height: '150px'

    }

    设置裁剪成150px,为什么裁剪出来是75px

    2018-11-24 07:18

该问题目前已经被锁定, 无法添加新回复