在Canvas (Mobile)中拖动并调整图像大小

Drag and Resize image inside Canvas (Mobile)

本文关键字：调整 图像 拖动 Canvas Mobile      更新时间：2023-09-26

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

我设法从用户的手机获得base64图像，但不使用，因为我需要。因为我想让用户调整的大小和移动的图像，以适合椭圆形

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

我不知道是否有可能或有其他方法去做…你能帮我吗?

  1. 获取图库图像
  2. 在画布上蒙版一个椭圆形图像
  3. 允许用户拖动和缩放图像

但是我的问题是把图像放在画布上，调整大小并通过椭圆形窗体拖动。顺便说一下，椭圆形的形式将遮罩图像，但将由我，而不是用户:D

我不知道用户是否有办法切割椭圆形的图像，但我一定要告诉你，你可以根据你的适应使用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;">

这个例子是一个小的圆形图像，但是你可以根据自己的需要修改它

相关文章：