从$cordovaCamera获取 Blob:URL，不是有效的 base64 字符串

Question

我正在开发Cordova移动应用程序，我需要在服务器上上传图像。我想将 base64 字符串发送到我的 webapi，在那里我可以将 base64 转换为图像并将图像保存在服务器上。我在控制器中$cordovaCamera

这样做

$scope.takePicture = function () {
        var options = {
            quality: 75,
            destinationType: Camera.DestinationType.DATA_URL,
            sourceType: Camera.PictureSourceType.CAMERA,
            allowEdit: true,
            encodingType: Camera.EncodingType.JPEG,
            targetWidth: 100,
            targetHeight: 100,
            popoverOptions: CameraPopoverOptions,
            saveToPhotoAlbum: false,
            correctOrientation: true
        };
        $cordovaCamera.getPicture(options).then(function (imageData) {
            console.clear();
            console.log(imageData);
            $scope.imgURI = imageData;
            $rootScope.ByteData = "data:image/jpeg;base64," + imageData;
        }, function (err) {
            var alertPopup = $ionicPopup.alert({
                title: 'Invalid Image',
                template: 'Please upload correct formated image!'
            });
        });
    }

但是每当我运行此代码时，我都会以特定 URL 的形式获得图像数据，例如"blob：http%3A//localhost%3A4400/f6c7fc38-a18f-484e-94d1-a52bb4e5fee2"，在这种情况下如何获得 base64 正确的字符串。在我看来，我正在做

<ion-view view-title="{{application.CompanyName}}">
    <ion-nav-buttons side="primary">
        <button class="button" ng-click="saveApplication()">
            SAVE
        </button>
        <button class="button" ng-click="goBack()">
            BACK
        </button>
    </ion-nav-buttons>
    <ion-content ng-controller="AppDetailCtrl">
        <img ng-show="imgURI !== undefined" width="343px" height="300px" ng-src="{{imgURI}}">
        <img ng-show="imgURI === undefined" width="343px" height="300px" ng-src="http://placehold.it/300x300">
        <button class="button" ng-click="takePicture()">Upload Picture</button>
    </ion-content>
</ion-view>

Answer 1

实际上我想将该 blob 图像 url 类型转换为 base64 字符串，但我缺少以下转换方法，例如

function convertImgToBase64(url, callback, outputFormat) {
                var canvas = document.createElement('CANVAS'),
                    ctx = canvas.getContext('2d'),
                    img = new Image;
                img.crossOrigin = 'Anonymous';
                img.onload = function () {
                    var dataURL;
                    canvas.height = img.height;
                    canvas.width = img.width;
                    ctx.drawImage(img, 0, 0);
                    dataURL = canvas.toDataURL(outputFormat);
                    callback.call(this, dataURL);
                    canvas = null;
                };
                img.src = url;
            }
            convertImgToBase64(imageData, function (base64Img) {
                $rootScope.ByteData = base64Img;
            });