ardeshireshghi/jpg_to_png_convertor.html

## jpg_to_png_convertor.html
<!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>JPG Image to convert</label>
        <input type="file" name="image" />
      </div>
    </section>
  <script type="text/javascript">
    (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>
	<!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>JPG Image to convert</label>
	<input type="file" name="image" />
	</div>
	</section>
	<script type="text/javascript">
	(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>