キャンバス（モバイル）内で画像をドラッグ＆リサイズ

Question

Ionic Frameworkでアンドロイドアプリを作成しています。 このアプリの背後に画像を入れたい楕円形です。

私はbase64イメージをユーザーの電話から取得できましたが、必要に応じて使用することはできませんでした。 原因私は、ユーザにのサイズ変更とをの画像を楕円形に合わせて移動させる予定です。

私はキャンバスがベストアイデアだと思っていましたが、どうやってそれを行うのか分かりません。私はキャンバスにイメージを置く方法を学びましたが、モバイル（ピンチフィンガー）でサイズを変更する方法ではありません。

可能性があるのか​​他の方法でいいのかわかりません...助けてくれますか？

1. ユーザーがドラッグしてピンチの動き

で画像のサイズを変更することを許可するオーバル形状画像

でマスクされたキャンバスの上に置くのギャラリー画像

を取得します。しかし、私の問題は置いてありますキャンバス上にイメージを表示し、楕円形のサイズを変更してドラッグします。ちなみに、楕円形はイメージをマスクしますが、ユーザではなく私が作ってくれます：D

Answer 1

楕円形のイメージをユーザーがカットする方法があるかどうかはわかりませんが、宿泊施設に応じてCSSを変更できることを伝えてください。ゲーラリーから

のget絵

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

テイクカメラ装置からの映像画像

<div style="background: url({{photo}}); background-size: cover;background-position: center;height:210px;"> 

小さな円形画像のこの例のフォームから

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

} 

例が、あなたのことができ必要に応じてこれを変更してください。