imageconverter/test.html at master · Centipede5/imageconverter · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html>
<head>
  <title>JPG to PNG</title>
  <style type="text/css">
        body {
      margin: 0;
      padding: 0;
      height: 100%;
      text-align: center;
    }

    .form-control {
      margin-top: 20px;
    }
  </style>
</head>
<body>
  <section class="jpg-convertor">
  <div class="form-control">
    <label>Pick jpg Image to convert</label>
    <input type="file" name="image" />
  </div>
</section>
<script>
    (function(window) {
   const JpgToPngConvertor = (() => {
     function convertor(imageFileBlob, options) {
       options = options || {};
       const defaults = {
         downloadLinkSelector: '.js-download-png'
       };
       const settings = extend(defaults, options);
       const canvas = document.createElement('canvas');
       const ctx = canvas.getContext("2d");
       const imageEl = createImage();
       const downloadLink = settings.downloadEl || createDownloadLink();

       function createImage(options) {
         options = options || {};
         const img = (Image) ? new Image() : document.createElement('img');
         const parent = options.parentEl || document.body;
         img.style.width = (options.width) ? options.width + 'px' : 'auto';
         img.style.height = (options.height) ? options.height + 'px' : 'auto';
         return img;
       }

       function extend(target, source) {
         for (let propName in source) {
           if (source.hasOwnProperty(propName)) {
             target[propName] = source[propName];
           }
         }
         return target;
       }

       function createDownloadLink() {
         return document.createElement('a');
       }

       function isFirefox() {
         return navigator.userAgent.indexOf("Firefox") > -1;
       }

       function download() {
         // Add download link to DOM in case it is not there and on the firefox
         if (!document.contains(downloadLink) && isFirefox()) {
           downloadLink.style.display = 'none';
           document.body.appendChild(downloadLink);
         }
         if ('click' in downloadLink) {
           downloadLink.click();
         } else {
           downloadLink.dispatchEvent(createClickEvent());
         }
       }

       function updateDownloadLink(jpgFileName, pngBlob) {
         const linkEl = downloadLink;
         const pngFileName = jpgFileName.replace(/jpe?g/i, 'png');
         linkEl.setAttribute('download', pngFileName);
         linkEl.href = window.URL.createObjectURL(pngBlob);
         // If there is custom download link we don't download automatically
         if (settings.downloadEl) {
           settings.downloadEl.style.display = 'block';
         } else {
           download();
         }
       }

       function createClickEvent() {
         if ('MouseEvent' in window) {
           return new MouseEvent('click');
         } else {
           const evt = document.createEvent("MouseEvents");
           evt.initMouseEvent("click", true, true, window);
           return evt;
         }
       }

       function process() {
         const imageUrl = window.URL.createObjectURL(imageFileBlob);
         imageEl.onload = (e) => {
           canvas.width = e.target.width;
           canvas.height = e.target.height;
           ctx.drawImage(e.target, 0, 0, e.target.width, e.target.height);
           canvas.toBlob(updateDownloadLink.bind(window, imageFileBlob.name), 'image/png', 1);
         };
         imageEl.src = imageUrl;
         if (settings.downloadEl) {
           settings.downloadEl.style.display = 'none';
         }
       }
       return {
         process: process
       };
     }
     return convertor;
   })();
   const imageFileEl = document.querySelector('[name="image"]');
   imageFileEl.addEventListener('change', (event) => {
     const jpgImageFileBlob = event.currentTarget.files[0];
     // Validate
     if (jpgImageFileBlob.type.match(/image\/jpe?g/i) !== null) {
       JpgToPngConvertor(jpgImageFileBlob).process();
     } else {
       alert('Invalid JPG image file');
     }
   }, false);
 })(window);
</script>
</body>
</html>