Question

我正在制作离子应用，需要我以16：9的宽高比裁剪图像。到目前为止，我找不到任何插件。

我正在使用带有以下代码的离子相机插件

var opt : CameraOptions = {
        quality: 20,
        targetWidth:  1920,
        targetHeight: 1080,
        allowEdit: true,
        destinationType: this.camera.DestinationType.DATA_URL,
        sourceType: this.camera.PictureSourceType.PHOTOLIBRARY  ,
        encodingType: this.camera.EncodingType.JPEG,
        mediaType: this.camera.MediaType.PICTURE
    };

如果目标高度和目标宽度相同，它可以正常工作。但如果它们不相同，则忽略目标高度和目标宽度。我希望裁剪为16：9比例的矩形形状。这甚至可用于离子？

Answer 1

你可以使用cropper.js这是一个非常棒的图像裁剪库

https://fengyuanchen.github.io/cropperjs/

安装

npm install cropperjs

包含文件：

<link  href="/path/to/cropper.css" rel="stylesheet">
<script src="/path/to/cropper.js"></script>

in Html

<div>
  <img id="image" src="picture.jpg">
</div>

现在在控制器中

  image = document.getElementById('image');
  var cropper = new Cropper(image, {
  aspectRatio: 16 / 9,
  crop: function(e) {
    console.log(e.detail.x);
    console.log(e.detail.y);
    console.log(e.detail.width);
    console.log(e.detail.height);
    console.log(e.detail.rotate);
    console.log(e.detail.scaleX);
    console.log(e.detail.scaleY);
  }
});

离子相机插件仅以1：1（方形）图像裁剪图像

1 个答案: