-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.embed.html
1 lines (1 loc) · 14 KB
/
index.embed.html
1
<meta charset=UTF-8 content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0"name=viewport><title>MDPaint 0.6.1</title><style>body{background:#333}canvas{background:#fff;background:linear-gradient(to right,rgba(192,192,192,.75),rgba(192,192,192,.75)),linear-gradient(to right,#000 50%,#fff 50%),linear-gradient(to bottom,#000 50%,#fff 50%);background-blend-mode:normal,difference,normal;background-size:20px 20px}#paint_app{margin-left:auto;margin-right:auto;width:500px}.placeholder{position:absolute;z-index:999}.picturepanel{max-width:100%;max-height:300px;width:502px;height:302px;border:1px solid #636363;overflow:auto;position:relative;resize:both;scrollbar-width:thin;scrollbar-color:#444 #111}.picturepanel canvas{display:block}.toolbar>*{margin-right:5px}.dropbtn{background:#000;color:#fff;padding:5px 16px;font-size:12px;border:1px solid #001733}.dropbtn:hover{background:#000c1a;border:1px solid #001733}.dropbtn:focus{background:#001733;border:1px solid #002e66}.dropbtn.bright{color:#000;background:#fff;border:1px solid #cce8ff}.dropbtn.bright:hover{background:#e5f3ff;border:1px solid #cce8ff}.dropbtn.bright:focus{background:#cce8ff;border:1px solid #99d1ff}.dropdown{position:relative;display:inline-block}.dropdown-content{display:none;position:absolute;background:#f1f1f1;width:auto;min-width:160px;max-width:220px;overflow:auto;box-shadow:0 8px 16px #000;z-index:1}.dropdown-content>*{color:#000;padding:6px;text-decoration:none;display:block;margin:0;border:none;outline:0;cursor:default}.dropdown-content :hover{background:#90c8f6}.dropdown-content.show{display:block}</style><div id=paint_app><script>var MDPaint=function(){"use strict";let e={},t={},a={},n=(e,t,...a)=>{let n,l,r=document.createElement(e);if(t)for(n in t)t.hasOwnProperty(n)&&r.setAttribute(n,t[n]);for(l of a)"string"==typeof l&&(l=document.createTextNode(l)),r.append(l);return r},l=(e,t)=>{let a=t.getBoundingClientRect();return{x:~~((e=e.touches?e.touches[0]:e).clientX-a.left),y:~~(e.clientY-a.top)}},r=(e,t)=>{let a=n=>{removeEventListener("mousedown",e),removeEventListener("mousemove",e),removeEventListener("mouseup",a),removeEventListener("touchstart",e),removeEventListener("touchmove",e),removeEventListener("touchend",a),t&&t(n)};addEventListener("mousedown",e),addEventListener("mousemove",e),addEventListener("mouseup",a),addEventListener("touchstart",e),addEventListener("touchmove",e),addEventListener("touchend",a)},o=(e,t)=>{let a=n("img",{src:t});a.crossOrigin="Anonymous",a.addEventListener("load",(()=>{let t=e.fillStyle,n=e.lineWidth;e.save(),e.canvas.width=a.width,e.canvas.height=a.height,e.drawImage(a,0,0),e.fillStyle=e.strokeStyle=t,e.lineWidth=n,e.restore()}))},s=e=>{let t,a;for(;;)if(t=2*Math.random()-1,a=2*Math.random()-1,t*t+a*a<1)return{x:t*e,y:a*e}},i=e=>{let[t,a,n]=e.replace(/^rgba?\(|\s+|\)$/g,"").split(",");return`#${((1<<24)+(parseInt(t)<<16)+(parseInt(a)<<8)+parseInt(n)).toString(16).slice(1)}`},d=(e,t)=>e.style.cursor=t,c=(e,t,a)=>{let n=4,l=4*(t.x+t.y*e.width),r=4*(a.x+a.y*e.width);for(;n--;)if(e.data[l+n]!=e.data[r+n])return 0;return 1};return e.tool=e=>{let t=n("select");for(let e in a)t.append(n("option",{},e));let l=n=>{(1==n.which||3==n.which||n.touches)&&(a[t.value](n,e),n.preventDefault())};return e.canvas.addEventListener("mousedown",l),e.canvas.addEventListener("touchstart",l),t.addEventListener("wheel",(e=>{e.deltaY>0&&t.selectedIndex<t.length-1?t.selectedIndex++:e.deltaY<0&&t.selectedIndex>0&&t.selectedIndex--})),window.addEventListener("keydown",(a=>{if("B"==a.key.toUpperCase()&&(t.selectedIndex=0),"E"==a.key.toUpperCase()&&(t.selectedIndex=1),"T"==a.key.toUpperCase()&&(t.selectedIndex=2),"S"==a.key.toUpperCase()&&(t.selectedIndex=3),"O"==a.key.toUpperCase()&&(5==t.selectedIndex?t.selectedIndex=6:4==t.selectedIndex?t.selectedIndex=5:t.selectedIndex=4),"K"==a.key.toUpperCase()&&(t.selectedIndex=8),"R"==a.key.toUpperCase()&&(t.selectedIndex=9),"F"==a.key.toUpperCase()&&(10==t.selectedIndex?t.selectedIndex=11:t.selectedIndex=10),"G"==a.key.toUpperCase()&&(14==t.selectedIndex?t.selectedIndex=7:13==t.selectedIndex?t.selectedIndex=14:12==t.selectedIndex?t.selectedIndex=13:t.selectedIndex=12),a.ctrlKey&&"Z"==a.key.toUpperCase()&&(a.preventDefault(),alert("Undo Feature Is not avaiable for now")),a.ctrlKey&&"Y"==a.key.toUpperCase()&&(a.preventDefault(),alert("Redo Feature Is not avaiable for now")),a.ctrlKey&&"O"==a.key.toUpperCase()){a.preventDefault();let t,l=n("input",{type:"file",accept:"image/*",style:"display:none"});l.click(),l.addEventListener("change",(()=>{t=new FileReader,t.readAsDataURL(l.files[0]),t.onload=()=>{o(e,t.result),t=null,l=""}}))}if(a.ctrlKey&&"S"==a.key.toUpperCase()){a.preventDefault();let t="image/png";a.shiftKey&&(t=prompt("Save As Format:","image/png")),alert("You May Receive 'Window Popup Blocked' Message"),n("a",{href:e.canvas.toDataURL(t),target:"_blank"}).click()}})),n("span",{},"Tool:",t)},e.effect=e=>{let a,l=n("div",{id:"myDropdown",class:"dropdown-content"});for(let r in t)a=n("a",{},r),a.onclick=a=>{t[r](e)},l.append(a);return window.addEventListener("click",(e=>{if(!e.target.matches(".dropbtn")){let e=document.getElementsByClassName("dropdown-content"),t=e.length;for(;t--;)e[t].classList.contains("show")&&e[t].classList.remove("show")}})),n("div",{class:"dropdown"},n("button",{onclick:'myDropdown.classList.toggle("show")',class:"dropbtn"},"Effects"),l)},e.color=e=>{var t=n("input",{type:"color",style:"background:#000",value:"#000000",id:"inputColor1"}),a=n("input",{type:"color",style:"background:#fff",value:"#ffffff",id:"inputColor2"});return t.addEventListener("change",(()=>{e.fillStyle=e.strokeStyle=t.style.background=t.value})),a.addEventListener("change",(()=>{e.fillStyle=e.strokeStyle=a.style.background=a.value})),n("span",{},"Color:",t,a)},e.brushSize=e=>{let t=n("select");return[1,2,3,5,8,12,25,35,50,75,100].forEach((e=>{t.append(n("option",{value:e},e+"px"))})),t.addEventListener("change",(()=>{e.lineWidth=t.value})),t.addEventListener("wheel",(a=>{a.deltaY>0&&t.selectedIndex<t.length-1?t.selectedIndex++:a.deltaY<0&&t.selectedIndex>0&&t.selectedIndex--,e.lineWidth=t.value})),t.selectedIndex=e.lineWidth=5,n("span",{},"Brush size:",t)},e.resAdjust=e=>{let t=n("input",{type:"number",placeholder:"Width",value:500,min:1,onwheel:"this.focus()"}),a=n("input",{type:"number",placeholder:"Height",value:300,min:1,onwheel:"this.focus()"});return t.addEventListener("input",(a=>{let n=e.fillStyle,l=e.lineWidth,r=e.getImageData(0,0,e.canvas.width,e.canvas.height);e.save(),e.canvas.width=t.value,e.restore(),e.fillStyle=e.strokeStyle=n,e.lineWidth=l,e.putImageData(r,0,0)})),a.addEventListener("input",(t=>{let n=e.fillStyle,l=e.lineWidth,r=e.getImageData(0,0,e.canvas.width,e.canvas.height);e.save(),e.canvas.height=a.value,e.restore(),e.fillStyle=e.strokeStyle=n,e.lineWidth=l,e.putImageData(r,0,0)})),n("span",{},t,a)},e.save=e=>{let t=n("a",{href:"/",target:"_blank"},n("button",{},"Save")),a=a=>{try{t.href=e.canvas.toDataURL("image/png")}catch(e){if(!(e instanceof SecurityError))throw e;t.href="javascript:alert("+JSON.stringify("Can't save:"+e.toString())+")"}};return t.addEventListener("mouseover",a),t.addEventListener("focus",a),t},e.openFile=e=>{let t,a=n("input",{type:"file",accept:"image/*",style:"display:none"});return a.addEventListener("change",(()=>{a.files.length&&(t=new FileReader,t.readAsDataURL(a.files[0]),t.onload=()=>{o(e,t.result),t=null})})),n("button",{},n("label",{},"Open file",a))},e.openURL=e=>{let t=n("form",{},n("input",{type:"text",placeholder:"Open URL"}),n("button",{type:"submit"},"Load"));return t.addEventListener("submit",(a=>{a.preventDefault(),o(e,t.querySelector("input").value)})),t},t.Invert=e=>{let t,a=e.getImageData(0,0,e.canvas.width,e.canvas.height),n=a.data;for(t=n.length;t-=4;)n[t]=255-n[t],n[t+1]=255-n[t+1],n[t+2]=255-n[t+2];e.putImageData(a,0,0)},t.Sepia=e=>{let t,a,n,l,r=e.getImageData(0,0,e.canvas.width,e.canvas.height),o=r.data,s=255*(prompt("Sepia Level","10")||10)/100;for(l=o.length;l-=4;)t=a=n=.3*o[l]+.59*o[l+1]+.11*o[l+2],o[l]=t+40,o[l+1]=a+20,o[l+2]=n-s;e.putImageData(r,0,0)},t.Opacity=e=>{let t=e.getImageData(0,0,e.canvas.width,e.canvas.height),a=t.data,n=0,l=255*(prompt("Opacity:","1")||1);for(;n<a.length;n+=4)a[n+3]>0&&(a[n+3]=l);e.putImageData(t,0,0)},t.Grayscale=e=>{let t=0,a=e.getImageData(0,0,e.canvas.width,e.canvas.height),n=a.data;for(;t<n.length;t+=4)n[t]=n[t+1]=n[t+2]=(n[t]+n[t+1]+n[t+2])/3;e.putImageData(a,0,0)},t.Noise=e=>{let t,a,n=prompt("Noise Intensity:","100")||100,l=e.getImageData(0,0,e.canvas.width,e.canvas.height),r=l.data;for(t=r.length;t-=4;)a=~~((2*Math.random()-1)*n),r[t]+=a,r[t+1]+=a,r[t+2]+=a;e.putImageData(l,0,0)},t.Rotate=e=>{iDt=e.getImageData(0,0,e.canvas.width,e.canvas.height),e.clearRect(0,0,e.canvas.width,e.canvas.height),e.save(),e.translate(e.canvas.width/2,e.canvas.height/2),e.rotate((prompt("Rotate to (deg):","90")||90)*Math.PI/180),e.putImageData(iDt,-e.canvas.width/2,-e.canvas.height/2),e.restore()},t.Threshold=e=>{let t,a=e.getImageData(0,0,e.canvas.width,e.canvas.height),n=a.data,l=prompt("Color 1:","255"),r=prompt("Color 2:","0"),o=prompt("Threshold:","128");for(t=0;t<n.length;t+=4)n[t+3]>0&&(n[t]=n[t+1]=n[t+2]=.2126*n[t]+.7152*n[t+1]+.0722*n[t+2]>=o?l:r);e.putImageData(a,0,0)},t.Vignette=e=>{let t=e.canvas.width,a=e.canvas.height,n=e.createRadialGradient(t/2,a/2,0,t/2,a/2,Math.sqrt(Math.pow(t/2,2)+Math.pow(a/2,2)));n.addColorStop(0,"rgba(0,0,0,0)"),n.addColorStop(.5,"rgba(0,0,0,0)"),n.addColorStop(1,"rgba(0,0,0,"+(prompt("Vignette","0.3")||.3)+")"),e.fillStyle=n,e.fillRect(0,0,t,a)},a.Brush=(e,t,a)=>{d(t.canvas,"crosshair"),t.lineCap="round";let n=l(e,t.canvas);r((e=>{t.beginPath(),t.moveTo(n.x,n.y),n=l(e,t.canvas),t.lineTo(n.x,n.y),t.stroke()}),a)},a.Erase=(e,t)=>{t.globalCompositeOperation="destination-out",a.Brush(e,t,(()=>{t.globalCompositeOperation="source-over"}))},a.Text=(e,t)=>{d(t.canvas,"");let a=prompt("Text:",""),n=prompt("Font:",Math.max(7,t.lineWidth)+"px sans-serif");if(n=n||Math.max(7,t.lineWidth)+"px sans-serif",a){let r=l(e,t.canvas);t.textBaseline="middle",t.textAlign="center",t.font=n,t.fillText(a,r.x,r.y)}},a.Spray=(e,t)=>{d(t.canvas,"");let a,n,o=t.lineWidth/2,i=Math.ceil(o*o*Math.PI/30),c=l(e,t.canvas),h=setInterval((()=>{for(a=i;a--;)n=s(o),t.fillRect(c.x+n.x,c.y+n.y,1,1)}),25);r((e=>{c=l(e,t.canvas)}),(()=>{clearInterval(h)}))},a["Shape (Rectangle)"]=(e,t)=>{d(t.canvas,"crosshair");let a,n=a=l(e,t.canvas),o=t.getImageData(0,0,t.canvas.width,t.canvas.height);r((e=>{t.putImageData(o,0,0),a=l(e,t.canvas),t.fillRect(n.x,n.y,a.x-n.x,a.y-n.y)}))},a["Shape (Circle)"]=(e,t)=>{d(t.canvas,"crosshair");let a,n,o=n=l(e,t.canvas),s=t.getImageData(0,0,t.canvas.width,t.canvas.height);r((e=>{t.putImageData(s,0,0),t.beginPath(),n=l(e,t.canvas),a=Math.abs(o.x-n.x+o.y-n.y),t.arc(o.x,o.y,a,0,2*Math.PI),t.fill()}))},a["Shape (Line)"]=(e,t)=>{d(t.canvas,"crosshair");let a,n=a=l(e,t.canvas),o=t.getImageData(0,0,t.canvas.width,t.canvas.height);t.lineCap="round",r((e=>{t.putImageData(o,0,0),a=l(e,t.canvas),t.beginPath(),t.moveTo(n.x,n.y),t.lineTo(a.x,a.y),t.stroke()}))},a["Gradient Color Configuration"]=(e,t)=>{d(t.canvas,"crosshair");let a,n,o=n=l(e,t.canvas),s=t.getImageData(0,0,t.canvas.width,t.canvas.height);r((e=>{a=t.createLinearGradient(o.x,o.y,n.x,n.y),a.addColorStop(0,inputColor1.value),a.addColorStop(1,inputColor2.value),n=l(e,t.canvas),t.fillStyle=a,t.fillRect(0,0,t.canvas.width,t.canvas.height)}),(e=>t.putImageData(s,0,0)))},a.Colorpicker=(e,t)=>{d(t.canvas,"");let a=l(e,t.canvas),n=t.getImageData(a.x,a.y,1,1).data,o=e.which,s="rgba(";for(let e=0;e<4;e++)s+=n[e],e<3&&(s+=",");s+=")",t.fillStyle=t.strokeStyle=s,1==o&&(inputColor1.value=i(s),inputColor1.style.background=s),3==o&&(inputColor2.value=i(s),inputColor2.style.background=s),r((e=>{let a=l(e,t.canvas),n=t.getImageData(a.x,a.y,1,1).data,r="rgba(";for(let e=0;e<4;e++)r+=n[e],e<3&&(r+=",");r+=")",t.fillStyle=t.strokeStyle=r,1==o&&(inputColor1.value=i(r),inputColor1.style.background=r),3==o&&(inputColor2.value=i(r),inputColor2.style.background=r)}))},a["Recolor (BETA)"]=(e,t)=>{d(t.canvas,"crosshair"),t.lineCap="round";let a,n,o,s=n=l(e,t.canvas),i=o=t.getImageData(n.x,n.y,1,1).data;r((e=>{for(o=t.getImageData(s.x,s.y,1,1).data,s=l(e,t.canvas),a=4;a--;)if(i[a]!=o[a])return;t.beginPath(),t.moveTo(n.x,n.y),n=l(e,t.canvas),t.lineTo(n.x,n.y),t.stroke()}))},a.Fill=(e,t)=>{d(t.canvas,"");let a=t.getImageData(0,0,t.canvas.width,t.canvas.height),n=l(e,t.canvas),r=new Array(a.width*a.height),o=[n];for(;o.length;){let e=o.pop(),l=e.x+e.y*a.width;r[l]||(t.fillRect(e.x,e.y,1,1),r[l]=!0,(i=e=>{e.x>=0&&e.x<a.width&&e.y>=0&&e.y<a.height&&c(a,n,e)&&o.push(e)})({x:(s=e).x-1,y:s.y}),i({x:s.x+1,y:s.y}),i({x:s.x,y:s.y-1}),i({x:s.x,y:s.y+1}))}var s,i},a["Fill (Global)"]=(e,t)=>{d(t.canvas,"");let a,n,r=t.canvas.width,o=t.canvas.height,s=t.getImageData(0,0,r,o),i=l(e,t.canvas);for(a=r;a--;)for(n=o;n--;)c(s,i,{x:a,y:n})&&t.fillRect(a,n,1,1)},a["Gradient (Linear)"]=(e,t)=>{d(t.canvas,"");let a,n,o=n=l(e,t.canvas);r((e=>{a=t.createLinearGradient(o.x,o.y,n.x,n.y),a.addColorStop(0,inputColor1.value),a.addColorStop(1,inputColor2.value),n=l(e,t.canvas),t.fillStyle=a,t.fillRect(0,0,t.canvas.width,t.canvas.height)}))},a["Gradient (Radial, BETA 1)"]=(e,t)=>{d(t.canvas,"");let a,n,o,s=n=l(e,t.canvas);r((e=>{a=Math.abs(s.x-n.x+s.y-n.y),o=t.createRadialGradient(s.x,s.y,0,s.x,s.y,a),o.addColorStop(0,inputColor1.value),o.addColorStop(1,inputColor2.value),n=l(e,t.canvas),t.fillStyle=o,t.fillRect(0,0,t.canvas.width,t.canvas.height)}))},a["Gradient (Radial, BETA 2)"]=(e,t)=>{d(t.canvas,"");let a,n,o=n=l(e,t.canvas);r((e=>{a=t.createRadialGradient(o.x,o.y,0,n.x,n.y,100),a.addColorStop(0,inputColor1.value),a.addColorStop(1,inputColor2.value),n=l(e,t.canvas),t.fillStyle=a,t.fillRect(0,0,t.canvas.width,t.canvas.height)}))},{create:t=>{let a=n("canvas",{width:500,height:300}),l=a.getContext("2d"),r=n("div",{class:"toolbar"});for(name in a.oncontextmenu=e=>{if(3==e.which)return e.preventDefault,!1},e)r.append(e[name](l));a.addEventListener("mousedown",(e=>{1==e.which?l.fillStyle=l.strokeStyle=inputColor1.value:3==e.which&&(l.fillStyle=l.strokeStyle=inputColor2.value)})),t.append(r),t.append(n("div",{class:"picturepanel"},a))}}};new MDPaint().create(paint_app)</script>