Skip to content

Instantly share code, notes, and snippets.

@Tenderfeel
Created February 25, 2020 05:56
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Tenderfeel/8c71f0036ae035e07dadc108064222ae to your computer and use it in GitHub Desktop.
Save Tenderfeel/8c71f0036ae035e07dadc108064222ae to your computer and use it in GitHub Desktop.
画像の向きを修正するやつ(主にスマホ向け)
/**
* 画像の向きを修正する
* https://stackoverflow.com/questions/20600800/js-client-side-exif-orientation-rotate-and-mirror-jpeg-images
* @param {(File|Blob)} file 画像
* @return {Promise.<{src, width, height}>}
*/
export function getDataUrl(file) {
return new Promise(resolve => {
const callback = function(srcOrientation) {
const reader2 = new FileReader();
reader2.onload = function(e) {
const srcBase64 = e.target.result;
const img = new Image();
img.onload = function() {
const width = img.width,
height = img.height,
canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d');
// set proper canvas dimensions before transform & export
if ([5, 6, 7, 8].includes(srcOrientation)) {
canvas.width = height;
canvas.height = width;
} else {
canvas.width = width;
canvas.height = height;
}
// transform context before drawing image
switch (srcOrientation) {
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;
}
// draw image
ctx.drawImage(img, 0, 0);
// export
resolve({
src: canvas.toDataURL(),
width,
height
});
};
img.src = srcBase64;
};
reader2.readAsDataURL(file);
};
const reader = new FileReader();
reader.onload = function(e) {
const view = new DataView(e.target.result);
if (view.getUint16(0, false) != 0xffd8) return callback(-2);
let length = view.byteLength,
offset = 2;
while (offset < length) {
const marker = view.getUint16(offset, false);
offset += 2;
if (marker == 0xffe1) {
if (view.getUint32((offset += 2), false) != 0x45786966)
return callback(-1);
const little = view.getUint16((offset += 6), false) == 0x4949;
offset += view.getUint32(offset + 4, little);
const tags = view.getUint16(offset, little);
offset += 2;
for (let 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);
});
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment