Question

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

我设法从用户的手机上获取了base64图像，但没有按照我的需要使用。因为我打算让用户调整大小并移动图像以适合椭圆形状。

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

我不知道是否有可能或其他方式做到这一点......你能帮助我吗？

获取图库图片
穿上用椭圆形图像遮盖的画布
允许用户使用“捏合移动”拖动图像并调整其大小

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

Answer 1

我不知道是否有办法用户剪切椭圆形图像，但我会确保告诉你可以根据你的住宿用CSS修改。

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

从相机设备拍照

$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;">

这是一个小圆形图像的示例，但您可以根据需要将其修改为此。

在Canvas（移动）中拖动和调整图像大小

1 个答案: