我使用这个插件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);
型
以下是结果截图:
的数据
有什么解决方案使大小相同或更小?
2条答案
按热度按时间mm9b1k5b1#
在我测试过的大多数裁剪器中,生成的图像被翻译成原始格式,使其更大,在您的信息的情况下,看图像是原始base64格式,这里还有一个非常高级的编辑器的例子,它有类似的结果:https://www.photoeditorsdk.com/:压缩或任何进一步的处理与裁剪是不同的任务,通常不被这个库处理;那你怎么解决呢?在我们的例子中,我们与www.example.com集成cloudinary.com,并使用他们的转换API来确保我们所有的图像具有正确的大小和质量。
jc3wubiy2#
在图像中-裁剪器将格式类型从png更改为jpeg(这可能会给予大小接近但不完全相同)