<div class="form-list"> <span>*设备(枪)照片</span> <input name="img" type="file" accept="image/*" id="icon_input" onchange="checkOrientation(this)"> </div> 请根据以上代码,将手机拍照回来的照正进行旋转放正,并直接完善代码。
时间: 2023-10-08 22:04:38 浏览: 64
要将手机拍摄的照片进行旋转矫正,你可以使用以下代码示例:
```javascript
function checkOrientation(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
var img = new Image();
img.onload = function() {
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
// 获取照片的宽度和高度
var width = img.width;
var height = img.height;
// 设置画布的宽度和高度
canvas.width = width;
canvas.height = height;
// 判断照片的方向并进行旋转
EXIF.getData(img, function() {
var orientation = EXIF.getTag(this, 'Orientation');
switch (orientation) {
case 1:
// 无需旋转
ctx.drawImage(img, 0, 0, width, height);
break;
case 6:
// 顺时针旋转90度
canvas.width = height;
canvas.height = width;
ctx.rotate(Math.PI / 2);
ctx.drawImage(img, 0, -height, width, height);
break;
case 8:
// 逆时针旋转90度
canvas.width = height;
canvas.height = width;
ctx.rotate(-Math.PI / 2);
ctx.drawImage(img, -width, 0, width, height);
break;
case 3:
// 旋转180度
ctx.rotate(Math.PI);
ctx.drawImage(img, -width, -height, width, height);
break;
}
// 将旋转后的照片保存为新的文件
var rotatedImage = canvas.toDataURL('image/jpeg', 1.0);
// 可以将旋转后的照片上传或进行其他操作
// ...
});
};
img.src = e.target.result;
};
reader.readAsDataURL(input.files[0]);
}
}
```
以上代码使用了一个名为 `EXIF` 的 JavaScript 库来获取照片的方向信息。你需要在代码中引入 `exif.js` 库文件,以便获取正确的照片方向信息。
请注意,以上代码只是一个示例,你可能需要根据实际需求进行适当的调整和修改。同时,由于涉及到前端和图像处理,建议在实际使用时进行充分的测试和验证。
阅读全文