├── overlay
    └── 1.png
├── data
    ├── shutter.png
    └── camera-shutter.mp3
├── photos
    ├── Selfie-2020-8-4-11-54-12.png
    └── Selfie-2020-8-4-12-4-37.png
├── README.md
├── js
    ├── canvas-toBlob.js
    ├── Camera_overlay.js
    ├── Filters.js
    └── FileSaver.js
└── index.html


/overlay/1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/darkhorse07232020/Selfie-with-overlay/HEAD/overlay/1.png


--------------------------------------------------------------------------------
/data/shutter.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/darkhorse07232020/Selfie-with-overlay/HEAD/data/shutter.png


--------------------------------------------------------------------------------
/data/camera-shutter.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/darkhorse07232020/Selfie-with-overlay/HEAD/data/camera-shutter.mp3


--------------------------------------------------------------------------------
/photos/Selfie-2020-8-4-11-54-12.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/darkhorse07232020/Selfie-with-overlay/HEAD/photos/Selfie-2020-8-4-11-54-12.png


--------------------------------------------------------------------------------
/photos/Selfie-2020-8-4-12-4-37.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/darkhorse07232020/Selfie-with-overlay/HEAD/photos/Selfie-2020-8-4-12-4-37.png


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Selfie-with-overlay
2 | This project is selfie camera app with overlay.
3 | You can change the overlay Image that you want.
4 | # About this project
5 | ![No-effect](/photos/Selfie-2020-8-4-11-54-12.png)
6 | ![Grey-effect](/photos/Selfie-2020-8-4-12-4-37.png)
7 | 


--------------------------------------------------------------------------------
/js/canvas-toBlob.js:
--------------------------------------------------------------------------------
  1 | /* canvas-toBlob.js
  2 |  * A canvas.toBlob() implementation.
  3 |  * 2016-05-26
  4 |  * 
  5 |  * By Eli Grey, http://eligrey.com and Devin Samarin, https://github.com/eboyjr
  6 |  * License: MIT
  7 |  *   See https://github.com/eligrey/canvas-toBlob.js/blob/master/LICENSE.md
  8 |  */
  9 | 
 10 | /*global self */
 11 | /*jslint bitwise: true, regexp: true, confusion: true, es5: true, vars: true, white: true,
 12 |   plusplus: true */
 13 | 
 14 | /*! @source http://purl.eligrey.com/github/canvas-toBlob.js/blob/master/canvas-toBlob.js */
 15 | 
 16 | (function(view) {
 17 | "use strict";
 18 | var
 19 | 	  Uint8Array = view.Uint8Array
 20 | 	, HTMLCanvasElement = view.HTMLCanvasElement
 21 | 	, canvas_proto = HTMLCanvasElement && HTMLCanvasElement.prototype
 22 | 	, is_base64_regex = /\s*;\s*base64\s*(?:;|$)/i
 23 | 	, to_data_url = "toDataURL"
 24 | 	, base64_ranks
 25 | 	, decode_base64 = function(base64) {
 26 | 		var
 27 | 			  len = base64.length
 28 | 			, buffer = new Uint8Array(len / 4 * 3 | 0)
 29 | 			, i = 0
 30 | 			, outptr = 0
 31 | 			, last = [0, 0]
 32 | 			, state = 0
 33 | 			, save = 0
 34 | 			, rank
 35 | 			, code
 36 | 			, undef
 37 | 		;
 38 | 		while (len--) {
 39 | 			code = base64.charCodeAt(i++);
 40 | 			rank = base64_ranks[code-43];
 41 | 			if (rank !== 255 && rank !== undef) {
 42 | 				last[1] = last[0];
 43 | 				last[0] = code;
 44 | 				save = (save << 6) | rank;
 45 | 				state++;
 46 | 				if (state === 4) {
 47 | 					buffer[outptr++] = save >>> 16;
 48 | 					if (last[1] !== 61 /* padding character */) {
 49 | 						buffer[outptr++] = save >>> 8;
 50 | 					}
 51 | 					if (last[0] !== 61 /* padding character */) {
 52 | 						buffer[outptr++] = save;
 53 | 					}
 54 | 					state = 0;
 55 | 				}
 56 | 			}
 57 | 		}
 58 | 		// 2/3 chance there's going to be some null bytes at the end, but that
 59 | 		// doesn't really matter with most image formats.
 60 | 		// If it somehow matters for you, truncate the buffer up outptr.
 61 | 		return buffer;
 62 | 	}
 63 | ;
 64 | if (Uint8Array) {
 65 | 	base64_ranks = new Uint8Array([
 66 | 		  62, -1, -1, -1, 63, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, -1
 67 | 		, -1, -1,  0, -1, -1, -1,  0,  1,  2,  3,  4,  5,  6,  7,  8,  9
 68 | 		, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25
 69 | 		, -1, -1, -1, -1, -1, -1, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35
 70 | 		, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51
 71 | 	]);
 72 | }
 73 | if (HTMLCanvasElement && (!canvas_proto.toBlob || !canvas_proto.toBlobHD)) {
 74 | 	if (!canvas_proto.toBlob)
 75 | 	canvas_proto.toBlob = function(callback, type /*, ...args*/) {
 76 | 		  if (!type) {
 77 | 			type = "image/png";
 78 | 		} if (this.mozGetAsFile) {
 79 | 			callback(this.mozGetAsFile("canvas", type));
 80 | 			return;
 81 | 		} if (this.msToBlob && /^\s*image\/png\s*(?:$|;)/i.test(type)) {
 82 | 			callback(this.msToBlob());
 83 | 			return;
 84 | 		}
 85 | 
 86 | 		var
 87 | 			  args = Array.prototype.slice.call(arguments, 1)
 88 | 			, dataURI = this[to_data_url].apply(this, args)
 89 | 			, header_end = dataURI.indexOf(",")
 90 | 			, data = dataURI.substring(header_end + 1)
 91 | 			, is_base64 = is_base64_regex.test(dataURI.substring(0, header_end))
 92 | 			, blob
 93 | 		;
 94 | 		if (Blob.fake) {
 95 | 			// no reason to decode a data: URI that's just going to become a data URI again
 96 | 			blob = new Blob
 97 | 			if (is_base64) {
 98 | 				blob.encoding = "base64";
 99 | 			} else {
100 | 				blob.encoding = "URI";
101 | 			}
102 | 			blob.data = data;
103 | 			blob.size = data.length;
104 | 		} else if (Uint8Array) {
105 | 			if (is_base64) {
106 | 				blob = new Blob([decode_base64(data)], {type: type});
107 | 			} else {
108 | 				blob = new Blob([decodeURIComponent(data)], {type: type});
109 | 			}
110 | 		}
111 | 		callback(blob);
112 | 	};
113 | 
114 | 	if (!canvas_proto.toBlobHD && canvas_proto.toDataURLHD) {
115 | 		canvas_proto.toBlobHD = function() {
116 | 			to_data_url = "toDataURLHD";
117 | 			var blob = this.toBlob();
118 | 			to_data_url = "toDataURL";
119 | 			return blob;
120 | 		}
121 | 	} else {
122 | 		canvas_proto.toBlobHD = canvas_proto.toBlob;
123 | 	}
124 | }
125 | }(typeof self !== "undefined" && self || typeof window !== "undefined" && window || this.content || this));
126 | 


--------------------------------------------------------------------------------
/js/Camera_overlay.js:
--------------------------------------------------------------------------------
  1 | function showPage() {
  2 |     document.getElementById("loader").style.display = "none";
  3 |     document.getElementById("canvasOutput").style.display = "block";
  4 |     document.getElementById("shutter_icon").style.display = "block";
  5 |     document.getElementById("button_UI").style.display = "block";
  6 |     document.getElementById("filter_btn").style.display = "block";
  7 | }
  8 | 
  9 | function findGetParameter(parameterName) {
 10 |     let result = null,
 11 |         tmp = [];
 12 |     location.search
 13 |         .substr(1)
 14 |         .split("&")
 15 |         .forEach(function (item) {
 16 |             tmp = item.split("=");
 17 |             if (tmp[0] === parameterName) result = decodeURIComponent(tmp[1]);
 18 |         });
 19 |     if (result === undefined) {
 20 |         result = "";
 21 |     }
 22 |     return result;
 23 | }
 24 | 
 25 | let use_back_camera;
 26 | 
 27 | let filters = [null, Filters.grayscale, Filters.brightness, Filters.convolute, Filters.threshold, Filters.convolute, Filters.sobel];
 28 | let filter_arg=90;
 29 | let filter_arguments = [null,null, filter_arg,  [1/9,1/9,1/9,1/9,1/9,1/9,1/9,1/9,1/9], filter_arg, [0,-1,0,-1,5,-1,0,-1,0], null];
 30 | let filter_in_use = 0;
 31 | 
 32 | function filter_button() {
 33 |     filter_in_use = (filter_in_use + 1)%filters.length;
 34 | }
 35 | 
 36 | window.addEventListener('orientationchange', function () {
 37 |     document.location.reload()
 38 | });
 39 | 
 40 | 
 41 | $('input[id=camid]').change(function () {
 42 |     if ($(this).is(':checked')) {
 43 |         window.location.href = document.location.origin + document.location.pathname + "?camid=back";
 44 | 
 45 |     } else {
 46 |         window.location.href = document.location.origin + document.location.pathname + "?camid=front";
 47 |     }
 48 | });
 49 | 
 50 | 
 51 | if (findGetParameter("camid") === "front") {
 52 |     use_back_camera = false;
 53 |     document.getElementById("camid").checked = false;
 54 | }
 55 | else {
 56 |     use_back_camera = true;
 57 | }
 58 | const click_animation = document.getElementById("click_animation");
 59 | const audio = document.getElementById("shutter");
 60 | const canvas = document.getElementById('canvasOutput');
 61 | const context = canvas.getContext('2d');
 62 | const video = document.createElement('video');
 63 | let overlay_ready = 0;
 64 | let video_ready = 0;
 65 | let height = 240;
 66 | let width = 320;
 67 | let aspectRatio = 1;
 68 | 
 69 | const overlay = new Image();
 70 | overlay.onload = function () {
 71 |     overlay_ready++;
 72 | };
 73 | overlay.src = "overlay/1.png";
 74 | 
 75 | 
 76 | let readyToPlay = false;
 77 | const eventNames = [
 78 |     'touchstart', 'touchend', 'touchmove', 'touchcancel',
 79 |     'click', 'mousedown', 'mouseup', 'mousemove',
 80 |     'keydown', 'keyup', 'keypress', 'scroll'
 81 | ];
 82 | let play = function () {
 83 |     if (readyToPlay) {
 84 |         video.play();
 85 |         if (!video.paused) {
 86 |             eventNames.forEach(function (eventName) {
 87 |                 window.removeEventListener(eventName, play, true);
 88 |             });
 89 |         }
 90 |     }
 91 | };
 92 | 
 93 | eventNames.forEach(function (eventName) {
 94 |     window.addEventListener(eventName, play, true);
 95 | });
 96 | 
 97 | const initProgress = function () {
 98 |     if (this.videoWidth !== 0) {
 99 |         aspectRatio = this.videoHeight / this.videoWidth;
100 |         width = window.innerWidth;
101 |         height = Math.round(width * aspectRatio);
102 |         this.width = width;
103 |         this.height = height;
104 |         canvas.width = width;
105 |         canvas.height = height;
106 |     }
107 | };
108 | let success = function (stream) {
109 |     video.addEventListener('loadedmetadata', initProgress, false);
110 |     video.srcObject = stream;
111 |     readyToPlay = true;
112 |     video.setAttribute("playsinline", ""); // Latest iOS hack to force playing without user input and to prevent fullscreen
113 |     play(); // Try playing without user input, should work on non-Android Chrome
114 |     video_ready++;
115 | };
116 | 
117 | navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
118 | navigator.mediaDevices.getUserMedia({
119 |     audio: false,
120 |     video: {facingMode: use_back_camera ? "environment" : "user"}
121 | }).then(success, function (err) {
122 |     console.error("An error occurred! " + err);
123 | });
124 | 
125 | function updateFrame() {
126 |     if (video_ready && overlay_ready) {
127 |         showPage();
128 |         context.drawImage(video, 0, 0, width, height);
129 |         if (filter_in_use) {
130 |             let idata = Filters.filterImage(filters[filter_in_use], canvas, filter_arguments[filter_in_use]);
131 |             context.putImageData(idata, 0, 0);
132 |         }
133 |         const ov_width = window.innerWidth;
134 |         const ov_height = ov_width * 1162 / 2048;
135 |         context.drawImage(overlay, 0, height - ov_height, ov_width, ov_height);
136 |     }
137 |     requestAnimationFrame(updateFrame);
138 | }
139 | 
140 | requestAnimationFrame(updateFrame);
141 | 
142 | document.getElementById("shutter_icon").onclick = function () {
143 |     click_animation.classList.add("lds-hourglass");
144 |     click_animation.style.display = "block";
145 |     audio.play();
146 |     setTimeout(function () {
147 |         click_animation.classList.remove("lds-hourglass");
148 |         click_animation.style.display = "block";
149 |     }, 1200);
150 |     let date = new Date();
151 |     let filename = "Selfie-" +
152 |         date.getFullYear() + "-" +
153 |         date.getMonth() + "-" +
154 |         date.getDay() + "-" +
155 |         date.getHours() + "-" +
156 |         date.getMinutes() + "-" +
157 |         date.getSeconds() + ".png";
158 |     canvas.toBlob(function (blob) {
159 |         saveAs(blob, filename);
160 |     });
161 | };
162 | 
163 | window.onresize = function () {
164 |     if (!video_ready || !overlay_ready) return;
165 |     width = window.innerWidth;
166 |     height = Math.round(width * aspectRatio);
167 |     video.width = width;
168 |     video.height = height;
169 |     canvas.width = width;
170 |     canvas.height = height;
171 | };


--------------------------------------------------------------------------------
/js/Filters.js:
--------------------------------------------------------------------------------
  1 | Filters = {};
  2 | Filters.global_canvas = null;
  3 | if (!window.Float32Array)
  4 |     Float32Array = Array;
  5 | 
  6 | Filters.filterImage = function(filter, canvas, var_args) {
  7 |     const context = canvas.getContext('2d');
  8 |     const args = [context.getImageData(0,0,canvas.width,canvas.height)];
  9 |     for (let i=2; i<arguments.length; i++) {
 10 |         args.push(arguments[i]);
 11 |     }
 12 |     return filter.apply(null, args);
 13 | };
 14 | 
 15 | Filters.grayscale = function(pixels, args) {
 16 |     const d = pixels.data;
 17 |     for (let i=0; i<d.length; i+=4) {
 18 |         const r = d[i];
 19 |         const g = d[i + 1];
 20 |         const b = d[i + 2];
 21 |         // CIE luminance for the RGB
 22 |         // The human eye is bad at seeing red and blue, so we de-emphasize them.
 23 |         const v = 0.2126 * r + 0.7152 * g + 0.0722 * b;
 24 |         d[i] = d[i+1] = d[i+2] = v
 25 |     }
 26 |     return pixels;
 27 | };
 28 | 
 29 | Filters.brightness = function(pixels, adjustment) {
 30 |     const d = pixels.data;
 31 |     for (let i=0; i<d.length; i+=4) {
 32 |         d[i] += adjustment;
 33 |         d[i+1] += adjustment;
 34 |         d[i+2] += adjustment;
 35 |     }
 36 |     return pixels;
 37 | };
 38 | 
 39 | Filters.threshold = function(pixels, threshold) {
 40 |     const d = pixels.data;
 41 |     for (let i=0; i<d.length; i+=4) {
 42 |         const r = d[i];
 43 |         const g = d[i + 1];
 44 |         const b = d[i + 2];
 45 |         const v = (0.2126 * r + 0.7152 * g + 0.0722 * b >= threshold) ? 255 : 0;
 46 |         d[i] = d[i+1] = d[i+2] = v
 47 |     }
 48 |     return pixels;
 49 | };
 50 | 
 51 | Filters.tmpCanvas = document.createElement('canvas');
 52 | Filters.tmpCtx = Filters.tmpCanvas.getContext('2d');
 53 | 
 54 | Filters.createImageData = function(w,h) {
 55 |     return this.tmpCtx.createImageData(w,h);
 56 | };
 57 | 
 58 | Filters.convolute = function(pixels, weights, opaque) {
 59 |     const side = Math.round(Math.sqrt(weights.length));
 60 |     const halfSide = Math.floor(side / 2);
 61 |     const src = pixels.data;
 62 |     const sw = pixels.width;
 63 |     const sh = pixels.height;
 64 |     // pad output by the convolution matrix
 65 |     const w = sw;
 66 |     const h = sh;
 67 |     const output = Filters.createImageData(w, h);
 68 |     const dst = output.data;
 69 |     // go through the destination image pixels
 70 |     const alphaFac = opaque ? 1 : 0;
 71 |     for (let y=0; y<h; y++) {
 72 |         for (let x=0; x<w; x++) {
 73 |             const sy = y;
 74 |             const sx = x;
 75 |             const dstOff = (y * w + x) * 4;
 76 |             // calculate the weighed sum of the source image pixels that
 77 |             // fall under the convolution matrix
 78 |             let r = 0, g = 0, b = 0, a = 0;
 79 |             for (let cy=0; cy<side; cy++) {
 80 |                 for (let cx=0; cx<side; cx++) {
 81 |                     const scy = sy + cy - halfSide;
 82 |                     const scx = sx + cx - halfSide;
 83 |                     if (scy >= 0 && scy < sh && scx >= 0 && scx < sw) {
 84 |                         const srcOff = (scy * sw + scx) * 4;
 85 |                         const wt = weights[cy * side + cx];
 86 |                         r += src[srcOff] * wt;
 87 |                         g += src[srcOff+1] * wt;
 88 |                         b += src[srcOff+2] * wt;
 89 |                         a += src[srcOff+3] * wt;
 90 |                     }
 91 |                 }
 92 |             }
 93 |             dst[dstOff] = r;
 94 |             dst[dstOff+1] = g;
 95 |             dst[dstOff+2] = b;
 96 |             dst[dstOff+3] = a + alphaFac*(255-a);
 97 |         }
 98 |     }
 99 |     return output;
100 | };
101 | 
102 | 
103 | Filters.convoluteFloat32 = function(pixels, weights, opaque) {
104 |     const side = Math.round(Math.sqrt(weights.length));
105 |     const halfSide = Math.floor(side / 2);
106 | 
107 |     const src = pixels.data;
108 |     const sw = pixels.width;
109 |     const sh = pixels.height;
110 | 
111 |     const w = sw;
112 |     const h = sh;
113 |     const output = {
114 |         width: w, height: h, data: new Float32Array(w * h * 4)
115 |     };
116 |     const dst = output.data;
117 | 
118 |     const alphaFac = opaque ? 1 : 0;
119 | 
120 |     for (let y=0; y<h; y++) {
121 |         for (let x=0; x<w; x++) {
122 |             const sy = y;
123 |             const sx = x;
124 |             const dstOff = (y * w + x) * 4;
125 |             let r = 0, g = 0, b = 0, a = 0;
126 |             for (let cy=0; cy<side; cy++) {
127 |                 for (let cx=0; cx<side; cx++) {
128 |                     const scy = Math.min(sh - 1, Math.max(0, sy + cy - halfSide));
129 |                     const scx = Math.min(sw - 1, Math.max(0, sx + cx - halfSide));
130 |                     const srcOff = (scy * sw + scx) * 4;
131 |                     const wt = weights[cy * side + cx];
132 |                     r += src[srcOff] * wt;
133 |                     g += src[srcOff+1] * wt;
134 |                     b += src[srcOff+2] * wt;
135 |                     a += src[srcOff+3] * wt;
136 |                 }
137 |             }
138 |             dst[dstOff] = r;
139 |             dst[dstOff+1] = g;
140 |             dst[dstOff+2] = b;
141 |             dst[dstOff+3] = a + alphaFac*(255-a);
142 |         }
143 |     }
144 |     return output;
145 | };
146 | 
147 | Filters.sobel = function(px, args) {
148 |     px = Filters.grayscale(px);
149 |     const vertical = Filters.convoluteFloat32(px,
150 |         [-1, -2, -1,
151 |             0, 0, 0,
152 |             1, 2, 1]);
153 |     const horizontal = Filters.convoluteFloat32(px,
154 |         [-1, 0, 1,
155 |             -2, 0, 2,
156 |             -1, 0, 1]);
157 |     const id = Filters.createImageData(vertical.width, vertical.height);
158 |     for (let i=0; i<id.data.length; i+=4) {
159 |         const v = Math.abs(vertical.data[i]);
160 |         id.data[i] = v;
161 |         const h = Math.abs(horizontal.data[i]);
162 |         id.data[i+1] = h;
163 |         id.data[i+2] = (v+h)/4;
164 |         id.data[i+3] = 255;
165 |     }
166 |     return id;
167 | };
168 | 
169 | Filters.blur = function (pixels, args) {
170 |     return Filters.filterImage(Filters.convolute, image,
171 |         [ 1/9, 1/9, 1/9,
172 |             1/9, 1/9, 1/9,
173 |             1/9, 1/9, 1/9 ]
174 |     );
175 | };


--------------------------------------------------------------------------------
/js/FileSaver.js:
--------------------------------------------------------------------------------
  1 | /* FileSaver.js
  2 |  * A saveAs() FileSaver implementation.
  3 |  * 1.3.8
  4 |  * 2018-03-22 14:03:47
  5 |  *
  6 |  * By Eli Grey, https://eligrey.com
  7 |  * License: MIT
  8 |  *   See https://github.com/eligrey/FileSaver.js/blob/master/LICENSE.md
  9 |  */
 10 | 
 11 | /*global self */
 12 | /*jslint bitwise: true, indent: 4, laxbreak: true, laxcomma: true, smarttabs: true, plusplus: true */
 13 | 
 14 | /*! @source http://purl.eligrey.com/github/FileSaver.js/blob/master/src/FileSaver.js */
 15 | 
 16 | var saveAs = saveAs || (function(view) {
 17 | 	"use strict";
 18 | 	// IE <10 is explicitly unsupported
 19 | 	if (typeof view === "undefined" || typeof navigator !== "undefined" && /MSIE [1-9]\./.test(navigator.userAgent)) {
 20 | 		return;
 21 | 	}
 22 | 	var
 23 | 		  doc = view.document
 24 | 		  // only get URL when necessary in case Blob.js hasn't overridden it yet
 25 | 		, get_URL = function() {
 26 | 			return view.URL || view.webkitURL || view;
 27 | 		}
 28 | 		, save_link = doc.createElementNS("http://www.w3.org/1999/xhtml", "a")
 29 | 		, can_use_save_link = "download" in save_link
 30 | 		, click = function(node) {
 31 | 			var event = new MouseEvent("click");
 32 | 			node.dispatchEvent(event);
 33 | 		}
 34 | 		, is_safari = /constructor/i.test(view.HTMLElement) || view.safari
 35 | 		, is_chrome_ios =/CriOS\/[\d]+/.test(navigator.userAgent)
 36 | 		, setImmediate = view.setImmediate || view.setTimeout
 37 | 		, throw_outside = function(ex) {
 38 | 			setImmediate(function() {
 39 | 				throw ex;
 40 | 			}, 0);
 41 | 		}
 42 | 		, force_saveable_type = "application/octet-stream"
 43 | 		// the Blob API is fundamentally broken as there is no "downloadfinished" event to subscribe to
 44 | 		, arbitrary_revoke_timeout = 1000 * 40 // in ms
 45 | 		, revoke = function(file) {
 46 | 			var revoker = function() {
 47 | 				if (typeof file === "string") { // file is an object URL
 48 | 					get_URL().revokeObjectURL(file);
 49 | 				} else { // file is a File
 50 | 					file.remove();
 51 | 				}
 52 | 			};
 53 | 			setTimeout(revoker, arbitrary_revoke_timeout);
 54 | 		}
 55 | 		, dispatch = function(filesaver, event_types, event) {
 56 | 			event_types = [].concat(event_types);
 57 | 			var i = event_types.length;
 58 | 			while (i--) {
 59 | 				var listener = filesaver["on" + event_types[i]];
 60 | 				if (typeof listener === "function") {
 61 | 					try {
 62 | 						listener.call(filesaver, event || filesaver);
 63 | 					} catch (ex) {
 64 | 						throw_outside(ex);
 65 | 					}
 66 | 				}
 67 | 			}
 68 | 		}
 69 | 		, auto_bom = function(blob) {
 70 | 			// prepend BOM for UTF-8 XML and text/* types (including HTML)
 71 | 			// note: your browser will automatically convert UTF-16 U+FEFF to EF BB BF
 72 | 			if (/^\s*(?:text\/\S*|application\/xml|\S*\/\S*\+xml)\s*;.*charset\s*=\s*utf-8/i.test(blob.type)) {
 73 | 				return new Blob([String.fromCharCode(0xFEFF), blob], {type: blob.type});
 74 | 			}
 75 | 			return blob;
 76 | 		}
 77 | 		, FileSaver = function(blob, name, no_auto_bom) {
 78 | 			if (!no_auto_bom) {
 79 | 				blob = auto_bom(blob);
 80 | 			}
 81 | 			// First try a.download, then web filesystem, then object URLs
 82 | 			var
 83 | 				  filesaver = this
 84 | 				, type = blob.type
 85 | 				, force = type === force_saveable_type
 86 | 				, object_url
 87 | 				, dispatch_all = function() {
 88 | 					dispatch(filesaver, "writestart progress write writeend".split(" "));
 89 | 				}
 90 | 				// on any filesys errors revert to saving with object URLs
 91 | 				, fs_error = function() {
 92 | 					if ((is_chrome_ios || (force && is_safari)) && view.FileReader) {
 93 | 						// Safari doesn't allow downloading of blob urls
 94 | 						var reader = new FileReader();
 95 | 						reader.onloadend = function() {
 96 | 							var url = is_chrome_ios ? reader.result : reader.result.replace(/^data:[^;]*;/, 'data:attachment/file;');
 97 | 							var popup = view.open(url, '_blank');
 98 | 							if(!popup) view.location.href = url;
 99 | 							url=undefined; // release reference before dispatching
100 | 							filesaver.readyState = filesaver.DONE;
101 | 							dispatch_all();
102 | 						};
103 | 						reader.readAsDataURL(blob);
104 | 						filesaver.readyState = filesaver.INIT;
105 | 						return;
106 | 					}
107 | 					// don't create more object URLs than needed
108 | 					if (!object_url) {
109 | 						object_url = get_URL().createObjectURL(blob);
110 | 					}
111 | 					if (force) {
112 | 						view.location.href = object_url;
113 | 					} else {
114 | 						var opened = view.open(object_url, "_blank");
115 | 						if (!opened) {
116 | 							// Apple does not allow window.open, see https://developer.apple.com/library/safari/documentation/Tools/Conceptual/SafariExtensionGuide/WorkingwithWindowsandTabs/WorkingwithWindowsandTabs.html
117 | 							view.location.href = object_url;
118 | 						}
119 | 					}
120 | 					filesaver.readyState = filesaver.DONE;
121 | 					dispatch_all();
122 | 					revoke(object_url);
123 | 				}
124 | 			;
125 | 			filesaver.readyState = filesaver.INIT;
126 | 
127 | 			if (can_use_save_link) {
128 | 				object_url = get_URL().createObjectURL(blob);
129 | 				setImmediate(function() {
130 | 					save_link.href = object_url;
131 | 					save_link.download = name;
132 | 					click(save_link);
133 | 					dispatch_all();
134 | 					revoke(object_url);
135 | 					filesaver.readyState = filesaver.DONE;
136 | 				}, 0);
137 | 				return;
138 | 			}
139 | 
140 | 			fs_error();
141 | 		}
142 | 		, FS_proto = FileSaver.prototype
143 | 		, saveAs = function(blob, name, no_auto_bom) {
144 | 			return new FileSaver(blob, name || blob.name || "download", no_auto_bom);
145 | 		}
146 | 	;
147 | 
148 | 	// IE 10+ (native saveAs)
149 | 	if (typeof navigator !== "undefined" && navigator.msSaveOrOpenBlob) {
150 | 		return function(blob, name, no_auto_bom) {
151 | 			name = name || blob.name || "download";
152 | 
153 | 			if (!no_auto_bom) {
154 | 				blob = auto_bom(blob);
155 | 			}
156 | 			return navigator.msSaveOrOpenBlob(blob, name);
157 | 		};
158 | 	}
159 | 
160 | 	// todo: detect chrome extensions & packaged apps
161 | 	//save_link.target = "_blank";
162 | 
163 | 	FS_proto.abort = function(){};
164 | 	FS_proto.readyState = FS_proto.INIT = 0;
165 | 	FS_proto.WRITING = 1;
166 | 	FS_proto.DONE = 2;
167 | 
168 | 	FS_proto.error =
169 | 	FS_proto.onwritestart =
170 | 	FS_proto.onprogress =
171 | 	FS_proto.onwrite =
172 | 	FS_proto.onabort =
173 | 	FS_proto.onerror =
174 | 	FS_proto.onwriteend =
175 | 		null;
176 | 
177 | 	return saveAs;
178 | }(
179 | 	   typeof self !== "undefined" && self
180 | 	|| typeof window !== "undefined" && window
181 | 	|| this
182 | ));
183 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html xmlns="http://www.w3.org/1999/xhtml"
  3 |       xml:lang="en-us" lang="en-us">
  4 | <head>
  5 |     <title>Photo Frame App</title>
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
  7 |     <style>
  8 |         html, body, canvas {
  9 |             padding: 0;
 10 |             margin: 0;
 11 |             overflow: hidden;
 12 |         }
 13 | 
 14 |         body {
 15 |             background-color: #000;
 16 |         }
 17 |         #loader {
 18 |             position: absolute;
 19 |             left: 50%;
 20 |             top: 50%;
 21 |             z-index: 1;
 22 |             width: 150px;
 23 |             height: 150px;
 24 |             margin: -75px 0 0 -75px;
 25 |             border: 16px solid #f3f3f3;
 26 |             border-radius: 50%;
 27 |             border-top: 16px solid #3498db;
 28 |             -webkit-animation: spin 2s linear infinite;
 29 |             animation: spin 2s linear infinite;
 30 |             border-top: 16px solid blue;
 31 |             border-right: 16px solid green;
 32 |             border-bottom: 16px solid red;
 33 |             border-left: 16px solid pink;
 34 | 
 35 |         }
 36 | 
 37 |         @-webkit-keyframes spin {
 38 |             0% {
 39 |                 -webkit-transform: rotate(0deg);
 40 |             }
 41 |             100% {
 42 |                 -webkit-transform: rotate(360deg);
 43 |             }
 44 |         }
 45 | 
 46 |         @keyframes spin {
 47 |             0% {
 48 |                 transform: rotate(0deg);
 49 |             }
 50 |             100% {
 51 |                 transform: rotate(360deg);
 52 |             }
 53 |         }
 54 | 
 55 |         #shutter_icon {
 56 |             position: absolute;
 57 |             bottom: 20px;
 58 |             left: 50%;
 59 |             width: 50px;
 60 |             height: 50px;
 61 |             margin-left: -25px;
 62 |         }
 63 | 
 64 |         .lds-hourglass {
 65 |             position: absolute;
 66 |             left: 50%;
 67 |             top: 40%;
 68 |             bottom: 20px;
 69 |             z-index: 1;
 70 |             width: 150px;
 71 |             height: 150px;
 72 |             margin: -75px 0 0 -75px;
 73 |         }
 74 | 
 75 |         .lds-hourglass:after {
 76 |             content: " ";
 77 |             display: block;
 78 |             width: 50px;
 79 |             height: 50px;
 80 |             box-sizing: border-box;
 81 |             border-radius: 50%;
 82 |             border: 75px solid #fff;
 83 |             border-color: #fff transparent #fff transparent;
 84 |             animation: lds-hourglass 1.2s infinite;
 85 |         }
 86 | 
 87 |         @keyframes lds-hourglass {
 88 |             0% {
 89 |                 transform: rotate(0);
 90 |                 animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
 91 |             }
 92 |             50% {
 93 |                 transform: rotate(900deg);
 94 |                 animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
 95 |             }
 96 |             100% {
 97 |                 transform: rotate(1800deg);
 98 |             }
 99 |         }
100 | 
101 |         .switch {
102 |             position: absolute;
103 |             display: inline-block;
104 |             width: 60px;
105 |             height: 34px;
106 |         }
107 | 
108 |         .switch input {
109 |             display: none;
110 |         }
111 | 
112 |         .slider {
113 |             position: absolute;
114 |             cursor: pointer;
115 |             top: 0;
116 |             left: 0;
117 |             right: 0;
118 |             bottom: 0;
119 |             background-color: #1593cc;
120 |             -webkit-transition: .4s;
121 |             transition: .4s;
122 |         }
123 | 
124 |         .slider:before {
125 |             position: absolute;
126 |             content: "";
127 |             height: 26px;
128 |             width: 26px;
129 |             left: 4px;
130 |             bottom: 4px;
131 |             background-color: white;
132 |             -webkit-transition: .4s;
133 |             transition: .4s;
134 |         }
135 | 
136 |         input:checked + .slider {
137 |             background-color: #2196F3;
138 |         }
139 | 
140 |         input:focus + .slider {
141 |             box-shadow: 0 0 1px #f34402;
142 |         }
143 | 
144 |         input:checked + .slider:before {
145 |             -webkit-transform: translateX(26px);
146 |             -ms-transform: translateX(26px);
147 |             transform: translateX(26px);
148 |         }
149 | 
150 |         /* Rounded sliders */
151 |         .slider.round {
152 |             border-radius: 34px;
153 |         }
154 | 
155 |         .slider.round:before {
156 |             border-radius: 50%;
157 |         }
158 |         #filter_btn{
159 | 
160 |             position: absolute;
161 |             bottom: 20px;
162 |             right: 10px;
163 |             width: 60px;
164 |             height: 34px;
165 |             background-color: #f4511e;
166 |             border: none;
167 |             border-radius:34px;
168 |             color: white;
169 |             padding: 2px 2px;
170 |             text-align: center;
171 |             font-size: 12px;
172 |             margin: 4px 2px;
173 |             opacity: 0.6;
174 |             transition: 0.3s;
175 |             display: inline-block;
176 |             text-decoration: none;
177 |             cursor: pointer;
178 |         }
179 | 
180 |         .button:hover {opacity: 1}
181 |     </style>
182 | </head>
183 | <body>
184 | <div id="loader"></div>
185 | 
186 | <audio id="shutter" src="data/camera-shutter.mp3"></audio>
187 | <canvas id="canvasOutput" style="display: none"></canvas>
188 | <img id="shutter_icon" style="display: none" src="data/shutter.png"/>
189 | <div id="button_UI"
190 |      style="display:none;padding-left:10px;position: absolute;left:0;bottom: 60px;z-index: 10;">
191 |     <label class="switch">
192 |         <input type="checkbox" id="camid" checked>
193 |         <span class="slider round"></span>
194 |     </label>
195 | </div>
196 | 
197 | <div id="click_animation" style="display: none;"></div>
198 | <button id="filter_btn" style="display: none" onclick="filter_button()">FILTER</button>
199 | <script>
200 |     if (location.protocol !== 'https:') {
201 |         location.href = 'https:' + window.location.href.substring(window.location.protocol.length);
202 |     }
203 | </script>
204 | <script type="text/javascript" src="js/canvas-toBlob.js"></script>
205 | <script type="text/javascript" src="js/FileSaver.js"></script>
206 | <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
207 | <script type="text/javascript" src="js/Filters.js"></script>
208 | <script type="text/javascript" src="js/Camera_overlay.js"></script>
209 | </body>
210 | </html>
211 | 


--------------------------------------------------------------------------------