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 use as I need. Cause I intend to let the user resize and move the image to fit the oval shape.

I thought use Canvas was the best idea, but I simply don't know how to do it. I learned how to put an image on Canvas, but not how to resize on mobile (pinch finger).

I don't know if its possible or any other way to do it... Can you help me?

1. Get the gallery image
2. Put on Canvas masked with an Oval Shape Image
3. Allow the user to drag and resize the image with Pinch movement

But my problem is to put the image on a Canvas, resize and drag through the oval form. By the way the oval form will mask the image, but will be made by me not the user :D

回答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

<div style="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.