Commit 96baba6e authored by Luc Didry's avatar Luc Didry
Browse files

Fix bug on small custom background images

parent 057797c9
......@@ -298,6 +298,6 @@
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/canvas2svg.js"></script>
<script src="js/wema_wema.js"></script>
<script src="js/wema_wema.min.js"></script>
</body>
</html>
......@@ -452,22 +452,18 @@ function refreshText() {
break;
case 'img':
if (bgi.val() === 'custom' && customImg !== undefined && customImg !== null) {
var iw = customImg.width;
var ih = customImg.height;
if (iw > 800 || ih > 400) {
var x = $('#custom-x').val();
var y = $('#custom-y').val();
var s = $('#custom-size');
var sizer = scalePreserveAspectRatio(iw, ih, 800, 400);
if (parseFloat(s.val()) === 0.0) {
s.val(Math.round(sizer * 1000)/1000);
} else {
sizer = s.val();
}
ctx.drawImage(customImg, 0, 0, iw, ih, x, y, iw*sizer, ih*sizer);
var iw = customImg.width;
var ih = customImg.height;
var x = $('#custom-x').val();
var y = $('#custom-y').val();
var s = $('#custom-size');
var sizer = scalePreserveAspectRatio(iw, ih, 800, 400);
if (parseFloat(s.val()) === 0.0) {
s.val(Math.round(sizer * 1000)/1000);
} else {
ctx.drawImage(customImg, 0, 0);
sizer = s.val();
}
ctx.drawImage(customImg, 0, 0, iw, ih, x, y, iw*sizer, ih*sizer);
drawOver(ctx, rc, ws, wc, w, wx, wy, ps, pc, p, px, py, gli);
} else {
if (bgi.val() === '') {
......
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 scalePreserveAspectRatio(e,a,t,s){return Math.min(t/e,s/a)}function switchTextColors(){var e=$("#wemake-color"),a=$("#porn-color"),t=e.val(),s=a.val()
e.val(s),a.val(t)}function toggleBgSettings(){switch($("#bg-type").val()){case"plain":show("bg-color"),hide("gradient-settings"),hide("bg-img-settings"),hide("bg-custom-img-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")
break
default:hide("bg-color"),hide("gradient-settings"),hide("bg-img-settings"),hide("bg-custom-img-settings")}}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 reset(){$("#wemake-x").val("400"),$("#wemake-y").val("160"),$("#wemake-size").val("150"),$("#wemake-color").val("#000000"),$("#porn-x").val("400"),$("#porn-y").val("350"),$("#porn-size").val("220"),$("#porn-size").val("220"),$("#porn-color").val("#000000"),$("#color").val("#fcd205"),$("#rect-color").val("#000000"),$("#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 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 refreshText(){var e=$("#wemake"),a=$("#wemake-x"),t=$("#wemake-y"),s=$("#wemake-size"),r=$("#wemake-color"),o=$("#porn"),l=$("#porn-x"),n=$("#porn-y"),i=$("#porn-size"),c=$("#porn-color"),g=$("#color"),m=$("#add-glitter"),h=$("#bg-type"),d=$("#rect-color"),v=$("#bgr-color"),u=$("#egr-color"),p=$("#gr-orientation"),w=$("#bg-img"),f=$("#corners"),b=document.getElementById("canvas"),P=b.getContext("2d"),x=$("#svg")
!1===x.hasClass("d-none")&&(P=svg),P.clearRect(0,0,b.width,b.height)
var k=new URL(window.location)
switch(k.searchParams.set("w",e.val()),k.searchParams.set("wx",a.val()),k.searchParams.set("wy",t.val()),k.searchParams.set("ws",s.val()),k.searchParams.set("wc",r.val()),k.searchParams.set("p",o.val()),k.searchParams.set("px",l.val()),k.searchParams.set("py",n.val()),k.searchParams.set("ps",i.val()),k.searchParams.set("pc",c.val()),k.searchParams.set("co",g.val()),k.searchParams.set("gli",m.prop("checked")),k.searchParams.set("bgt",h.val()),k.searchParams.set("rc",d.val()),k.searchParams.set("bgr",v.val()),k.searchParams.set("egr",u.val()),k.searchParams.set("or",p.val()),k.searchParams.set("bgi",w.val()),k.searchParams.set("cor",f.val()),window.history.pushState("change","WemaWema",k),h.val()){case"plain":P.fillStyle=g.val()
break
case"gradient":var y
switch(p.val()){case"lr":y=P.createLinearGradient(0,200,b.width,200)
break
case"rl":y=P.createLinearGradient(b.width,200,0,200)
break
case"tb":y=P.createLinearGradient(400,0,400,b.height)
break
case"bt":y=P.createLinearGradient(400,b.height,400,0)
break
case"r":y=P.createRadialGradient(400,200,25,400,200,400)}y.addColorStop(0,v.val()),y.addColorStop(1,u.val()),P.fillStyle=y
break
case"img":if("custom"===w.val()&&void 0!==customImg&&null!==customImg){var C=customImg.width,S=customImg.height,I=$("#custom-x").val(),T=$("#custom-y").val(),x=$("#custom-size"),z=scalePreserveAspectRatio(C,S,800,400)
0===parseFloat(x.val())?x.val(Math.round(1e3*z)/1e3):z=x.val(),P.drawImage(customImg,0,0,C,S,I,T,C*z,S*z),drawOver(P,d,s,r,e,a,t,i,c,o,l,n,m)}else{""===w.val()&&w.val("beer")
var R=new Image,L="img/"+w.val()
20===parseInt(f.val())&&(L+="-round"),R.src=L+".png",R.onload=function(){P.drawImage(R,0,0),drawOver(P,d,s,r,e,a,t,i,c,o,l,n,m)}}return
case"rainbow":var y=P.createLinearGradient(400,0,400,b.height),E=svg.createLinearGradient(400,0,400,b.height)
y.addColorStop(0,"#e50000"),y.addColorStop(.2,"#ff8d00"),y.addColorStop(.4,"#ffee00"),y.addColorStop(.6,"#008121"),y.addColorStop(.8,"#004cff"),y.addColorStop(1,"#760188"),E.addColorStop(0,"#e50000"),E.addColorStop(.2,"#ff8d00"),E.addColorStop(.4,"#ffee00"),E.addColorStop(.6,"#008121"),E.addColorStop(.8,"#004cff"),E.addColorStop(1,"#760188"),P.fillStyle=y,svg.fillStyle=E}roundRect(P,0,0,b.width,b.height,parseInt(f.val()),!0,!1),drawOver(P,d,s,r,e,a,t,i,c,o,l,n,m)}function drawOver(e,a,t,s,r,o,l,n,i,c,g,m,h){if(e.lineWidth=20,e.strokeStyle=a.val(),roundRect(e,25,25,750,350,20,!1),e.textAlign="center",e.font="bold "+parseInt(t.val())+"px sans-serif",e.fillStyle=s.val(),e.fillText(r.val(),parseInt(o.val()),parseInt(l.val()),725),e.font="bold "+parseInt(n.val())+"px sans-serif",e.fillStyle=i.val(),e.fillText(c.val(),parseInt(g.val()),parseInt(m.val()),725),h.prop("checked")){var d=new Image
d.src="img/glitter-calc.png",d.onload=function(){e.drawImage(d,0,0),$("#svg").html(svg.getSerializedSvg())}}else $("#svg").html(svg.getSerializedSvg())}function roundRect(e,a,t,s,r,o,l,n){if(void 0===n&&(n=!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(),l&&e.fill(),n&&e.stroke()}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
$(document).ready(function(){var e=navigator.language||navigator.userLanguage
$.get({url:"locales/"+e+".json",dataType:"json",success:function(e){["get-source","donate-dpdn","license","author"].forEach(function(a){void 0!==e[a]&&$("."+a).text(e[a])}),["hide-settings","set-corner-shape","set-colors","set-bg","set-positions"].forEach(function(a){void 0!==e[a]&&$('[data-setting="'+a+'"]').text(e[a])}),["wemake","porn","filename","corners","wemake-color","porn-color","rect-color","bg-type","color","bgr-color","egr-color","bg-img","wemake-x","wemake-y","wemake-size","porn-x","porn-y","porn-size","custom-img","custom-x","custom-y","custom-size"].forEach(function(a){void 0!==e[a]&&$('label[for="'+a+'"]').text(e[a])}),void 0!==e["corners-rounded"]&&$('#corners option[value="20"]').text(e["corners-rounded"]),void 0!==e["corners-square"]&&$('#corners option[value="0"]').text(e["corners-square"]),void 0!==e["add-glitter"]&&$(".form-check-label span").text(e["add-glitter"]),["plain","gradient","rainbow","img","lr","rl","tb","bt","r","beer","glitter","rainbow-flag"].forEach(function(a){void 0!==e[a]&&$('option[value="'+a+'"]').text(e[a])}),["donate-dpdn","settings-dpdn","toggle-svg","download","reset","switch-colors"].forEach(function(a){void 0!==e[a]&&$("#"+a).text(e[a])}),void 0!==e["settings-show"]&&(showSettings=e["settings-show"]),void 0!==e["settings-hide"]&&(hideSettings=e["settings-hide"]),void 0!==e["toggle-canvas"]&&(workCanvas=e["toggle-canvas"]),void 0!==e["toggle-svg"]&&(workSvg=e["toggle-svg"]),void 0!==e["custom-img-text"]&&(customImgText=e["custom-img-text"])}}),$('input[type="text"]').each(function(e){$(this).keyup(function(){refreshText(),refreshFilename()}),$(this).on("paste",function(){refreshText(),refreshFilename()})}),$('select,input[type="number"],input[type="color"],input[type="checkbox"]').each(function(e){$(this).change(refreshText)}),$("#bg-type").change(toggleBgSettings),$("#toggle-svg").click(function(){$("#svg").hasClass("d-none")?($(this).removeClass("btn-info"),$(this).addClass("btn-primary"),hide("canvas"),show("svg"),this.text=workCanvas):($(this).removeClass("btn-primary"),$(this).addClass("btn-info"),hide("svg"),show("canvas"),this.text=workSvg),refreshText(),refreshFilename()}),$("#download").click(function(){this.download=$("#filename").val(),$("#svg").hasClass("d-none")?this.href=document.getElementById("canvas").toDataURL().replace("image/png","image/octet-stream"):this.href="data:image/octet-stream;base64,"+btoa(svg.getSerializedSvg(!0))}),$("[data-setting]").click(function(){var e=$(this)
$("[data-setting]").removeClass("active"),e.addClass("active"),"hide-settings"===e.data("setting")?["settings","set-corner-shape","set-colors","set-bg","set-positions"].forEach(function(e){hide(e)}):["set-corner-shape","set-colors","set-bg","set-positions"].forEach(function(a){a!==e.data("setting")?hide(a):show(a),show("settings")})}),$("#reset").click(function(){reset()}),$("#switch-colors").click(function(){this.preventDefault(),switchTextColors(),refreshText()}),$("#custom-img").change(handleImage),void 0!==customImg&&null!==customImg||$("#custom-img").val(null),window.location.hash&&$("#porn").val(decodeURIComponent(window.location.hash.substr(1)))
var a=new URL(window.location)
null!==a.searchParams.get("w")&&$("#wemake").val(a.searchParams.get("w")),null!==a.searchParams.get("wx")&&$("#wemake-x").val(a.searchParams.get("wx")),null!==a.searchParams.get("wy")&&$("#wemake-y").val(a.searchParams.get("wy")),null!==a.searchParams.get("ws")&&$("#wemake-size").val(a.searchParams.get("ws")),null!==a.searchParams.get("wc")&&$("#wemake-color").val(a.searchParams.get("wc")),null!==a.searchParams.get("p")&&$("#porn").val(a.searchParams.get("p")),null!==a.searchParams.get("px")&&$("#porn-x").val(a.searchParams.get("px")),null!==a.searchParams.get("py")&&$("#porn-y").val(a.searchParams.get("py")),null!==a.searchParams.get("ps")&&$("#porn-size").val(a.searchParams.get("ps")),null!==a.searchParams.get("pc")&&$("#porn-color").val(a.searchParams.get("pc")),null!==a.searchParams.get("co")&&$("#color").val(a.searchParams.get("co")),null!==a.searchParams.get("gli")&&$("#add-glitter").prop("checked","true"===a.searchParams.get("gli")),null!==a.searchParams.get("bgt")&&$("#bg-type").val(a.searchParams.get("bgt")),null!==a.searchParams.get("rc")&&$("#rect-color").val(a.searchParams.get("rc")),null!==a.searchParams.get("bgr")&&$("#bgr-color").val(a.searchParams.get("bgr")),null!==a.searchParams.get("egr")&&$("#egr-color").val(a.searchParams.get("egr")),null!==a.searchParams.get("or")&&$("#gr-orientation").val(a.searchParams.get("or")),null!==a.searchParams.get("bgi")&&"custom"!==a.searchParams.get("bgi")?$("#bg-img").val(a.searchParams.get("bgi")):$("#bg-img").val("beer"),null!==a.searchParams.get("cor")&&$("#corners").val(a.searchParams.get("cor")),null!==a.searchParams.get("f")&&$("#filename").val(a.searchParams.get("f")),toggleBgSettings(),refreshFilename(),refreshText()})
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