diff --git a/demo/js/index.js b/demo/js/index.js
index 470c613..de97b95 100644
--- a/demo/js/index.js
+++ b/demo/js/index.js
@@ -63,6 +63,24 @@
         return u8arr;
     }
 
+    var getImgWithColorPreset=(dataURL,callback)=>{
+        //console.log(dataURL);
+        const canvas = document.createElement('canvas');
+        const context = canvas.getContext('2d');
+        if (!context) callback(dataURL);
+        const img = new Image();
+        img.onload=()=>{
+            const width = img.naturalWidth;
+            const height = img.naturalHeight;
+            canvas.width = width;
+            canvas.height = height;
+            context.drawImage(img, 0, 0);
+            //console.log(width,height,canvas.toDataURL('image/png'));
+            callback(canvas.toDataURL('image/png'));
+        }
+        img.src = dataURL;
+    }
+
     /* event handler for image picker */
     var readURL = function(file) {
         var dataUrlReader = new FileReader();
@@ -71,10 +89,11 @@
             $('#input-file-stats').innerHTML = 'Input image [' + readableFileSize(file.size) + ']';
             $('#terminal').style.display = 'block';
             $('#file-dropper').style.display = 'none';
-            inputImageData = dataURLtoUint8(e.target.result);
+            getImgWithColorPreset(e.target.result,(data)=>{
+                inputImageData = dataURLtoUint8(data);
+            })
         }
         dataUrlReader.readAsDataURL(file);
-
     }
 
     function getRangeSliderValue() {
diff --git a/demo/js/index.min.js b/demo/js/index.min.js
index 537b565..40f5860 100644
--- a/demo/js/index.min.js
+++ b/demo/js/index.min.js
@@ -1 +1 @@
-!function(){function i(a,b){var c=b?1e3:1024;if(Math.abs(a)<c)return a+" B";var d=b?["kB","MB","GB","TB","PB","EB","ZB","YB"]:["KiB","MiB","GiB","TiB","PiB","EiB","ZiB","YiB"],e=-1;do a/=c,++e;while(Math.abs(a)>=c&&e<d.length-1);return a.toFixed(1)+" "+d[e]}function j(a){for(var b=a.split(","),d=(b[0].match(/:(.*?);/)[1],atob(b[1])),e=d.length,f=new Uint8Array(e);e--;)f[e]=d.charCodeAt(e);return f}function l(){var a=$(".range-slider"),b=a.getElementsByTagName("input"),c=parseFloat(b[0].value),d=parseFloat(b[1].value);if(c>d){var e=d;d=c,c=e}var f=$(".range-values");return f.innerHTML=c+" - "+d,c+"-"+d}function m(){var a=$("#speed-control");return $(".speed-value").innerHTML=a.value,a.value}function n(b){a.postMessage({type:"command",arguments:b,file:{name:"input.png",data:g}})}function o(a,b){if(b.match(/\.jpeg|\.gif|\.jpg|\.png/)){var c=new Blob([a]),d=window.URL.createObjectURL(c);return d}}function p(){a=new Worker("js/worker.js"),a.onmessage=function(a){var b=a.data;if("ready"==b.type)$(".loading").style.display="none",$(".loaded").style.display="block",$("#compress").disabled=!1,$("#reset").disabled=!1;else if("stdout"==b.type)c.textContent+=b.data+"\n";else if("start"==b.type)c.textContent="Worker has received command\n";else if("done"==b.type){var d=b.data;d&&d.length&&(c.className="closed"),d&&d.forEach(function(a){$("#output-img").src=o(a.data,"output.png"),$("#output-file-stats").innerHTML="Output image ["+i(a.data.byteLength)+"]",$(".output-preview").style.display="block",$(".compress-text").style.display="none",$(".refresh-container").style.display="block"})}}}var a,c,c=null;window.$=document.querySelector.bind(document);var g=null,k=function(a){var b=new FileReader;b.onload=function(b){$("#input-img").setAttribute("src",b.target.result),$("#input-file-stats").innerHTML="Input image ["+i(a.size)+"]",$("#terminal").style.display="block",$("#file-dropper").style.display="none",g=j(b.target.result)},b.readAsDataURL(a)};document.addEventListener("DOMContentLoaded",function(){c=$("#output"),p(),$("#filePicker").onchange=function(a){if(this.files&&this.files[0]){if(!this.files[0].name.match(/.(png)$/i))return void alert("not a valid PNG image");k(this.files[0])}},$("#file-dropper").ondragover=function(){return this.className="hover",!1},$("#file-dropper").ondragend=function(){return this.className="",!1},$("#file-dropper").ondrop=function(a){this.className="",a.preventDefault();var b=a.dataTransfer.files[0];k(b)};var a=$(".range-slider");Array.isArray(a)||(a=[a]);for(var b=0;b<a.length;b++)for(var d=a[b].getElementsByTagName("input"),e=0;e<d.length;e++)"range"===d[e].type&&(d[e].oninput=l,d[e].oninput());$("#speed-control").oninput=m,$("#speed-control").oninput(),$("#compress").onclick=function(a){a.preventDefault(),$("#console").style.display="block",$(".compress-text").style.display="block",$("#control-panel").style.display="none",n({quality:l(),speed:""+m()})},$("#reset").onclick=function(a){a.preventDefault(),$("#input-img").setAttribute("src",""),$("#input-file-stats").innerHTML="",$("#terminal").style.display="none",$("#file-dropper").style.display="block",g=null},$("#refresh").onclick=function(a){a.preventDefault(),$("#output-img").src="",$("#output-file-stats").innerHTML="",$(".output-preview").style.display="none",$("#output").innerHTML="",$("#console").style.display="none",$("#input-img").setAttribute("src",""),$("#input-file-stats").innerHTML="",$("#terminal").style.display="none",$("#file-dropper").style.display="block",$(".refresh-container").style.display="none",$("#control-panel").style.display="block",g=null}})}();
+!function(){var e,t=null;window.$=document.querySelector.bind(document);var n=null;function a(e,t){var n=t?1e3:1024;if(Math.abs(e)<n)return e+" B";var a=t?["kB","MB","GB","TB","PB","EB","ZB","YB"]:["KiB","MiB","GiB","TiB","PiB","EiB","ZiB","YiB"],i=-1;do{e/=n,++i}while(Math.abs(e)>=n&&i<a.length-1);return e.toFixed(1)+" "+a[i]}var i=function(e){var t=new FileReader;t.onload=function(t){$("#input-img").setAttribute("src",t.target.result),$("#input-file-stats").innerHTML="Input image ["+a(e.size)+"]",$("#terminal").style.display="block",$("#file-dropper").style.display="none",((e,t)=>{const n=document.createElement("canvas"),a=n.getContext("2d");a||t(e);const i=new Image;i.onload=(()=>{const e=i.naturalWidth,r=i.naturalHeight;n.width=e,n.height=r,a.drawImage(i,0,0),t(n.toDataURL("image/png"))}),i.src=e})(t.target.result,e=>{n=function(e){for(var t=e.split(","),n=(t[0].match(/:(.*?);/)[1],atob(t[1])),a=n.length,i=new Uint8Array(a);a--;)i[a]=n.charCodeAt(a);return i}(e)})},t.readAsDataURL(e)};function r(){var e=$(".range-slider").getElementsByTagName("input"),t=parseFloat(e[0].value),n=parseFloat(e[1].value);if(t>n){var a=n;n=t,t=a}return $(".range-values").innerHTML=t+" - "+n,t+"-"+n}function l(){var e=$("#speed-control");return $(".speed-value").innerHTML=e.value,e.value}function s(){(e=new Worker("js/worker.js")).onmessage=function(e){var n=e.data;if("ready"==n.type)$(".loading").style.display="none",$(".loaded").style.display="block",$("#compress").disabled=!1,$("#reset").disabled=!1;else if("stdout"==n.type)t.textContent+=n.data+"\n";else if("start"==n.type)t.textContent="Worker has received command\n";else if("done"==n.type){var i=n.data;i&&i.length&&(t.className="closed"),i&&i.forEach(function(e){$("#output-img").src=function(e,t){if(t.match(/\.jpeg|\.gif|\.jpg|\.png/)){var n=new Blob([e]);return window.URL.createObjectURL(n)}}(e.data,"output.png"),$("#output-file-stats").innerHTML="Output image ["+a(e.data.byteLength)+"]",$(".output-preview").style.display="block",$(".compress-text").style.display="none",$(".refresh-container").style.display="block"})}}}document.addEventListener("DOMContentLoaded",function(){t=$("#output"),s(),$("#filePicker").onchange=function(e){if(this.files&&this.files[0]){if(!this.files[0].name.match(/.(png)$/i))return void alert("not a valid PNG image");i(this.files[0])}},$("#file-dropper").ondragover=function(){return this.className="hover",!1},$("#file-dropper").ondragend=function(){return this.className="",!1},$("#file-dropper").ondrop=function(e){this.className="",e.preventDefault();var t=e.dataTransfer.files[0];i(t)};var a=$(".range-slider");Array.isArray(a)||(a=[a]);for(var o=0;o<a.length;o++)for(var u=a[o].getElementsByTagName("input"),p=0;p<u.length;p++)"range"===u[p].type&&(u[p].oninput=r,u[p].oninput());$("#speed-control").oninput=l,$("#speed-control").oninput(),$("#compress").onclick=function(t){var a;t.preventDefault(),$("#console").style.display="block",$(".compress-text").style.display="block",$("#control-panel").style.display="none",a={quality:r(),speed:""+l()},e.postMessage({type:"command",arguments:a,file:{name:"input.png",data:n}})},$("#reset").onclick=function(e){e.preventDefault(),$("#input-img").setAttribute("src",""),$("#input-file-stats").innerHTML="",$("#terminal").style.display="none",$("#file-dropper").style.display="block",n=null},$("#refresh").onclick=function(e){e.preventDefault(),$("#output-img").src="",$("#output-file-stats").innerHTML="",$(".output-preview").style.display="none",$("#output").innerHTML="",$("#console").style.display="none",$("#input-img").setAttribute("src",""),$("#input-file-stats").innerHTML="",$("#terminal").style.display="none",$("#file-dropper").style.display="block",$(".refresh-container").style.display="none",$("#control-panel").style.display="block",n=null}})}();