Ionic-Angular.js 拍照并发送到服务器

Question

所以我设法使用自定义指令通过 Angular.js 将图像上传到我的服务器。我还设法从 Cordova 实现了相机功能。现在我想将图像发送到服务器

我的控制器：

$scope.getPhoto = function() {
            console.log("foncton of picture");
            navigator.camera.getPicture(onSuccess, onFail, { quality: 75, targetWidth: 320,
            targetHeight: 320, destinationType: 0 }); 
            //destination type was a base64 encoding
            function onSuccess(imageData) {

                console.log("success");

                //preview image on img tag
                $('#image-preview').attr('src', "data:image/jpeg;base64,"+imageData);
                console.log("success imageData");
                console.log(imageData);


                //setting scope.lastPhoto 
                $scope.lastPhoto = dataURItoBlob("data:image/jpeg;base64,"+imageData);
                //$localStorage.lastPhoto=dataURItoBlob("data:image/jpeg;base64,"+imageData);
                console.log("$localStorage.lastPhoto");
                console.log(imageData);
            }
            function onFail(message) {
                alert('Failed because: ' + message);
            }
        } 
        function dataURItoBlob(dataURI) {
        // convert base64/URLEncoded data component to raw binary data held in a string
         var byteString = atob(dataURI.split(',')[1]);
         var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]

         var ab = new ArrayBuffer(byteString.length);
         var ia = new Uint8Array(ab);
         for (var i = 0; i < byteString.length; i++)
         {
            ia[i] = byteString.charCodeAt(i);
         }

         var bb = new Blob([ab], { "type": mimeString });
         return bb;
        }   


var objInsc = new Object();
objInsc.imageJson=$scope.lastPhoto;

$http.post('http://@ip:8080/elodieService/evenements/',objInsc).success(function(response, status, headers, config){
             alert("SUCCESS ajout dans la table evenement!!");
});

我发现 imageJson 为空

我该怎么办，请帮帮我:(

Answer 1

我已经在我的一个项目中实现了这个功能，我会告诉你怎么做，它需要付出很多努力才能让它发挥作用。

首先：将图片uri转base64转mime字符串

这是向服务器发送图片最棘手的部分。

var encodeImageUri = function(imageUri) {
            var deferred = $q.defer();
            var c = document.createElement("canvas");
            var ctx = c.getContext("2d");
            var img = new Image();

            img.onload = function() {

                c.width = this.width;
                c.height = this.height;
                ctx.drawImage(img, 0, 0);
                var dataURI = c.toDataURL("image/jpeg");
                var byteString = atob(dataURI.split(",")[1]);
                var mimeString = dataURI.split(",")[0].split(":")[1].split(";")[0];
                var ab = new ArrayBuffer(byteString.length);
                var ia = new Uint8Array(ab);
                for (var i = 0; i < byteString.length; i++) {
                    ia[i] = byteString.charCodeAt(i);
                }
                var bb = new Blob([ab], { "type": mimeString });

                deferred.resolve(bb);
            };
            img.src = imageUri;
            return deferred.promise;
        };

第二：编写send方法发送到服务器：

var sendPhoto = function (sessionID, photoURI) {
            var deferred = $q.defer();
            if (photoURI == null || photoURI == "") {
                deferred.resolve(true);
            }

            encodeImageUri(photoURI).then(function(photoData) {
                var fd = new FormData();
                fd.append("PhotoData", photoData);
                $http.post("*****YOUR URL******", fd, {
                        headers: {
                            'Content-Type': undefined
                        }
                    })
                    .success(function(data, status, headers) {
                        deferred.resolve(data);
                    })
                    .error(function(data, status, headers) {

                        deferred.reject(data);
                    });
            });

            return deferred.promise;
        };

说明： 1. 你从 $q 服务创建一个延迟对象。 2.您检查 photoUrl 的空引用。 3.您创建一个FormData，因为照片需要作为formData发送。 3.调用http post，将headers的content-type改为undefined 4.处理回电 5. 兑现承诺。

希望对您有所帮助，如果您需要任何帮助，请告诉我。快乐编码。 ;)