在画布（移动）内拖动和调整图像大小

Question

我正在使用 Ionic Framework 创建一个 android 应用程序。 这个应用程序有一个椭圆形，我想在它后面放一个图像。

我设法从用户​​的手机中获取了 base64 图像，但没有根据需要使用。 因为我打算让用户调整大小和移动图像以适应椭圆形。

我认为使用 Canvas 是最好的主意，但我根本不知道该怎么做。我学会了如何在 Canvas 上放置图像，但不知道如何在移动设备上调整大小（捏手指）。

我不知道它是否可能或任何其他方式...你能帮我吗？

1. 获取图库图片
2. 用椭圆形图像遮罩的画布
3. 允许用户通过捏合移动拖动图像并调整其大小

但我的问题是将图像放在画布上，调整大小并拖动椭圆形。顺便说一句，椭圆形会掩盖图像，但将由我而不是用户制作：D

Answer 1

我不知道用户是否有办法将椭圆形的图像剪掉，但我一定会告诉你，你可以根据你的适应情况用 CSS 修改。

从相册中获取图片

$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
    });

从相机设备拍照

$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
    });

}

从表格到图片的例子

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

这个小圆形图片的例子，不过你可以随意修改成这个。