角度裁剪的图像文件大小变大

Question

我正在使用此插件angular-image-cropper裁剪我的图片，并ng-file-upload上传我的图片。

问题是我的图像尺寸是1955px * 1300px，大小约为194kb。

在裁剪为800px * 450px后，尺寸变为550kb左右。

这是对的吗？因为它的原始尺寸几乎要大4倍

我的HTML代码：

<div class="form-group">
     <label class="control-label">Cover</label>
     <input type="file" ngf-select="uploadFiles($files,$invalidFiles)" name="cover" id="cover" ngf-pattern="image/*" accept="image/*"
       ng-model="upload.coverSource" ngf-max-size="512KB" ngf-min-width="800" img-cropper-fileread image="upload.coverSource"
       disable-invalid-styling="true" disable-valid-styling="true">

      <canvas ng-show="upload.coverSource" width="500" height="281" id="canvas" image-cropper image="upload.coverSource"
        cropped-image="category.coverCrop" crop-width="800" crop-height="450" keep-aspect="true" crop-area-bounds="bounds">
      </canvas>
</div>

在我的角度里，我只是尝试了console.log这两个：

console.log($scope.upload.coverSource);

// and i need to convert it to blob first to get the data.
// category.coverCrop value is in data:base64

var cover = Upload.dataUrltoBlob(category.coverCrop);
console.log(cover);

以下是结果截图：

任何使尺寸相同或更小的解决方案？

Answer 1

在我测试的大多数裁剪器中，生成的图像被转换为​​原始格式，使其更大，在您的信息的情况下，看起来图像是原始base64格式，这里也是一个示例一个非常高级的编辑器有一个类似的结果：https://www.photoeditorsdk.com/事情是compresion或任何进一步处理是一个不同于裁剪的任务，并且通常不由这个libs处理;你怎么解决它？在我们的案例中，我们与cloudinary.com集成并使用他们的转换API来确保我们所有的图像都具有合适的尺寸和质量。