php 图片压缩旋转,一行代码实现移动端拍照旋转、压缩问题

在h5头像拍照上传的时候,ios浏览器会逆时针旋转90度,导致上传的效果不如预期。

如何解决

经过网上查找得知可以用 extjs 来获取图片的元数据,通过 orientation 属性来判断拍照的图片是否被旋转了

通过上图可以看出,在 orientation = 6 的情况下代表图片被逆时针旋转了 90 度,所以只需要针对这种情况对图片做相应的旋转即可Exif.getData(file, function(){

let Orientation = Exif.getTag(this, 'Orientation');

if (Orientation === 6) {

// 旋转图片

}

});

由于 exif 只提供判断图片角度,我们还需要对图片进行旋转等等操作,实在是很麻烦,于是我封装了一个工具类 ImageFile 来更加方便获取拍照后的二进制文件,而且可以通过参数配置图片大小,不小再写额外的代码压缩。

ImageFile获取拍照文件

function fileChange(ev) {

let file = ev.target.files[0];

ImageFile.getImageFileData(file, { width: 300, height: 400, cover: false }).then(blob => {

// 上传图片

let fd = new FormData();

fd.append('file', blob);

// ajax上传

});

}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值