EAN13 barcode: detect orientation & enhance

by PhilQ

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/exif-js/2.3.0/exif.min.js"></script>
<div id="app">
	<input ref="file" type="file" accept="image/*" capture="camera"
		@change="processFile"
	>
	<canvas ref="orig"></canvas>
	<canvas ref="gray"></canvas>
	<canvas ref="mask"></canvas>
	<canvas ref="zone"></canvas>
	<canvas ref="orientation"></canvas>
</div>

SCSS

*,::before,::after{margin:0;padding:0;box-sizing:border-box;}

body { background-color: #eee; }

input[type="file"] {
	float: left;
	clear: both;
	width: 100%;
	height: 75px;
	border: 3px dashed rgba(255,255,255, 0.3);
	background-color: #0273D4;
}

canvas {
	float: left;
	width: 50%;
	height: auto;
	background-color: #ccc;
	margin-top: 15px;
}

Vue

/* Gaussian blur functions */
	// http://blog.ivank.net/fastest-gaussian-blur.html
	function boxesForGauss(r,o){var u=Math.sqrt(12*r*r/o+1),a=Math.floor(u);a%2==0&&a--;for(var n=a+2,f=(12*r*r-o*a*a-4*o*a-3*o)/(-4*a-4),t=Math.round(f),h=[],l=0;l<o;l++)h.push(l<t?a:n);return h}function boxBlur_4(r,o,u,a,n){for(var f=0;f<r.length;f++)o[f]=r[f];boxBlurH_4(o,r,u,a,n),boxBlurT_4(r,o,u,a,n)}function boxBlurH_4(r,o,u,a,n){for(var f=1/(n+n+1),t=0;t<a;t++){for(var h=t*u,l=h,b=h+n,s=r[h],x=r[h+u-1],B=(n+1)*s,M=0;M<n;M++)B+=r[h+M];for(M=0;M<=n;M++)B+=r[b++]-s,o[h++]=Math.round(B*f);for(M=n+1;M<u-n;M++)B+=r[b++]-r[l++],o[h++]=Math.round(B*f);for(M=u-n;M<u;M++)B+=x-r[l++],o[h++]=Math.round(B*f)}}function boxBlurT_4(r,o,u,a,n){for(var f=1/(n+n+1),t=0;t<u;t++){for(var h=t,l=h,b=h+n*u,s=r[h],x=r[h+u*(a-1)],B=(n+1)*s,M=0;M<n;M++)B+=r[h+M*u];for(M=0;M<=n;M++)B+=r[b]-s,o[h]=Math.round(B*f),b+=u,h+=u;for(M=n+1;M<a-n;M++)B+=r[b]-r[l],o[h]=Math.round(B*f),l+=u,b+=u,h+=u;for(M=a-n;M<a;M++)B+=x-r[l],o[h]=Math.round(B*f),l+=u,h+=u}}function gaussBlur(r,o,u,a,n){var f=boxesForGauss(n,3);boxBlur_4(r,o,u,a,(f[0]-1)/2),boxBlur_4(o,r,u,a,(f[1]-1)/2),boxBlur_4(r,o,u,a,(f[2]-1)/2)}


/* Easing functions */
	// based on easing equations from Robert Penner (http://www.robertpenner.com/easing)
	var baseEasings = {};
	$.each( [ "Quad", "Cubic", "Quart", "Quint", "Expo" ], function( i, name ) {
		baseEasings[ name ] = function( p ) {
			return Math.pow( p, i + 2 );
		};
	});
	$.extend( baseEasings, {
		Sine: function ( p ) {
			return 1 - Math.cos( p * Math.PI / 2 );
		},
		Circ: function ( p ) {
			return 1 - Math.sqrt( 1 - p * p );
		},
		Elastic: function( p ) {
			return p === 0 || p === 1 ? p :
				-Math.pow( 2, 8 * (p - 1) ) * Math.sin( ( (p - 1) * 80 - 7.5 ) * Math.PI / 15 );
		},
		Back: function( p ) {
			return p * p * ( 3 * p - 2 );
		},
		Bounce: function ( p ) {
			var pow2,
				bounce = 4;

			while ( p < ( ( pow2 = Math.pow( 2, --bounce ) ) - 1 ) / 11 ) {}
			return 1 / Math.pow( 4, 3...