Drag And Resize Image Inside Canvas (mobile)

I'm creating an android app with Ionic Framework. This app has an oval shape in which I want put an image behind it. I managed to get the base64 image from user's phone but not to

Solution 1:

I do not know if there is a way to cut the image of oval way by the user, but I would make sure to tell you that you can modify with CSS according to your accommodation.

get picture from galery

$scope.getPicture = function() {
    var options = {
        quality: 50,
        targetWidth: 512,
        targetHeight: 512,
        destinationType: Camera.DestinationType.DATA_URL,
        sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
        encodingType: Camera.EncodingType.JPEG,
        correctOrientation: true,
        popoverOptions: CameraPopoverOptions,
        saveToPhotoAlbum: false
    };

    $cordovaCamera.getPicture(options).then(function(imageData) {
        $scope.photo = "data:image/jpeg;base64," + imageData;
    }, function(err) {
        // An error occured. Show a message to the user
    });

take picture from camera device

$scope.takePicture = function() {

    var options = {
        quality: 50,
        targetWidth: 512,
        targetHeight: 512,
        destinationType: Camera.DestinationType.DATA_URL,
        sourceType: Camera.PictureSourceType.CAMERA,
        encodingType: Camera.EncodingType.JPEG,
        correctOrientation: true,
        popoverOptions: CameraPopoverOptions,
        saveToPhotoAlbum: false,
    };

    $cordovaCamera.getPicture(options).then(function(imageData) {
        $scope.photo = "data:image/jpeg;base64," + imageData;
    }, function(err) {
        // An error occured. Show a message to the user
    });

}

Example from form to image

<divstyle="background: url({{photo}}); background-size: cover;background-position: center;height:210px;">

This example of a small circular image, but you can modify it to this as you want.