Commit 3ccfaa9f authored by Luc Didry's avatar Luc Didry
Browse files

Fix background image size bug

parent 18838710
Pipeline #26297 passed with stage
in 29 seconds
......@@ -398,7 +398,7 @@
<div class="row">
<label for="custom-size" class="col-sm-12 col-md-6">Custom image size</label>
<div class="col-sm-12 col-md-6">
<input id="custom-size" type="number" min="0" step="0.001" value="0.000" class="form-control">
<input id="custom-size" type="number" min="0" step="0.001" value="1.000" class="form-control">
</div>
</div>
</div>
......
......@@ -377,11 +377,7 @@ function toggleBgSettings() {
hide('bg-color');
hide('gradient-settings');
show('bg-img-settings');
if ($('#bg-img').val() === 'custom') {
show('bg-custom-img-settings');
} else {
hide('bg-custom-img-settings');
}
show('bg-custom-img-settings');
break;
default:
hide('bg-color');
......@@ -632,7 +628,6 @@ function refreshText() {
ctx.fillStyle = grd;
break;
case 'img':
show('bg-custom-img-settings');
var x = $('#custom-x').val();
var y = $('#custom-y').val();
var s = $('#custom-size');
......@@ -661,7 +656,7 @@ function refreshText() {
var iw = background.width;
var ih = background.height;
var sizer = scalePreserveAspectRatio(iw, ih, width, height);
if (parseFloat(s.val()) === 1.0) {
if (parseFloat(s.val()) === 0.0) {
s.val(Math.round(sizer * 1000)/1000);
} else {
sizer = s.val();
......
......@@ -13,7 +13,7 @@ $("[data-setting]").removeClass("active"),a.addClass("active"),"hide-settings"==
break
case"gradient":hide("bg-color"),show("gradient-settings"),hide("bg-img-settings"),hide("bg-custom-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")
case"img":hide("bg-color"),hide("gradient-settings"),show("bg-img-settings"),show("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")
......@@ -25,12 +25,12 @@ else{new FontFace(t,"url("+fonts[t][s]+")").load().then(function(e){console.log(
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},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("Open Sans"),$("#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("Open Sans"),$("#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),$("#img-width").val(800),$("#img-height").val(400),$("#border-thickness").val(20),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"),h=$("#porn-size"),m=$("#porn-color"),v=$("#porn-alpha"),d=$("#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=$("#border-thickness").val(),T=$("#img-width").val(),R=$("#img-height").val(),F=document.getElementById("canvas")
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("Open Sans"),$("#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("Open Sans"),$("#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),$("#img-width").val(800),$("#img-height").val(400),$("#border-thickness").val(20),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"),h=$("#porn-size"),v=$("#porn-color"),m=$("#porn-alpha"),d=$("#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=$("#border-thickness").val(),T=$("#img-width").val(),R=$("#img-height").val(),F=document.getElementById("canvas")
F.width=T,F.height=R
var z=F.getContext("2d"),O=$("#svg")
svg=new C2S(T,R),!1===O.hasClass("d-none")&&(z=svg),z.clearRect(0,0,T,R)
var B=new URL(window.location)
switch(B.searchParams.set("w",e.val()),B.searchParams.set("wx",a.val()),B.searchParams.set("wy",t.val()),B.searchParams.set("ws",s.val()),B.searchParams.set("wc",r.val()),B.searchParams.set("wa",o.val()),B.searchParams.set("wf",n.val()),B.searchParams.set("wfs",l.val()),B.searchParams.set("p",i.val()),B.searchParams.set("px",c.val()),B.searchParams.set("py",g.val()),B.searchParams.set("ps",h.val()),B.searchParams.set("pc",m.val()),B.searchParams.set("pa",v.val()),B.searchParams.set("pf",d.val()),B.searchParams.set("pfs",f.val()),B.searchParams.set("co",u.val()),B.searchParams.set("ra",P.val()),B.searchParams.set("gli",p.prop("checked")),B.searchParams.set("bgt",w.val()),B.searchParams.set("rc",b.val()),B.searchParams.set("bgr",k.val()),B.searchParams.set("egr",x.val()),B.searchParams.set("or",y.val()),B.searchParams.set("bgi",C.val()),B.searchParams.set("cor",S.val()),B.searchParams.set("bth",I),B.searchParams.set("width",T),B.searchParams.set("height",R),window.history.pushState("change","WemaWema",B),w.val()){case"plain":z.fillStyle=u.val()
switch(B.searchParams.set("w",e.val()),B.searchParams.set("wx",a.val()),B.searchParams.set("wy",t.val()),B.searchParams.set("ws",s.val()),B.searchParams.set("wc",r.val()),B.searchParams.set("wa",o.val()),B.searchParams.set("wf",n.val()),B.searchParams.set("wfs",l.val()),B.searchParams.set("p",i.val()),B.searchParams.set("px",c.val()),B.searchParams.set("py",g.val()),B.searchParams.set("ps",h.val()),B.searchParams.set("pc",v.val()),B.searchParams.set("pa",m.val()),B.searchParams.set("pf",d.val()),B.searchParams.set("pfs",f.val()),B.searchParams.set("co",u.val()),B.searchParams.set("ra",P.val()),B.searchParams.set("gli",p.prop("checked")),B.searchParams.set("bgt",w.val()),B.searchParams.set("rc",b.val()),B.searchParams.set("bgr",k.val()),B.searchParams.set("egr",x.val()),B.searchParams.set("or",y.val()),B.searchParams.set("bgi",C.val()),B.searchParams.set("cor",S.val()),B.searchParams.set("bth",I),B.searchParams.set("width",T),B.searchParams.set("height",R),window.history.pushState("change","WemaWema",B),w.val()){case"plain":z.fillStyle=u.val()
break
case"gradient":var G
switch(y.val()){case"lr":G=z.createLinearGradient(0,R/2,T,R/2)
......@@ -43,17 +43,16 @@ case"bt":G=z.createLinearGradient(T/2,R,T/2,0)
break
case"r":G=z.createRadialGradient(T/2,R/2,25,T/2,R/2,T/2)}G.addColorStop(0,k.val()),G.addColorStop(1,x.val()),z.fillStyle=G
break
case"img":show("bg-custom-img-settings")
var L=$("#custom-x").val(),E=$("#custom-y").val(),O=$("#custom-size")
case"img":var L=$("#custom-x").val(),E=$("#custom-y").val(),O=$("#custom-size")
if("custom"===C.val()&&void 0!==customImg&&null!==customImg){var A=customImg.width,D=customImg.height,q=scalePreserveAspectRatio(A,D,T,R)
0===parseFloat(O.val())?O.val(Math.round(1e3*q)/1e3):q=O.val(),z.drawImage(customImg,0,0,A,D,L,E,A*q,D*q),drawOver(z,b,P,s,r,o,n,l,e,a,t,h,m,v,d,f,i,c,g,p,T,R,I)}else{""===C.val()&&C.val("beer")
0===parseFloat(O.val())?O.val(Math.round(1e3*q)/1e3):q=O.val(),z.drawImage(customImg,0,0,A,D,L,E,A*q,D*q),drawOver(z,b,P,s,r,o,n,l,e,a,t,h,v,m,d,f,i,c,g,p,T,R,I)}else{""===C.val()&&C.val("beer")
var N=new Image,U="img/"+C.val()
20===parseInt(S.val())&&(U+="-round"),N.src=U+".png",N.onload=function(){var u=N.width,$=N.height,w=scalePreserveAspectRatio(u,$,T,R)
1===parseFloat(O.val())?O.val(Math.round(1e3*w)/1e3):w=O.val(),z.drawImage(N,0,0,u,$,L,E,u*w,$*w),drawOver(z,b,P,s,r,o,n,l,e,a,t,h,m,v,d,f,i,c,g,p,T,R,I)}}return
0===parseFloat(O.val())?O.val(Math.round(1e3*w)/1e3):w=O.val(),z.drawImage(N,0,0,u,$,L,E,u*w,$*w),drawOver(z,b,P,s,r,o,n,l,e,a,t,h,v,m,d,f,i,c,g,p,T,R,I)}}return
case"rainbow":var G=z.createLinearGradient(T/2,0,T/2,R),W=svg.createLinearGradient(T/2,0,T/2,R)
G.addColorStop(0,"#e50000"),G.addColorStop(.2,"#ff8d00"),G.addColorStop(.4,"#ffee00"),G.addColorStop(.6,"#008121"),G.addColorStop(.8,"#004cff"),G.addColorStop(1,"#760188"),W.addColorStop(0,"#e50000"),W.addColorStop(.2,"#ff8d00"),W.addColorStop(.4,"#ffee00"),W.addColorStop(.6,"#008121"),W.addColorStop(.8,"#004cff"),W.addColorStop(1,"#760188"),z.fillStyle=G,svg.fillStyle=W}roundRect(z,0,0,T,R,parseInt(S.val()),!0,!1),drawOver(z,b,P,s,r,o,n,l,e,a,t,h,m,v,d,f,i,c,g,p,T,R,I)}function drawOver(e,a,t,s,r,o,n,l,i,c,g,h,m,v,d,f,u,p,w,b,P,k,x){x>0&&(e.lineWidth=x,e.strokeStyle=colorToRGBA(a.val(),t.val()),roundRect(e,1*P/32,1*k/16,15*P/16,7*k/8,20,!1)),e.textAlign="center"
G.addColorStop(0,"#e50000"),G.addColorStop(.2,"#ff8d00"),G.addColorStop(.4,"#ffee00"),G.addColorStop(.6,"#008121"),G.addColorStop(.8,"#004cff"),G.addColorStop(1,"#760188"),W.addColorStop(0,"#e50000"),W.addColorStop(.2,"#ff8d00"),W.addColorStop(.4,"#ffee00"),W.addColorStop(.6,"#008121"),W.addColorStop(.8,"#004cff"),W.addColorStop(1,"#760188"),z.fillStyle=G,svg.fillStyle=W}roundRect(z,0,0,T,R,parseInt(S.val()),!0,!1),drawOver(z,b,P,s,r,o,n,l,e,a,t,h,v,m,d,f,i,c,g,p,T,R,I)}function drawOver(e,a,t,s,r,o,n,l,i,c,g,h,v,m,d,f,u,p,w,b,P,k,x){x>0&&(e.lineWidth=x,e.strokeStyle=colorToRGBA(a.val(),t.val()),roundRect(e,1*P/32,1*k/16,15*P/16,7*k/8,20,!1)),e.textAlign="center"
var y="regular"===l.val()?"":l.val()+" "
if(e.font=y+parseInt(s.val())+"px '"+n.val()+"'",e.fillStyle=colorToRGBA(r.val(),o.val()),e.fillText(i.val(),parseInt(c.val()),parseInt(g.val()),29*P/32),y="regular"===f.val()?"":f.val()+" ",e.font=y+parseInt(h.val())+"px '"+d.val(),e.fillStyle=colorToRGBA(m.val(),v.val()),e.fillText(u.val(),parseInt(p.val()),parseInt(w.val()),29*P/32),b.prop("checked")){var C=new Image
if(e.font=y+parseInt(s.val())+"px '"+n.val()+"'",e.fillStyle=colorToRGBA(r.val(),o.val()),e.fillText(i.val(),parseInt(c.val()),parseInt(g.val()),29*P/32),y="regular"===f.val()?"":f.val()+" ",e.font=y+parseInt(h.val())+"px '"+d.val(),e.fillStyle=colorToRGBA(v.val(),m.val()),e.fillText(u.val(),parseInt(p.val()),parseInt(w.val()),29*P/32),b.prop("checked")){var C=new Image
C.src="img/glitter-calc.png",C.onload=function(){e.drawImage(C,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}
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)
......
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