angularjs Angular 裁剪的图像文件大小变大

44u64gxh  于 2023-08-02  发布在  Angular
关注(0)|答案(2)|浏览(125)

我使用这个插件angular-image-cropper裁剪我的图像和ng-file-upload上传我的图像。
问题是,假设我的图像尺寸是1955px * 1300px,大小约为194kb。
在我裁剪到800px * 450px之后,大小变成了大约550kb。
对吗?因为它比原来大了四倍
我的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>

字符串
在我的angular我只是试图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);


以下是结果截图:


的数据
有什么解决方案使大小相同或更小?

mm9b1k5b

mm9b1k5b1#

在我测试过的大多数裁剪器中,生成的图像被翻译成原始格式,使其更大,在您的信息的情况下,看图像是原始base64格式,这里还有一个非常高级的编辑器的例子,它有类似的结果:https://www.photoeditorsdk.com/:压缩或任何进一步的处理与裁剪是不同的任务,通常不被这个库处理;那你怎么解决呢?在我们的例子中,我们与www.example.com集成cloudinary.com,并使用他们的转换API来确保我们所有的图像具有正确的大小和质量。

jc3wubiy

jc3wubiy2#

在图像中-裁剪器将格式类型从png更改为jpeg(这可能会给予大小接近但不完全相同)

相关问题