├── favicon-16x16.ico
├── sample
└── serotonin.png
├── css
├── main.css
└── offcanvas.css
├── js
├── ie10-viewport-bug-workaround.js
├── main.js
├── polyfill.js
└── bootstrap-native-v4.js
├── README.md
└── index.html
/favicon-16x16.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pietroppeter/HTML5-Image-Display/main/favicon-16x16.ico
--------------------------------------------------------------------------------
/sample/serotonin.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pietroppeter/HTML5-Image-Display/main/sample/serotonin.png
--------------------------------------------------------------------------------
/css/main.css:
--------------------------------------------------------------------------------
1 | html,body {
2 | padding:0;
3 | margin:0;
4 | }
5 | body {
6 | padding: 0.25rem 0.5rem;
7 | height:100vh;
8 | width:calc(100vw - 1.0rem);
9 | }
10 | input[type=file] {
11 | display:none;
12 | }
13 | .table td, .table th {
14 | padding: 0.25rem;
15 | }
16 | #canvasDisplay {
17 | height: calc(100% - 3.0rem);
18 | }
--------------------------------------------------------------------------------
/js/ie10-viewport-bug-workaround.js:
--------------------------------------------------------------------------------
1 | /*!
2 | * IE10 viewport hack for Surface/desktop Windows 8 bug
3 | * Copyright 2014-2015 Twitter, Inc.
4 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
5 | */
6 | !function() {
7 | "use strict"
8 | if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
9 | var e = document.createElement("style")
10 | e.appendChild(document.createTextNode("@-ms-viewport{width:auto!important}")),
11 | document.querySelector("head").appendChild(e)
12 | }
13 | }()
14 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # HTML5-Image-Display
2 |
3 | 
4 |
5 | 🧰 Web application was built with HTML5 and Client-Side JavaScript only. Rationale of development was for convenience and attempts at creating tools to boost overall work productivity.
6 |
7 | ## ℹ Implementation Overview
8 |
9 | ### ❶ Image ![]()
10 |
11 | 
12 |
13 | ### ❷ Assign CSS Property — background-image: url(…)
14 |
15 | 
16 |
17 | ### ❸ Canvas Element
18 |
19 | 
20 |
21 | ---
22 |
23 | ## 📌 Related Content
24 |
25 | * [3 Ways To Display An Image onto Browser With Client-Side JavaScript](https://geek-cc.medium.com/3-ways-to-display-an-image-onto-browser-with-client-side-javascript-6653d94680a7) ✍
26 | * Feel free to follow me on 🔗 [Medium](https://geek-cc.medium.com/) if you are interested in this piece of work or are interested in Data Analytics (including Tableau Dashboarding), 🌐 Geospatial Intelligence & GIS or other web-related content
--------------------------------------------------------------------------------
/css/offcanvas.css:
--------------------------------------------------------------------------------
1 | /* Prevent scroll on narrow devices */
2 | /* html,
3 | body {
4 | overflow-x: hidden;
5 | }
6 |
7 | body {
8 | padding-top: 62px;
9 | } */
10 | @media (max-width: 768px) {
11 | .offcanvas-collapse {
12 | position: fixed;
13 | top: 58px;
14 | /* Height of navbar */
15 | bottom: 0;
16 | left: 100%;
17 | width: 100%;
18 | padding-right: 1rem;
19 | padding-left: 1rem;
20 | overflow-y: auto;
21 | visibility: hidden;
22 | background-color: #5d4482;
23 | transition: visibility .3s ease-in-out, -webkit-transform .3s ease-in-out;
24 | transition: transform .3s ease-in-out, visibility .3s ease-in-out;
25 | transition: transform .3s ease-in-out, visibility .3s ease-in-out, -webkit-transform .3s ease-in-out;
26 | z-index: 10;
27 | }
28 |
29 | .offcanvas-collapse.open {
30 | visibility: visible;
31 | -webkit-transform: translateX(-100%);
32 | transform: translateX(-100%);
33 | }
34 | }
35 |
36 | .nav-scroller {
37 | position: relative;
38 | z-index: 2;
39 | height: 2.75rem;
40 | overflow-y: hidden;
41 | }
42 |
43 | .nav-scroller .nav {
44 | display: -ms-flexbox;
45 | display: flex;
46 | -ms-flex-wrap: nowrap;
47 | flex-wrap: nowrap;
48 | padding-bottom: 1rem;
49 | margin-top: -1px;
50 | overflow-x: auto;
51 | color: rgba(255, 255, 255, .75);
52 | text-align: center;
53 | white-space: nowrap;
54 | -webkit-overflow-scrolling: touch;
55 | }
56 |
57 | .nav-underline .nav-link {
58 | padding-top: .75rem;
59 | padding-bottom: .75rem;
60 | font-size: .875rem;
61 | color: #6c757d;
62 | }
63 |
64 | .nav-underline .nav-link:hover {
65 | color: #007bff;
66 | }
67 |
68 | .nav-underline .active {
69 | font-weight: 500;
70 | color: #343a40;
71 | }
72 |
73 | .text-white-50 {
74 | color: rgba(255, 255, 255, .5);
75 | }
76 |
77 | .lh-100 {
78 | line-height: 1;
79 | }
80 |
81 | .lh-125 {
82 | line-height: 1.25;
83 | }
84 |
85 | .lh-150 {
86 | line-height: 1.5;
87 | }
88 |
--------------------------------------------------------------------------------
/js/main.js:
--------------------------------------------------------------------------------
1 | function resizeImgRow() {
2 | let detailsCard=document.getElementById('detailsCard');
3 | let imgRow=document.getElementById('imgRow');
4 | imgRow['style']['height']=`${(529-detailsCard.clientHeight)}px`;
5 | }
6 | resizeImgRow();
7 | window.addEventListener('resize', () => {
8 | resizeImgRow();
9 | }, false);
10 |
11 | var colorDepth=document.getElementById('colorDepth');
12 | colorDepth.innerHTML=screen.colorDepth;
13 | var colorResolution=document.getElementById('colorResolution');
14 | colorResolution.innerHTML=screen.pixelDepth;
15 |
16 | var availDimensions=document.getElementById('availDimensions');
17 | availDimensions.innerHTML=`${screen.availWidth} × ${screen.availHeight}`;
18 |
19 | var screenDimensions=document.getElementById('screenDimensions');
20 | screenDimensions.innerHTML=`${screen.width} × ${screen.height}`;
21 |
22 | window.devicePixelRatio = 3.0;
23 | var scale = window.devicePixelRatio;
24 |
25 | var _ZOOM_FACTOR=1.0;
26 |
27 | var imgH = 0;
28 | var imgW = 0;
29 |
30 | const byteToKBScale = 0.0009765625;
31 |
32 | var pixelDensity=document.getElementById('pixelDensity');
33 | pixelDensity.innerHTML=scale;
34 |
35 | var uploadImgBtn=document.getElementById('uploadImgBtn');
36 | var uploadImg=document.getElementById('uploadImg');
37 |
38 |
39 | var imgCard=document.getElementById('imgCard');
40 | var canvasCard=document.getElementById('canvasCard');
41 | var cssDIVCard=document.getElementById('cssDIVCard');
42 |
43 | uploadImgBtn.addEventListener('click', (evt)=> {
44 | uploadImg.click();
45 | }, false);
46 |
47 | const monthsAbbr=['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
48 | const millisecondsToDateStr = (milliseconds) => { // in milliseconds
49 | const dateObject = new Date(milliseconds);
50 |
51 | const dateYear= dateObject.getFullYear();
52 | const dateMth= monthsAbbr[dateObject.getMonth()];
53 | const dateDay= ((dateObject.getDate())<10) ? `0${(dateObject.getDate())}` : (dateObject.getDate());
54 |
55 | const humanDateFormat = `${dateDay} ${dateMth} ${dateYear}`;
56 |
57 | return humanDateFormat;
58 | };
59 |
60 | const loadImage = (url) => new Promise((resolve, reject) => {
61 | const img = new Image();
62 | img.addEventListener('load', () => resolve(img));
63 | img.addEventListener('error', (err) => reject(err));
64 | img.src = url;
65 | });
66 |
67 | function readFileAsDataURL(file) {
68 | return new Promise((resolve,reject) => {
69 | let fileredr = new FileReader();
70 | fileredr.onload = () => resolve(fileredr.result);
71 | fileredr.onerror = () => reject(fileredr);
72 | fileredr.readAsDataURL(file);
73 | });
74 | }
75 |
76 | var fileName=document.getElementById('fileName');
77 | var fileSize=document.getElementById('fileSize');
78 | var imgDimensions=document.getElementById('imgDimensions');
79 | var fileType=document.getElementById('fileType');
80 | var lastModified=document.getElementById('lastModified');
81 |
82 | function scaleCanvas(_CANVAS, _IMG, _ZOOM_FACTOR,imgH, imgW, scale) {
83 | _CANVAS['style']['height'] = `${imgH}px`;
84 | _CANVAS['style']['width'] = `${imgW}px`;
85 |
86 | let cWidth=_ZOOM_FACTOR*imgW*scale;
87 | let cHeight=_ZOOM_FACTOR*imgH*scale;
88 |
89 | _CANVAS.width=cWidth;
90 | _CANVAS.height=cHeight;
91 |
92 | _CANVAS.getContext('2d').scale(scale, scale);
93 | _CANVAS.getContext('2d').drawImage(_IMG, 0, 0, imgW*_ZOOM_FACTOR, imgH*_ZOOM_FACTOR);
94 | }
95 |
96 | uploadImg.addEventListener('change', async(evt) => {
97 | let file = evt.target.files[0];
98 | if(!file) return;
99 |
100 | fileName.innerHTML=file.name;
101 | fileSize.innerHTML=`${(parseFloat(file.size) * byteToKBScale).toFixed(2)} 🇰🇧`;
102 | fileType.innerHTML=file.type;
103 | lastModified.innerHTML=millisecondsToDateStr(file.lastModified);
104 |
105 | let b64str = await readFileAsDataURL(file);
106 | let _IMG=await loadImage(b64str);
107 |
108 | // set sizes in memory
109 | imgH=_IMG.naturalHeight;
110 | imgW=_IMG.naturalWidth;
111 | imgDimensions.innerHTML=`${imgW}px × ${imgH}px`;
112 |
113 | _IMG['style']['height']=`${imgH}px`;
114 | _IMG['style']['width']=`${imgW}px`;
115 | _IMG['style']['border'] ='1px solid #d3d3d3';
116 | _IMG.id='imgUpload';
117 | imgCard.appendChild(_IMG);
118 |
119 | let _CANVAS=document.createElement('canvas');
120 | _CANVAS['style']['border'] ='1px solid #d3d3d3';
121 | _CANVAS.id='imgCanvas';
122 | scaleCanvas(_CANVAS,_IMG,_ZOOM_FACTOR,imgH,imgW,scale);
123 | canvasCard.appendChild(_CANVAS);
124 |
125 | // display size
126 | let requiredWidth=(canvasCard.clientWidth-16);
127 | _ZOOM_FACTOR=requiredWidth/parseFloat(_CANVAS['style']['width'].replace('px',''));
128 |
129 | imgH =_ZOOM_FACTOR*parseFloat(_IMG['style']['height'].replace('px',''));
130 | imgW =_ZOOM_FACTOR*parseFloat(_IMG['style']['width'].replace('px',''));
131 |
132 | _IMG['style']['height'] = `${imgH}px`;
133 | _IMG['style']['width'] = `${imgW}px`;
134 |
135 | cssDIVCard['style']['height'] = `${imgH}px`;
136 | cssDIVCard['style']['width'] = `${imgW}px`;
137 | cssDIVCard['style']['border'] ='1px solid #d3d3d3';
138 |
139 | cssDIVCard['style']['background-image']='url('+b64str+')';
140 | cssDIVCard['style']['background-position']='center';
141 | cssDIVCard['style']['background-repeat']='no-repeat';
142 | cssDIVCard['style']['background-size']='contain';
143 |
144 | scaleCanvas(_CANVAS,_IMG,_ZOOM_FACTOR,imgH,imgW,scale);
145 | }, false);
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 | ʀᴇɴᴅᴇʀ ᴀɴ ɪᴍᴀɢᴇ ɪɴ ʜᴛᴍʟ5 | sʜᴏᴡᴄᴀsᴇs ᴍᴜʟᴛɪᴘʟᴇ ᴜɴɪɋᴜᴇ ɪᴍᴘʟᴇᴍᴇɴᴛᴀᴛɪᴏɴs
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 | | Dimensions Width × Height |
37 | |
38 |
39 |
40 | | Available Dimensions Width × Height |
41 | |
42 |
43 |
44 | | Color Depth Bit Depth |
45 | |
46 |
47 |
48 | | Color Resolution |
49 | |
50 |
51 |
52 | | Device to CSS Pixel Ratio |
53 | |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 | | Name |
67 | |
68 |
69 |
70 | | Size |
71 | |
72 |
73 |
74 | | Type |
75 | |
76 |
77 |
78 | | Dimensions Width × Height |
79 | |
80 |
81 |
82 | | Last Modified |
83 | |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
98 |
99 |
105 |
106 |
112 |
113 |