Commit a9246d0f authored by Luc Didry's avatar Luc Didry
Browse files

Fix Chrome fillStyle bug

parent 381e4c58
......@@ -621,20 +621,20 @@ function refreshText() {
function drawOver(ctx, rc, ra, ws, wc, wa, wf, wfs, w, wx, wy, ps, pc, pa, pf, pfs, p, px, py, gli) {
// Inside rounded rectangle
ctx.lineWidth = 20;
ctx.strokeStyle = rc.val()+alphaPercentageToHex(ra.val());
ctx.strokeStyle = colorToRGBA(rc.val(), ra.val());
roundRect(ctx, 25, 25, 750, 350, 20, false);
ctx.textAlign="center";
// Write WE MAKE
var style = (wfs.val() === 'regular') ? ' ' : wfs.val()+' ';
var style = (wfs.val() === 'regular') ? '' : wfs.val()+' ';
ctx.font = style+parseInt(ws.val())+'px \''+wf.val()+'\'';
ctx.fillStyle = wc.val()+alphaPercentageToHex(wa.val());
ctx.fillStyle = colorToRGBA(wc.val(), wa.val());
ctx.fillText(w.val(), parseInt(wx.val()), parseInt(wy.val()), 725);
// Write PORN
style = (pfs.val() === 'regular') ? ' ' : pfs.val()+' ';
style = (pfs.val() === 'regular') ? '' : pfs.val()+' ';
ctx.font = style+parseInt(ps.val())+'px \''+pf.val();+'\'';
ctx.fillStyle = pc.val()+alphaPercentageToHex(pa.val());
ctx.fillStyle = colorToRGBA(pc.val(), pa.val());
ctx.fillText(p.val(), parseInt(px.val()), parseInt(py.val()), 725);
if (gli.prop('checked')) {
......@@ -704,6 +704,10 @@ function scalePreserveAspectRatio(imgW,imgH,maxW,maxH){
return(Math.min((maxW/imgW),(maxH/imgH)));
}
function alphaPercentageToHex(value) {
return Math.round(255 - parseInt(value) * 2.55).toString(16).replace(/^(.)$/, '0$1');
function colorToRGBA(color, alpha) {
var a = color.split('');
r = parseInt(''+a[1]+a[2], 16);
g = parseInt(''+a[3]+a[4], 16);
b = parseInt(''+a[4]+a[6], 16);
return 'rgba('+r+','+g+','+b+','+(alpha/100)+')';
}
......@@ -10,23 +10,23 @@ case"gradient":hide("bg-color"),show("gradient-settings"),hide("bg-img-settings"
break
case"img":hide("bg-color"),hide("gradient-settings"),show("bg-img-settings"),"custom"===$("#bg-img").val()?show("bg-custom-img-settings"):hide("bg-custom-img-settings")
break
default:hide("bg-color"),hide("gradient-settings"),hide("bg-img-settings"),hide("bg-custom-img-settings")}}function refreshFilename(){var e=$("#wemake"),a=$("#porn"),t=$("#filename"),s=$("#svg"),r="png"
s.hasClass("d-none")||(r="svg")
var o=e.val()+" "+a.val()+"."+r
t.val(o.replace(/ /g,"_"))}function waitForfont(e,a){void 0!==a&&null!==a||(a=refreshText),e=e.replace("-style","")
default:hide("bg-color"),hide("gradient-settings"),hide("bg-img-settings"),hide("bg-custom-img-settings")}}function refreshFilename(){var e=$("#wemake"),a=$("#porn"),t=$("#filename"),s=$("#svg"),o="png"
s.hasClass("d-none")||(o="svg")
var r=e.val()+" "+a.val()+"."+o
t.val(r.replace(/ /g,"_"))}function waitForfont(e,a){void 0!==a&&null!==a||(a=refreshText),e=e.replace("-style","")
var t=$("#"+e).val(),s=$("#"+e+"-style").val()
if("sans-serif"===t||void 0!==loadedFonts[t]&&void 0!==loadedFonts[t][s]||void 0===fonts[t]||void 0===fonts[t][s])"sans-serif"!==t&&(void 0===fonts[t]&&console.log(t+" is not a valid font"),void 0===fonts[t][s]&&console.log(s+" is not a valid style for font "+t)),a()
else{new FontFace(t,"url("+fonts[t][s]+")").load().then(function(e){console.log("font "+t+" "+s+" loaded"),document.fonts.add(e),void 0!==loadedFonts[t]?loadedFonts[t][s]=!0:loadedFonts[t]={s:!0},a()})}}function handleImage(e){var a=new FileReader
a.onload=function(e){var a=new Image
a.onload=function(){var e=$("<option>"),t=$("#bg-img"),s=$('option[value="custom"]')
0!==s.length&&s.remove(),e.attr("value","custom"),e.text(customImgText),t.append(e),t.val("custom"),customImg=a,$("#custom-x").val(0),$("#custom-y").val(0),$("#custom-size").val(0),refreshText()},a.src=e.target.result,show("bg-custom-img-settings")},a.readAsDataURL(e.target.files[0])}function switchTextColors(){var e=$("#wemake-color"),a=$("#porn-color"),t=e.val(),s=a.val()
e.val(s),a.val(t)}function reset(){$("#wemake-x").val("400"),$("#wemake-y").val("160"),$("#wemake-size").val("150"),$("#wemake-color").val("#000000"),$("#wemake-alpha").val("0"),$("#wemake-font").val("sans-serif"),$("#wemake-font-style").val("bold"),$("#porn-x").val("400"),$("#porn-y").val("350"),$("#porn-size").val("220"),$("#porn-color").val("#000000"),$("#porn-alpha").val("0"),$("#porn-font").val("sans-serif"),$("#porn-font-style").val("bold"),$("#bgu-color").val("#fcd205"),$("#rect-color").val("#000000"),$("#rect-alpha").val("0"),$("#add-glitter").prop("checked",!1),$("#bg-type").val("plain"),$("#gr-orientation").val("lr"),$("#bg-img").val("beer"),$("#corners").val("20"),$("#custom-img").val(null),$("#custom-x").val(0),$("#custom-y").val(0),$("#custom-size").val(0),show("bg-color"),hide("gradient-settings"),hide("bg-img-settings"),hide("bg-custom-img-settings"),refreshText()}function refreshText(){var e=$("#wemake"),a=$("#wemake-x"),t=$("#wemake-y"),s=$("#wemake-size"),r=$("#wemake-color"),o=$("#wemake-alpha"),n=$("#wemake-font"),l=$("#wemake-font-style"),i=$("#porn"),c=$("#porn-x"),g=$("#porn-y"),m=$("#porn-size"),h=$("#porn-color"),d=$("#porn-alpha"),v=$("#porn-font"),f=$("#porn-font-style"),u=$("#bgu-color"),p=$("#add-glitter"),w=$("#bg-type"),b=$("#rect-color"),P=$("#rect-alpha"),k=$("#bgr-color"),x=$("#egr-color"),y=$("#gr-orientation"),C=$("#bg-img"),S=$("#corners"),I=document.getElementById("canvas"),T=I.getContext("2d"),F=$("#svg")
e.val(s),a.val(t)}function reset(){$("#wemake-x").val("400"),$("#wemake-y").val("160"),$("#wemake-size").val("150"),$("#wemake-color").val("#000000"),$("#wemake-alpha").val("0"),$("#wemake-font").val("sans-serif"),$("#wemake-font-style").val("bold"),$("#porn-x").val("400"),$("#porn-y").val("350"),$("#porn-size").val("220"),$("#porn-color").val("#000000"),$("#porn-alpha").val("0"),$("#porn-font").val("sans-serif"),$("#porn-font-style").val("bold"),$("#bgu-color").val("#fcd205"),$("#rect-color").val("#000000"),$("#rect-alpha").val("0"),$("#add-glitter").prop("checked",!1),$("#bg-type").val("plain"),$("#gr-orientation").val("lr"),$("#bg-img").val("beer"),$("#corners").val("20"),$("#custom-img").val(null),$("#custom-x").val(0),$("#custom-y").val(0),$("#custom-size").val(0),show("bg-color"),hide("gradient-settings"),hide("bg-img-settings"),hide("bg-custom-img-settings"),refreshText()}function refreshText(){var e=$("#wemake"),a=$("#wemake-x"),t=$("#wemake-y"),s=$("#wemake-size"),o=$("#wemake-color"),r=$("#wemake-alpha"),l=$("#wemake-font"),n=$("#wemake-font-style"),i=$("#porn"),c=$("#porn-x"),g=$("#porn-y"),m=$("#porn-size"),d=$("#porn-color"),h=$("#porn-alpha"),v=$("#porn-font"),f=$("#porn-font-style"),u=$("#bgu-color"),p=$("#add-glitter"),w=$("#bg-type"),b=$("#rect-color"),P=$("#rect-alpha"),k=$("#bgr-color"),y=$("#egr-color"),x=$("#gr-orientation"),C=$("#bg-img"),S=$("#corners"),I=document.getElementById("canvas"),T=I.getContext("2d"),F=$("#svg")
!1===F.hasClass("d-none")&&(T=svg),T.clearRect(0,0,I.width,I.height)
var R=new URL(window.location)
switch(R.searchParams.set("w",e.val()),R.searchParams.set("wx",a.val()),R.searchParams.set("wy",t.val()),R.searchParams.set("ws",s.val()),R.searchParams.set("wc",r.val()),R.searchParams.set("wa",o.val()),R.searchParams.set("wf",n.val()),R.searchParams.set("wfs",l.val()),R.searchParams.set("p",i.val()),R.searchParams.set("px",c.val()),R.searchParams.set("py",g.val()),R.searchParams.set("ps",m.val()),R.searchParams.set("pc",h.val()),R.searchParams.set("pa",d.val()),R.searchParams.set("pf",v.val()),R.searchParams.set("pfs",f.val()),R.searchParams.set("co",u.val()),R.searchParams.set("ra",P.val()),R.searchParams.set("gli",p.prop("checked")),R.searchParams.set("bgt",w.val()),R.searchParams.set("rc",b.val()),R.searchParams.set("bgr",k.val()),R.searchParams.set("egr",x.val()),R.searchParams.set("or",y.val()),R.searchParams.set("bgi",C.val()),R.searchParams.set("cor",S.val()),window.history.pushState("change","WemaWema",R),w.val()){case"plain":T.fillStyle=u.val()
switch(R.searchParams.set("w",e.val()),R.searchParams.set("wx",a.val()),R.searchParams.set("wy",t.val()),R.searchParams.set("ws",s.val()),R.searchParams.set("wc",o.val()),R.searchParams.set("wa",r.val()),R.searchParams.set("wf",l.val()),R.searchParams.set("wfs",n.val()),R.searchParams.set("p",i.val()),R.searchParams.set("px",c.val()),R.searchParams.set("py",g.val()),R.searchParams.set("ps",m.val()),R.searchParams.set("pc",d.val()),R.searchParams.set("pa",h.val()),R.searchParams.set("pf",v.val()),R.searchParams.set("pfs",f.val()),R.searchParams.set("co",u.val()),R.searchParams.set("ra",P.val()),R.searchParams.set("gli",p.prop("checked")),R.searchParams.set("bgt",w.val()),R.searchParams.set("rc",b.val()),R.searchParams.set("bgr",k.val()),R.searchParams.set("egr",y.val()),R.searchParams.set("or",x.val()),R.searchParams.set("bgi",C.val()),R.searchParams.set("cor",S.val()),window.history.pushState("change","WemaWema",R),w.val()){case"plain":T.fillStyle=u.val()
break
case"gradient":var z
switch(y.val()){case"lr":z=T.createLinearGradient(0,200,I.width,200)
switch(x.val()){case"lr":z=T.createLinearGradient(0,200,I.width,200)
break
case"rl":z=T.createLinearGradient(I.width,200,0,200)
break
......@@ -34,19 +34,20 @@ case"tb":z=T.createLinearGradient(400,0,400,I.height)
break
case"bt":z=T.createLinearGradient(400,I.height,400,0)
break
case"r":z=T.createRadialGradient(400,200,25,400,200,400)}z.addColorStop(0,k.val()),z.addColorStop(1,x.val()),T.fillStyle=z
case"r":z=T.createRadialGradient(400,200,25,400,200,400)}z.addColorStop(0,k.val()),z.addColorStop(1,y.val()),T.fillStyle=z
break
case"img":if("custom"===C.val()&&void 0!==customImg&&null!==customImg){var E=customImg.width,L=customImg.height,q=$("#custom-x").val(),G=$("#custom-y").val(),F=$("#custom-size"),B=scalePreserveAspectRatio(E,L,800,400)
0===parseFloat(F.val())?F.val(Math.round(1e3*B)/1e3):B=F.val(),T.drawImage(customImg,0,0,E,L,q,G,E*B,L*B),drawOver(T,b,P,s,r,o,n,l,e,a,t,m,h,d,v,f,i,c,g,p)}else{""===C.val()&&C.val("beer")
var D=new Image,H="img/"+C.val()
20===parseInt(S.val())&&(H+="-round"),D.src=H+".png",D.onload=function(){T.drawImage(D,0,0),drawOver(T,b,P,s,r,o,n,l,e,a,t,m,h,d,v,f,i,c,g,p)}}return
case"img":if("custom"===C.val()&&void 0!==customImg&&null!==customImg){var G=customImg.width,B=customImg.height,E=$("#custom-x").val(),L=$("#custom-y").val(),F=$("#custom-size"),q=scalePreserveAspectRatio(G,B,800,400)
0===parseFloat(F.val())?F.val(Math.round(1e3*q)/1e3):q=F.val(),T.drawImage(customImg,0,0,G,B,E,L,G*q,B*q),drawOver(T,b,P,s,o,r,l,n,e,a,t,m,d,h,v,f,i,c,g,p)}else{""===C.val()&&C.val("beer")
var A=new Image,D="img/"+C.val()
20===parseInt(S.val())&&(D+="-round"),A.src=D+".png",A.onload=function(){T.drawImage(A,0,0),drawOver(T,b,P,s,o,r,l,n,e,a,t,m,d,h,v,f,i,c,g,p)}}return
case"rainbow":var z=T.createLinearGradient(400,0,400,I.height),N=svg.createLinearGradient(400,0,400,I.height)
z.addColorStop(0,"#e50000"),z.addColorStop(.2,"#ff8d00"),z.addColorStop(.4,"#ffee00"),z.addColorStop(.6,"#008121"),z.addColorStop(.8,"#004cff"),z.addColorStop(1,"#760188"),N.addColorStop(0,"#e50000"),N.addColorStop(.2,"#ff8d00"),N.addColorStop(.4,"#ffee00"),N.addColorStop(.6,"#008121"),N.addColorStop(.8,"#004cff"),N.addColorStop(1,"#760188"),T.fillStyle=z,svg.fillStyle=N}roundRect(T,0,0,I.width,I.height,parseInt(S.val()),!0,!1),drawOver(T,b,P,s,r,o,n,l,e,a,t,m,h,d,v,f,i,c,g,p)}function drawOver(e,a,t,s,r,o,n,l,i,c,g,m,h,d,v,f,u,p,w,b){e.lineWidth=20,e.strokeStyle=a.val()+alphaPercentageToHex(t.val()),roundRect(e,25,25,750,350,20,!1),e.textAlign="center"
var P="regular"===l.val()?" ":l.val()+" "
if(e.font=P+parseInt(s.val())+"px '"+n.val()+"'",e.fillStyle=r.val()+alphaPercentageToHex(o.val()),e.fillText(i.val(),parseInt(c.val()),parseInt(g.val()),725),P="regular"===f.val()?" ":f.val()+" ",e.font=P+parseInt(m.val())+"px '"+v.val(),e.fillStyle=h.val()+alphaPercentageToHex(d.val()),e.fillText(u.val(),parseInt(p.val()),parseInt(w.val()),725),b.prop("checked")){var k=new Image
k.src="img/glitter-calc.png",k.onload=function(){e.drawImage(k,0,0),$("#svg").html(svg.getSerializedSvg())}}else $("#svg").html(svg.getSerializedSvg())}function roundRect(e,a,t,s,r,o,n,l){if(void 0===l&&(l=!0),void 0===o&&(o=5),"number"==typeof o)o={tl:o,tr:o,br:o,bl:o}
z.addColorStop(0,"#e50000"),z.addColorStop(.2,"#ff8d00"),z.addColorStop(.4,"#ffee00"),z.addColorStop(.6,"#008121"),z.addColorStop(.8,"#004cff"),z.addColorStop(1,"#760188"),N.addColorStop(0,"#e50000"),N.addColorStop(.2,"#ff8d00"),N.addColorStop(.4,"#ffee00"),N.addColorStop(.6,"#008121"),N.addColorStop(.8,"#004cff"),N.addColorStop(1,"#760188"),T.fillStyle=z,svg.fillStyle=N}roundRect(T,0,0,I.width,I.height,parseInt(S.val()),!0,!1),drawOver(T,b,P,s,o,r,l,n,e,a,t,m,d,h,v,f,i,c,g,p)}function drawOver(e,a,t,s,o,r,l,n,i,c,g,m,d,h,v,f,u,p,w,b){e.lineWidth=20,e.strokeStyle=colorToRGBA(a.val(),t.val()),roundRect(e,25,25,750,350,20,!1),e.textAlign="center"
var P="regular"===n.val()?"":n.val()+" "
if(e.font=P+parseInt(s.val())+"px '"+l.val()+"'",e.fillStyle=colorToRGBA(o.val(),r.val()),e.fillText(i.val(),parseInt(c.val()),parseInt(g.val()),725),P="regular"===f.val()?"":f.val()+" ",e.font=P+parseInt(m.val())+"px '"+v.val(),e.fillStyle=colorToRGBA(d.val(),h.val()),e.fillText(u.val(),parseInt(p.val()),parseInt(w.val()),725),b.prop("checked")){var k=new Image
k.src="img/glitter-calc.png",k.onload=function(){e.drawImage(k,0,0),$("#svg").html(svg.getSerializedSvg())}}else $("#svg").html(svg.getSerializedSvg())}function roundRect(e,a,t,s,o,r,l,n){if(void 0===n&&(n=!0),void 0===r&&(r=5),"number"==typeof r)r={tl:r,tr:r,br:r,bl:r}
else{var i={tl:0,tr:0,br:0,bl:0}
for(var c in i)o[c]=o[c]||i[c]}e.beginPath(),e.moveTo(a+o.tl,t),e.lineTo(a+s-o.tr,t),e.quadraticCurveTo(a+s,t,a+s,t+o.tr),e.lineTo(a+s,t+r-o.br),e.quadraticCurveTo(a+s,t+r,a+s-o.br,t+r),e.lineTo(a+o.bl,t+r),e.quadraticCurveTo(a,t+r,a,t+r-o.bl),e.lineTo(a,t+o.tl),e.quadraticCurveTo(a,t,a+o.tl,t),e.closePath(),n&&e.fill(),l&&e.stroke()}function show(e){var a=$("#"+e)
for(var c in i)r[c]=r[c]||i[c]}e.beginPath(),e.moveTo(a+r.tl,t),e.lineTo(a+s-r.tr,t),e.quadraticCurveTo(a+s,t,a+s,t+r.tr),e.lineTo(a+s,t+o-r.br),e.quadraticCurveTo(a+s,t+o,a+s-r.br,t+o),e.lineTo(a+r.bl,t+o),e.quadraticCurveTo(a,t+o,a,t+o-r.bl),e.lineTo(a,t+r.tl),e.quadraticCurveTo(a,t,a+r.tl,t),e.closePath(),l&&e.fill(),n&&e.stroke()}function show(e){var a=$("#"+e)
a.hasClass("d-none")&&a.removeClass("d-none")}function hide(e){var a=$("#"+e)
a.hasClass("d-none")||a.addClass("d-none")}function scalePreserveAspectRatio(e,a,t,s){return Math.min(t/e,s/a)}function alphaPercentageToHex(e){return Math.round(255-2.55*parseInt(e)).toString(16).replace(/^(.)$/,"0$1")}var svg=new C2S(800,400),showSettings="Show advanced settings",hideSettings="Hide advanced settings",workCanvas="Work with canvas",workSvg="Work with SVG",customImgText="Custom image",customImg,fonts={"Comic Neue":{regular:"fonts/comic-neue/ComicNeue-Regular.woff2",bold:"fonts/comic-neue/ComicNeue-Bold.woff2",italic:"fonts/comic-neue/ComicNeue-Regular-Oblique.woff2","italic bold":"fonts/comic-neue/ComicNeue-Bold-Oblique.woff2"},"Comic Spice":{regular:"fonts/comic-spice/ComicSpice.woff2",bold:"fonts/comic-spice/ComicSpice.woff2",italic:"fonts/comic-spice/ComicSpice.woff2","italic bold":"fonts/comic-spice/ComicSpice.woff2"},Hack:{regular:"fonts/hack/hack-regular-webfont.woff2",bold:"fonts/hack/hack-bold-webfont.woff2",italic:"fonts/hack/hack-italic-webfont.woff2","italic bold":"fonts/hack/hack-bolditalic-webfont.woff2"},Nosifer:{regular:"fonts/nosifer/nosifer.woff2",bold:"fonts/nosifer/nosifer.woff2",italic:"fonts/nosifer/nosifer.woff2","italic bold":"fonts/nosifer/nosifer.woff2"}},loadedFonts={}
a.hasClass("d-none")||a.addClass("d-none")}function scalePreserveAspectRatio(e,a,t,s){return Math.min(t/e,s/a)}function colorToRGBA(e,a){var t=e.split("")
return r=parseInt(""+t[1]+t[2],16),g=parseInt(""+t[3]+t[4],16),b=parseInt(""+t[4]+t[6],16),"rgba("+r+","+g+","+b+","+a/100+")"}var svg=new C2S(800,400),showSettings="Show advanced settings",hideSettings="Hide advanced settings",workCanvas="Work with canvas",workSvg="Work with SVG",customImgText="Custom image",customImg,fonts={"Comic Neue":{regular:"fonts/comic-neue/ComicNeue-Regular.woff2",bold:"fonts/comic-neue/ComicNeue-Bold.woff2",italic:"fonts/comic-neue/ComicNeue-Regular-Oblique.woff2","italic bold":"fonts/comic-neue/ComicNeue-Bold-Oblique.woff2"},"Comic Spice":{regular:"fonts/comic-spice/ComicSpice.woff2",bold:"fonts/comic-spice/ComicSpice.woff2",italic:"fonts/comic-spice/ComicSpice.woff2","italic bold":"fonts/comic-spice/ComicSpice.woff2"},Hack:{regular:"fonts/hack/hack-regular-webfont.woff2",bold:"fonts/hack/hack-bold-webfont.woff2",italic:"fonts/hack/hack-italic-webfont.woff2","italic bold":"fonts/hack/hack-bolditalic-webfont.woff2"},Nosifer:{regular:"fonts/nosifer/nosifer.woff2",bold:"fonts/nosifer/nosifer.woff2",italic:"fonts/nosifer/nosifer.woff2","italic bold":"fonts/nosifer/nosifer.woff2"}},loadedFonts={}
$(document).ready(function(){translate(),getParameters(),bindEvents(),toggleBgSettings(),refreshFilename(),waitForfont("wemake-font",function(){waitForfont("porn-font")})})
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment