notcome/canvas-compress

## canvas-compress
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    #picture-select {
      display: block;
    }
    #canvas {
      width: 300px;
      height: 400px;
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <input type="file" accept="image/*" id="picture-select">
  <button onclick="process()">提交</button>
  <button onclick="rotate(90)">左旋 90</button>
  <button onclick="rotate(-90)">右旋 90</button>
  <canvas id="canvas" width="1200" height="1600"></canvas>
  <script>
    var selectPicture = document.getElementById('picture-select');

    var currentURL;
    var currentAngle;

    selectPicture.addEventListener('change', function (event) {
      if (event.target.files.length != 1)
        return;

      currentURL = URL.createObjectURL(event.target.files[0]);
      currentAngle = 0;
      drawImage();
    });

    function rotate (deg) {
      currentAngle += deg;
      if (currentAngle < 0)
        currentAngle += 360;
      if (currentAngle >= 360)
        currentAngle -= 360;

      drawImage();
    }

    function drawImage () {
      var image = new Image();
      image.onload = function () {
        if (currentAngle == 90 || currentAngle == 270)
          var frameWidth = 1600,
              frameHeight = 1200;
        else
          var frameWidth = 1200,
              frameHeight = 1600;

        var w = image.naturalWidth,
            h = image.naturalHeight;

        if (h > frameHeight)
          w /= h / frameHeight,
          h = frameHeight;
        if (h > frameWidth)
          h /= w / frameWidth,
          w = frameWidth;

        var context = document.getElementById("canvas").getContext('2d');
        var radian = currentAngle * (Math.PI / 180);
        context.clearRect(0, 0, 1200, 1600);

        context.translate(600, 800);
        context.rotate(radian);
        context.drawImage(image, -(w / 2), -(h / 2), w, h);
        context.rotate(-radian);
        context.translate(-600, -800);
      };
      image.src = currentURL;
    }

    function base64ToUint8Array (input) {
      var sB64Enc = input.replace(/[^A-Za-z0-9\+\/]/g, ""),
          nInLen  = sB64Enc.length,
          nOutLen = nInLen * 3 + 1 >> 2,
          taBytes = new Uint8Array(nOutLen);

      for (var nMod3, nMod4, nUint24 = 0, nOutIdx = 0, nInIdx = 0; nInIdx < nInLen; nInIdx++) {
        nMod4 = nInIdx & 3;
        nUint24 |= b64ToUint6(sB64Enc.charCodeAt(nInIdx)) << 18 - 6 * nMod4;
        if (nMod4 === 3 || nInLen - nInIdx === 1) {
          for (nMod3 = 0; nMod3 < 3 && nOutIdx < nOutLen; nMod3++, nOutIdx++)
            taBytes[nOutIdx] = nUint24 >>> (16 >>> nMod3 & 24) & 255;
          nUint24 = 0;
        }
      return taBytes;
      }

      function b64ToUint6 (c) {
        if (c > 64 && c < 91)
          return c - 65;
        if (c > 96 && c < 123)
          return c - 71;
        if (c > 47 && c < 58)
          return c + 4;
        if (c === 43) return 62;
        if (c === 47) return 63;
        return 0;
      }
    }

    function process () {
      var dataURL = document.getElementById("canvas").toDataURL();
      var mimeType = dataURL.slice(0, 20).match(/data:[^;]+/)[0].slice(5);
      var postData = base64ToUint8Array(dataURL);
      window.a = postData;
      alert(postData.length);
      return postData;
    }
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
	#picture-select {
	display: block;
	}
	#canvas {
	width: 300px;
	height: 400px;
	border: 1px solid black;
	}
	</style>
	</head>
	<body>
	<input type="file" accept="image/*" id="picture-select">
	<button onclick="process()">提交</button>
	<button onclick="rotate(90)">左旋 90</button>
	<button onclick="rotate(-90)">右旋 90</button>
	<canvas id="canvas" width="1200" height="1600"></canvas>
	<script>
	var selectPicture = document.getElementById('picture-select');

	var currentURL;
	var currentAngle;

	selectPicture.addEventListener('change', function (event) {
	if (event.target.files.length != 1)
	return;

	currentURL = URL.createObjectURL(event.target.files[0]);
	currentAngle = 0;
	drawImage();
	});

	function rotate (deg) {
	currentAngle += deg;
	if (currentAngle < 0)
	currentAngle += 360;
	if (currentAngle >= 360)
	currentAngle -= 360;

	drawImage();
	}

	function drawImage () {
	var image = new Image();
	image.onload = function () {
	if (currentAngle == 90 \|\| currentAngle == 270)
	var frameWidth = 1600,
	frameHeight = 1200;
	else
	var frameWidth = 1200,
	frameHeight = 1600;

	var w = image.naturalWidth,
	h = image.naturalHeight;

	if (h > frameHeight)
	w /= h / frameHeight,
	h = frameHeight;
	if (h > frameWidth)
	h /= w / frameWidth,
	w = frameWidth;

	var context = document.getElementById("canvas").getContext('2d');
	var radian = currentAngle * (Math.PI / 180);
	context.clearRect(0, 0, 1200, 1600);

	context.translate(600, 800);
	context.rotate(radian);
	context.drawImage(image, -(w / 2), -(h / 2), w, h);
	context.rotate(-radian);
	context.translate(-600, -800);
	};
	image.src = currentURL;
	}

	function base64ToUint8Array (input) {
	var sB64Enc = input.replace(/[^A-Za-z0-9\+\/]/g, ""),
	nInLen = sB64Enc.length,
	nOutLen = nInLen * 3 + 1 >> 2,
	taBytes = new Uint8Array(nOutLen);

	for (var nMod3, nMod4, nUint24 = 0, nOutIdx = 0, nInIdx = 0; nInIdx < nInLen; nInIdx++) {
	nMod4 = nInIdx & 3;
	nUint24 \|= b64ToUint6(sB64Enc.charCodeAt(nInIdx)) << 18 - 6 * nMod4;
	if (nMod4 === 3 \|\| nInLen - nInIdx === 1) {
	for (nMod3 = 0; nMod3 < 3 && nOutIdx < nOutLen; nMod3++, nOutIdx++)
	taBytes[nOutIdx] = nUint24 >>> (16 >>> nMod3 & 24) & 255;
	nUint24 = 0;
	}
	return taBytes;
	}

	function b64ToUint6 (c) {
	if (c > 64 && c < 91)
	return c - 65;
	if (c > 96 && c < 123)
	return c - 71;
	if (c > 47 && c < 58)
	return c + 4;
	if (c === 43) return 62;
	if (c === 47) return 63;
	return 0;
	}
	}

	function process () {
	var dataURL = document.getElementById("canvas").toDataURL();
	var mimeType = dataURL.slice(0, 20).match(/data:[^;]+/)[0].slice(5);
	var postData = base64ToUint8Array(dataURL);
	window.a = postData;
	alert(postData.length);
	return postData;
	}
	</script>
	</body>
	</html>