forked from ppfun/pixelplanet
42 lines
12 KiB
HTML
42 lines
12 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>PixelPlace.fun - Image Converter</title>
|
||
|
|
<link rel="icon" href="/favicon.ico" type="image/x-icon"/>
|
||
|
|
<script src="bundle.js"></script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
#paletta {
|
||
|
|
width: 200px;
|
||
|
|
image-rendering: pixelated;
|
||
|
|
image-rendering: -moz-crisp-edges;
|
||
|
|
margin-right: 50px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
function processImage(){for(var t=document.getElementsByTagName("canvas");t[0];)t[0].parentNode.removeChild(t[0]);var i=document.getElementById("img");console.time("quant"),q.dithKern=document.getElementById("dithKern").value,q.sample(i);var e=q.palette(),r=q.reduce(i);console.timeEnd("quant"),putPixels(r,i.naturalWidth,i.naturalHeight),putPixels(e,8,8,"paletta")}function putPixels(t,i,e,r){var s=document.createElement("canvas");r&&s.setAttribute("id",r),s.width=i,s.height=e;var n=s.getContext("2d"),a=n.createImageData(s.width,s.height);a.data.set(t),n.putImageData(a,0,0),document.body.appendChild(s)}(function(){function t(t){if(t=t||{},this.method=t.method||2,this.colors=t.colors||256,this.initColors=t.initColors||4096,this.initDist=t.initDist||.01,this.distIncr=t.distIncr||.005,this.hueGroups=t.hueGroups||10,this.satGroups=t.satGroups||10,this.lumGroups=t.lumGroups||10,this.minHueCols=t.minHueCols||0,this.hueStats=this.minHueCols?new i(this.hueGroups,this.minHueCols):null,this.boxSize=t.boxSize||[64,64],this.boxPxls=t.boxPxls||2,this.palLocked=!1,this.dithKern=t.dithKern||null,this.dithSerp=t.dithSerp||!1,this.dithDelta=t.dithDelta||0,this.histogram={},this.idxrgb=t.palette?t.palette.slice(0):[],this.idxi32=[],this.i32idx={},this.i32rgb={},this.useCache=!1!==t.useCache,this.cacheFreq=t.cacheFreq||10,this.reIndex=t.reIndex||0==this.idxrgb.length,this.colorDist="manhattan"==t.colorDist?function(t,i){var e=Math.abs(i[0]-t[0]),r=Math.abs(i[1]-t[1]),s=Math.abs(i[2]-t[2]);return(o*e+u*r+l*s)/d}:function(t,i){var e=i[0]-t[0],r=i[1]-t[1],s=i[2]-t[2];return Math.sqrt(o*e*e+u*r*r+l*s*s)/c},this.idxrgb.length>0){var e=this;this.idxrgb.forEach(function(t,i){var r=(255<<24|t[2]<<16|t[1]<<8|t[0])>>>0;e.idxi32[i]=r,e.i32idx[r]=i,e.i32rgb[r]=t})}}function i(t,i){this.numGroups=t,this.minCols=i,this.stats={};for(var e=-1;e<t;e++)this.stats[e]={num:0,cols:[]};this.groupsFull=0}function e(t,i,e){var r,s,n,a,h;if(t/=255,i/=255,e/=255,(r=Math.max(t,i,e))==(s=Math.min(t,i,e)))n=a=0;else{switch(h=r-s,a=(r+s)/2>.5?h/(2-r-s):h/(r+s),r){case t:n=(i-e)/h+(i<e?6:0);break;case i:n=(e-t)/h+2;break;case e:n=(t-i)/h+4}n/=6}return{h:n,s:a,l:function(t,i,e){return Math.sqrt(o*t*t+u*i*i+l*e*e)}(t,i,e)}}function r(t,i){var e=1/i,r=e/2;if(t>=1-r||t<=r)return 0;for(var s=1;s<i;s++){var n=s*e;if(t>=n-r&&t<=n+r)return s}}function s(t){return t}function n(t){return t}function a(t){return Object.prototype.toString.call(t).slice(8,-1)}function h(t,i){var e,r,s,n,h,o;switch(a(t)){case"HTMLImageElement":(e=document.createElement("canvas")).width=t.naturalWidth,e.height=t.naturalHeight,(r=e.getContext("2d")).drawImage(t,0,0);case"Canvas":case"HTMLCanvasElement":e=e||t,r=r||e.getContext("2d");case"CanvasRenderingContext2D":r=r||t,e=e||r.canvas,s=r.getImageData(0,0,e.width,e.height);case"ImageData":i=(s=s||t).width,n="CanvasPixelArray"==a(s.data)?new Uint8Array(s.data):s.data;case"Array":case"CanvasPixelArray":n=n||new Uint8Array(t);case"Uint8Array":case"Uint8ClampedArray":n=n||t,h=new Uint32Array(n.buffer);case"Uint32Array":h=h||t,n=n||new Uint8Array(h.buffer),i=i||h.length,o=h.length/i}return{can:e,ctx:r,imgd:s,buf8:n,buf32:h,width:i,height:o}}t.prototype.sample=function(t,i){if(this.palLocked)throw"Cannot sample additional images, palette already assembled.";var e=h(t,i);switch(this.method){case 1:this.colorStats1D(e.buf32);break;case 2:this.colorStats2D(e.buf32,e.width)}},t.prototype.reduce=function(t,i,e,r){if(this.palLocked||this.buildPal(),e=e||this.dithKern,r=void 0!==r?r:this.dithSerp,i=i||1,e)a=this.dither(t,e,r);else for(var s=h(t).buf32,n=s.length,a=new Uint32Array(n),o=0;o<n;o++)l=s[o],a[o]=this.nearestColor(l);if(1==i)return new Uint8Array(a.buffer);if(2==i){var u=[];for(n=a.length,o=0;o<n;o++){var l=a[o];u[o]=this.i32idx[l]}return u}},t.prototype.dither=function(t,i,e){var r={FloydSteinberg:[[7/16,1,0],[3/16,-1,1],[5/16,0,1],[1/16,1,1]],FalseFloydSteinberg:[[3/8,1,0],[3/8,0,1],[.25,1,1]],Stucki:[[8/42,1,0],[4/42,2,0],[2/42,-2,1],[4/42,-1,1],[8/42,0,1],[4/42,1,1],[2/42,2,1],[1/42,-2,2],[2/42,-1,2],[4/42,0,2],[2/42,1,2],[1/42,2,2]],Atkinson:[[1/8,1,0],
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
Select your image: <input type="file" id="getimg"/><br>
|
||
|
|
Conversion Strategy: <select id="dithKern">
|
||
|
|
<option value="">Default</option>
|
||
|
|
<option value="FloydSteinberg" selected>FloydSteinberg</option>
|
||
|
|
<option value="Stucki">Stucki</option><option value="Atkinson">Atkinson</option>
|
||
|
|
<option value="Jarvis">Jarvis</option>
|
||
|
|
<option value="Burkes">Burkes</option>
|
||
|
|
<option value="Sierra">Sierra</option>
|
||
|
|
<option value="TwoSierra">TwoSierra</option>
|
||
|
|
<option value="SierraLite">SierraLite</option>
|
||
|
|
<option value="FalseFloydSteinberg">FalseFloyd</option>
|
||
|
|
</select>
|
||
|
|
<br>
|
||
|
|
<a href="https://github.com/leeoniya/RgbQuant.js/">Github Reference!</a><br>
|
||
|
|
<img id="img" src="vpPlace.png" alt=""><br>
|
||
|
|
Converted image<br>
|
||
|
|
</body>
|
||
|
|
</html>
|