javascript - 在 Canvas 中拖动图像并调整其大小(移动设备)

Question

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

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

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

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

1. 获取图库图片
2. 放在 Canvas 上，用椭圆形图像遮盖
3. 允许用户通过捏合移动来拖动图像并调整图像大小

但我的问题是将图像放在 Canvas 上，调整大小并拖动椭圆形。顺便说一句，椭圆形会掩盖图像，但将由我而不是用户制作: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;">

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