経緯
ゴール
調査
通常
1.を左右反転
1.を180度回転
2.を180度回転
2.を270度回転
1.を270度回転
2.を90度回転
1.を90度回転
スクリプト
プレビュー画像の回転
全体
FilePreview
function(e){
var images = e.target.files
var formData = new FormData
for(var image of images){
if(!image.type.match('image.*')) {
cotinue
}
formData.append('image', image)
var reader = new FileReader()
reader.onload = (function(theFile){
return function(e){
exif.getData(theFile, function(){
rotateBase64Image(e.target.result, theFile.exifdata.Orientation, function(url){
})
})
}
})(image)
reader.readAsDataURL(image)
}
}
function rotateBase64Image(base64Data, orientation, callback){
var canvas = document.createElement('canvas')
var context
var image = new Image()
image.onload = function(){
switch (orientation) {
case 2:
canvas.height = image.height
canvas.width = image.width
context = canvas.getContext('2d')
context.scale(-1, 1)
context.translate(-image.width, 0)
break;
case 3:
canvas.height = image.height
canvas.width = image.width
context = canvas.getContext('2d')
context.translate(canvas.width, canvas.height)
context.rotate(Math.PI)
break;
case 4:
canvas.height = image.height
canvas.width = image.width
context = canvas.getContext('2d')
context.scale(1,-1)
context.translate(0, -canvas.height)
break;
case 5:
canvas.height = image.width
canvas.width = image.height
context = canvas.getContext('2d')
context.scale(1, -1)
context.rotate(-Math.PI/2)
break;
case 6:
canvas.height = image.width
canvas.width = image.height
context = canvas.getContext('2d')
context.rotate(Math.PI/2);
context.translate(0, -canvas.width)
break;
case 7:
canvas.height = image.width
canvas.width = image.height
context = canvas.getContext('2d')
context.scale(-1, 1)
context.translate(-canvas.width, canvas.height)
context.rotate(-Math.PI/2)
break;
case 8:
canvas.height = image.width
canvas.width = image.height
context = canvas.getContext('2d')
context.rotate(-Math.PI/2);
context.translate(-canvas.height, 0)
break;
default:
callback(base64Data)
return
break;
}
context.drawImage(image, 0, 0, image.width, image.height);
callback(canvas.toDataURL())
}
image.src = base64Data
}
感想