app生成的图片旋转再上传
时间: 2023-11-30 18:05:11 浏览: 37
在App中生成的图片,有时候可能会存在旋转的问题,这是因为图片的元数据中可能包含了旋转信息,导致在某些设备或者浏览器上显示时自动旋转了。
为了解决这个问题,我们可以使用JavaScript来读取图片的元数据,判断是否包含旋转信息,如果存在旋转信息,则将其旋转回来,并上传旋转后的图片。
下面是一个示例代码:
```
// 读取图片元数据
function getOrientation(file, callback) {
var reader = new FileReader();
reader.onload = function(event) {
var view = new DataView(event.target.result);
if (view.getUint16(0, false) != 0xFFD8) {
return callback(-2);
}
var length = view.byteLength, offset = 2;
while (offset < length) {
var marker = view.getUint16(offset, false);
offset += 2;
if (marker == 0xFFE1) {
if (view.getUint32(offset += 2, false) != 0x45786966) {
return callback(-1);
}
var little = view.getUint16(offset += 6, false) == 0x4949;
offset += view.getUint32(offset + 4, little);
var tags = view.getUint16(offset, little);
offset += 2;
for (var i = 0; i < tags; i++) {
if (view.getUint16(offset + (i * 12), little) == 0x0112) {
return callback(view.getUint16(offset + (i * 12) + 8, little));
}
}
}
else if ((marker & 0xFF00) != 0xFF00) {
break;
}
else {
offset += view.getUint16(offset, false);
}
}
return callback(-1);
};
reader.readAsArrayBuffer(file.slice(0, 64 * 1024));
}
// 旋转图片
function rotateImage(file, orientation, callback) {
var img = new Image();
img.onload = function() {
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var width = img.width, height = img.height;
if ([5, 6, 7, 8].indexOf(orientation) > -1) {
canvas.width = height;
canvas.height = width;
} else {
canvas.width = width;
canvas.height = height;
}
switch (orientation) {
case 2: ctx.transform(-1, 0, 0, 1, width, 0); break;
case 3: ctx.transform(-1, 0, 0, -1, width, height); break;
case 4: ctx.transform(1, 0, 0, -1, 0, height); break;
case 5: ctx.transform(0, 1, 1, 0, 0, 0); break;
case 6: ctx.transform(0, 1, -1, 0, height, 0); break;
case 7: ctx.transform(0, -1, -1, 0, height, width); break;
case 8: ctx.transform(0, -1, 1, 0, 0, width); break;
default: break;
}
ctx.drawImage(img, 0, 0);
canvas.toBlob(function(blob) {
callback(blob);
}, 'image/jpeg', 0.8);
};
img.src = URL.createObjectURL(file);
}
// 上传图片
function uploadImage(file) {
// 这里可以使用你自己的上传代码
}
// 处理图片
function handleImage(file) {
getOrientation(file, function(orientation) {
rotateImage(file, orientation, function(rotatedBlob) {
// 上传旋转后的图片
uploadImage(rotatedBlob);
});
});
}
```
在这个示例代码中,我们首先使用getOrientation()函数读取图片的元数据,获取到图片的旋转信息。然后使用rotateImage()函数将图片旋转回来,并转换成Blob对象。最后使用uploadImage()函数上传旋转后的图片。
你可以将这个代码集成到你的App中,根据你的上传方式来修改uploadImage()函数。同时,你也可以根据你的需求来修改旋转后的图片的质量、格式等参数。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![application/x-rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)