32963

Drag and Resize image inside Canvas (Mobile)

Question:

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 <strong>resize</strong> and <strong>move</strong> 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?

<ol><li>Get the gallery image</li> <li>Put on Canvas masked with an Oval Shape Image</li> <li>Allow the user to drag and resize the image with Pinch movement</li> </ol>

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

Answer1:

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.

Recommend

  • Draw multiple shapes in different views
  • Added items to JPanel dont' show up
  • How can I develop this kind of Button
  • How to create image from RGB values in android [closed]
  • How to make Floating Action Button background Gradient?
  • Pandas - Columns not read though Present
  • UITabBarItem image created in code doesn’t appear
  • Subtractive Filter on Android ImageView (Cut-out a feathered oval from an image or view object)
  • Android BitMapDescriptor from XML shape transparent is black
  • Android - Multiple colors & size in drawable shape style
  • How to create a non rectangular window form in c#?
  • how to use draggable and click separately in kineticjs?
  • How do I calculate radius of curvature from discrete samples?
  • Pandas Merging 101
  • Strange behavior from affine transform rotation on iOS
  • Use Boost Preprocessor to Parse sequence of elements
  • Java Paint if x = location do this else do this
  • I processed fingerprints. How do I compare the resuts?
  • Simulating drags inside a scrollview
  • What's wrong with this mysql create trigger statement
  • moving an object without actually touching the object
  • iOS : Implementing the KTPhotoBrowser API
  • jQuery.on “touchstart mousedown” - both events are triggered on touchscreen device
  • iPad Simulator WebView/Google Maps API Issue
  • return common fields in two files
  • find xml element by attribute
  • JQuery UI selectable plugin - Multiple mouse drag selection and unselect option
  • Change color of row programmatically in WatchKit
  • Can't CTRL+Drag NSButton to custom NSView header
  • input type=“file” accept=“image/*” doesn't work in phone gap?
  • jquery draggable stop event
  • How to reshape a 3D numpy array?
  • How to change placeholder text in an autocomplete activity of android google place?
  • init_seg and warning C4073 from library code?
  • Display java JPanel in a JFrame
  • How to convert from System.Drawing.Color to Excel.ColorFormat in C#? Change comment color
  • Join two tables and save into third-sql
  • How to model a transition system with SPIN
  • ORA-29908: missing primary invocation for ancillary operator
  • Converting MP3 duration time