Exif Orientation Sample

HTML

<p>Original</p>
<img id="image" src="https://storage.pardot.com/190602/878/IMG_3616.jpg">
<p>Edit</p>
<select id="exif">
    <option value="1">そのまま</option>
    <option value="2">左右反転</option>
    <option value="3">180度回転</option>
    <option value="4">上下反転</option>
    <option value="5">左右反転して270度回転</option>
    <option value="6">90度回転</option>
    <option value="7">左右反転して90度回転</option>
    <option value="8">270度回転</option>
</select>
<button id="click">click</button>
<div id="output"></div>

JavaScript

var img = document.getElementById('image');

function edit(orientation) {
    
    var width = img.width;
    var height = img.height;

    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    
    canvas.width = width;
    canvas.height = height;

    switch (orientation) {
        // そのまま
        case 1:
            break;
        // 左右反転
        case 2:
           ctx.translate(width, 0);
           ctx.scale(-1, 1);
           break;
        // 180度回転
        case 3:
            ctx.translate(width, height);
            ctx.rotate(180 / 180 * Math.PI);
            break;
        // 上下反転
        case 4:
            ctx.translate(0, height);
            ctx.scale(1, -1);
            break;
        // 左右反転して270度回転
        case 5:                        
            canvas.width = height;
            canvas.height = width;
            ctx.rotate(270 / 180 * Math.PI);
            ctx.scale(-1, 1);
            break;
        // 90度回転
        case 6:
            canvas.width = height;
            canvas.height = width;
            ctx.rotate(90 / 180 * Math.PI);
            ctx.translate(0, -height);
            break;
        // 左右反転して90度回転
        case 7:
            canvas.width = height;
            canvas.height = width;
            ctx.translate(height, width);
            ctx.rotate(90 / 180 * Math.PI);
            ctx.scale(-1, 1);
            break;
        // 270度回転
        case 8:
            canvas.width = height;
            canvas.height = width;
            ctx.translate(0, width);
            ctx.rotate(270 / 180 * Math.PI);
            break;
    }
    ctx.drawImage(img, 0, 0,width,height);
    var el = document.getElementById("output");
    if (el.firstChild) el.removeChild(el.firstChild);
    el.appendChild(canvas);
};

document.getElementById('click').addEventListener('click', function() {
    edit(+document.getElementById('exif').value);
});