我记录

ionic 拍照上传

掷鸡蛋者 发布于 2015/6/9 14:32 浏览: 3193 回复: 0 所在分类:ionic

插件:https://github.com/apache/cordova-plugin-camera 


一、安装两个插件

cordova plugin add org.apache.cordova.camera

cordova plugin add org.apache.cordova.file-transfer


二、参数

{

  quality : 75, // 100表示无损;默认是50%压缩

  destinationType : Camera.DestinationType.DATA_URL,

  sourceType : Camera.PictureSourceType.CAMERA,

  allowEdit : true,

  encodingType: Camera.EncodingType.JPEG,

  targetWidth: 100,

  targetHeight: 100,

  popoverOptions: CameraPopoverOptions,

  saveToPhotoAlbum: false

};

Camera.DestinationType = {

    DATA_URL : 0,      // Return image as base64-encoded string

    FILE_URI : 1,      // Return image file URI(默认值)

    NATIVE_URI : 2     // Return image native URI (e.g., assets-library:// on iOS or content:// on Android)

};

Camera.PictureSourceType = {

    PHOTOLIBRARY : 0, // 图库

    CAMERA : 1, // 摄像头(默认值)

    SAVEDPHOTOALBUM : 2

};

Camera.EncodingType = {

    JPEG : 0,               // 默认值 Return JPEG encoded image

    PNG : 1                 // Return PNG encoded image

};

//Only works when PictureSourceType is PHOTOLIBRARY or SAVEDPHOTOALBUM

Camera.MediaType = {

    PICTURE: 0,    // 默认值 allow selection of still pictures only. DEFAULT. Will return format specified via DestinationType

    VIDEO: 1,      // allow selection of video only, WILL ALWAYS RETURN FILE_URI

    ALLMEDIA : 2   // allow selection from all media types

};

Camera.Direction = {

    BACK : 0,      // 默认值:后置摄像头,Use the back-facing camera

    FRONT : 1      // 前置摄像头,Use the front-facing camera

};

教程:http://learn.ionicframework.com/formulas/cordova-camera/ 

用于拍照、视频等

.controller('CameraCtrl', function ($scope) {        

     $scope.takePic = function() {

        var options =   {

            quality: 50,

            destinationType: Camera.DestinationType.FILE_URI,

            sourceType: 1,      // 0:Photo Library, 1=Camera, 2=Saved Photo Album

            encodingType: 0     // 0=JPG 1=PNG

        }

        navigator.camera.getPicture(onSuccess,onFail,options);

    }

    var onSuccess = function(FILE_URI) {

        console.log(FILE_URI);

        $scope.picData = FILE_URI;

        $scope.$apply();

    };

    var onFail = function(e) {

        console.log("On fail " + e);

    }


    $scope.send = function() {   


        var myImg = $scope.picData;


        var options = new FileUploadOptions();

        options.fileKey="post";

        options.chunkedMode = false;


        var params = {};

        params.user_token = localStorage.getItem('auth_token');

        params.user_email = localStorage.getItem('email');

        options.params = params;


        var ft = new FileTransfer();

        ft.upload(myImg, encodeURI("https://example.com/posts/"), onUploadSuccess, onUploadFail, options);

    }


三、上传部分

1、js 中添加引用

<script src="js/ng-cordova.min.js"></script>


2、添加依赖注入

var example = angular.module('starter', ['ionic', 'ngCordova']);


3、代码

example.controller("ExampleController", function($scope, $cordovaFileTransfer) {

    $scope.upload = function() {

          $cordovaFileTransfer.upload("http://192.168.56.1:1337/file/upload", "/android_asset/www/img/ionic.png", options)

    }

}); 


掷鸡蛋者2015/6/9 14:32

留下脚印

踩一脚
copyright © 用微博记录这个时代 2010-2014
Powered by 我记录2.0
Processed in 0 seconds, 0 queries