当用户从某些移动设备上传图片时,我的网站存在问题。图像旋转90度。
我尝试使用Exif.js
成功处理并旋转图像。 (https://github.com/exif-js/exif-js)
问题是如何将图像(带有id="RotatedImage"
的示例)再次放回输入文件类型(带id="inputImage"
的示例)或将其提交到表单?
function orientation(img, canvas) {
// Set variables
var ctx = canvas.getContext("2d");
ctx.imagesmoothingenabled = false;
var exifOrientation = '';
var width = img.width,
height = img.height;
console.log(width);
console.log(height);
// Check orientation in EXIF metadatas
EXIF.getData(img, function() {
var allMetaData = EXIF.getAllTags(this);
exifOrientation = allMetaData.Orientation;
console.log('Exif orientation: ' + exifOrientation);
});
// set proper canvas dimensions before transform & export
if (jQuery.inArray(exifOrientation, [5, 6, 7, 8]) > -1) {
canvas.width = height;
canvas.height = width;
} else {
canvas.width = width;
canvas.height = height;
}
// transform context before drawing image
switch (exifOrientation) {
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:
ctx.transform(1, 0, 0, 1, 0, 0);
}
// Draw img into canvas
ctx.drawImage(img, 0, 0, width, height);
}