在Canvas（Mobile）中拖曳并调整图片大小 [英] Drag and Resize image inside Canvas (Mobile)

问题描述

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

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

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

我不知道它是可能的还是任何其他方式做它...你能帮助我吗？

1. 获取图库图片


2. 穿上用椭圆形图像遮蔽的帆布


3. 允许用户使用捏移动来拖动和调整图片大小

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

解决方案

知道是否有一种方法来削减用户的椭圆形图像，但我会确保告诉你，你可以修改与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）{
 //发生错误，向用户显示一条消息
}）; 
  

从相机设备拍摄照片

  $ 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）{
 //发生错误，向用户显示一条消息
}）; 
 
} 
  

从表单到图片的示例

 < div style =background：url（{{photo}}）; background-size：cover; background-position：center; height：210px; > 
  

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

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

解决方案

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.

这篇关于在Canvas（Mobile）中拖曳并调整图片大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！