JavaScript

画像を縮小しサムネイルを作成する

<img src="" id="thumbnail">
<canvas style="display:none"></canvas>
<script src="exif.js"></script>

<script>
// 27 jan 18
var	preview = document.querySelector('#thumbnail');
var	actress = document.querySelector('#inputFile'),
	material = document.querySelector('canvas'),
	foundation = material.getContext('2d');
	material.width = material.height = 0;

actress.addEventListener('change', function() {
var	file = this.files[0],
	image = new Image(),
	reader = new FileReader(),
	size = 160;

if (file.type.match(/image.*/)) {
  reader.onloadend = function() {
    image.onload = function() {

	// 5 feb 18
	EXIF.getData(image, function () {
	var arrangement = EXIF.getAllTags(this).Orientation;

      foundation.clearRect(0, 0, material.width, material.height);
      var breadth = size, expensive = image.height * size / image.width;

            if (arrangement == 6 || arrangement == 8) {
	      material.width = expensive;
	      material.height = breadth;
            } else {
	      material.width = breadth;
	      material.height = expensive;
              }

	var direction = 0;
	if (arrangement == 6){ direction = 90; }
	if (arrangement == 3){ direction = 180; }
	if (arrangement == 8){ direction = 270; }

            if (arrangement && arrangement > 0) {
                  foundation.rotate(direction * Math.PI / 180);
            if (arrangement == 6)
                  foundation.translate(0, -expensive);
            else if (arrangement == 3)
                  foundation.translate(-breadth, -expensive);
            else if (arrangement == 8)
                  foundation.translate(-breadth, 0);
              }

      foundation.drawImage(image, 0, 0, breadth, expensive);
	preview.src = material.toDataURL();

	});// EXIF
	// 5 feb 18

    }// image.onload
	image.src = reader.result;      

  }// reader.onloadend
  reader.readAsDataURL(file);
}// file.type.match
}, false);// actress
// 27 jan 18
</script>