我正在使用 Ionic Framework 创建一个 Android 应用程序。 这个应用程序有一个椭圆形形状,我想在其后面放置一个图像。
我设法从用户的手机获取 Base64 图像,但没有按照我的需要使用。 因为我打算让用户调整大小和移动图像以适应椭圆形。
我认为使用 Canvas 是最好的主意,但我根本不知道该怎么做。我学会了如何将图像放在 Canvas 上,但没有学会如何在移动设备上调整大小(捏手指)。
我不知道是否可能或有其他方法可以做到这一点...你能帮助我吗?
- 获取图库图片
- 放在 Canvas 上,用椭圆形图像遮盖
- 允许用户通过捏合移动来拖动图像并调整图像大小
但我的问题是将图像放在 Canvas 上,调整大小并拖动椭圆形。顺便说一句,椭圆形会掩盖图像,但将由我而不是用户制作: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;">
这是一个小圆形图像的示例,但您可以根据需要将其修改为这个。
关于javascript - 在 Canvas 中拖动图像并调整其大小(移动设备),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39983568/