Commit 649ad5ae authored by Luc Didry's avatar Luc Didry
Browse files

Allow to work with SVG

parent 75854e03
......@@ -114,10 +114,14 @@
</div>
<hr>
<div>
<a class="button" href="#" id="toggle-svg">Work with SVG</a>
<a class="button" href="#" id="download">Download</a>
<a class="button hidden" href="#" id="download-svg">Download</a>
<a class="button" href="#" id="reset">Reset to default</a>
<a class="button" href="#" id="settings">Show advanced settings</a>
</div>
<div id="svg" class="hidden">
</div>
<canvas id="canvas" width="800" height="400"></canvas>
</div>
<footer class="container">
......@@ -127,6 +131,7 @@
Support the author on <a href="https://liberapay.com/sky/">Liberapay</a> or <a href="https://www.tipeee.com/fiat-tux">Tipeee</a>!
</p>
</footer>
<script src="js/canvas2svg.js"></script>
<script src="js/wema_wema.js"></script>
</body>
</html>
This diff is collapsed.
......@@ -24,6 +24,9 @@ var domIsReady = (function(domIsReady) {
return domIsReady;
})(domIsReady || {});
var svg = new C2S(800,400);
(function(document, window, domIsReady, undefined) {
domIsReady(function() {
// Trigger drawing
......@@ -48,12 +51,37 @@ var domIsReady = (function(domIsReady) {
toggleBgSettings();
});
// Toggle SVG/Canvas
document.querySelector('#toggle-svg').addEventListener('click', function() {
var s = document.getElementById('svg');
if (s.classList.contains('hidden')) {
this.classList.add('button-primary');
hide('canvas');
hide('download');
show('svg');
show('download-svg');
this.text = 'Work with canvas';
} else {
this.classList.remove('button-primary');
hide('svg');
hide('download-svg');
show('canvas');
show('download');
this.text = 'Work with SVG';
}
});
// Download
document.querySelector('#download').addEventListener('click', function() {
var f = document.getElementById('filename');
this.download = f.value;
this.href = document.getElementById('canvas').toDataURL().replace("image/png", "image/octet-stream");
});
document.querySelector('#download-svg').addEventListener('click', function() {
var f = document.getElementById('filename');
this.download = f.value;
this.href = 'data:image/octet-stream;base64,'+btoa(svg.getSerializedSvg(true));
console.log(this.href);
});
// Reset settings
document.querySelector('#reset').addEventListener('click', function() {
......@@ -194,8 +222,14 @@ function refreshFilename() {
var w = document.getElementById('wemake');
var p = document.getElementById('porn');
var f = document.getElementById('filename');
var s = document.getElementById('svg');
var ext = 'png';
var name = w.value+' '+p.value+'.png';
if (!s.classList.contains('hidden')) {
ext = 'svg';
}
var name = w.value+' '+p.value+'.'+ext;
f.value = name.replace(/ /g, '_');
}
......@@ -222,6 +256,7 @@ function refreshText() {
var ctx = c.getContext('2d');
ctx.clearRect(0, 0, c.width, c.height);
svg.clearRect(0, 0, c.width, c.height);
// update URL
var url = new URL(window.location);
......@@ -248,58 +283,88 @@ function refreshText() {
switch(bgt.value) {
case 'plain':
ctx.fillStyle = co.value;
svg.fillStyle = co.value;
break;
case 'gradient':
var grd;
switch(or.value) {
case 'lr':
grd = ctx.createLinearGradient(0, 200, c.width, 200);
grd = ctx.createLinearGradient(0, 200, c.width, 200);
grd2 = svg.createLinearGradient(0, 200, c.width, 200);
break;
case 'rl':
grd = ctx.createLinearGradient(c.width, 200, 0, 200);
grd = ctx.createLinearGradient(c.width, 200, 0, 200);
grd2 = svg.createLinearGradient(c.width, 200, 0, 200);
break;
case 'tb':
grd = ctx.createLinearGradient(400, 0, 400, c.height);
grd = ctx.createLinearGradient(400, 0, 400, c.height);
grd2 = svg.createLinearGradient(400, 0, 400, c.height);
break;
case 'bt':
grd = ctx.createLinearGradient(400, c.height, 400, 0);
grd = ctx.createLinearGradient(400, c.height, 400, 0);
grd2 = svg.createLinearGradient(400, c.height, 400, 0);
break;
case 'r':
grd = ctx.createRadialGradient(400, 200, 25, 400, 200, 400);
grd = ctx.createRadialGradient(400, 200, 25, 400, 200, 400);
grd2 = svg.createRadialGradient(400, 200, 25, 400, 200, 400);
break;
}
grd.addColorStop(0, bgr.value);
grd.addColorStop(1, egr.value);
grd2.addColorStop(0, bgr.value);
grd2.addColorStop(1, egr.value);
ctx.fillStyle = grd;
svg.fillStyle = grd2;
break;
case 'rainbow':
var grd = ctx.createLinearGradient(400, 0, 400, c.height);
var grd = ctx.createLinearGradient(400, 0, 400, c.height);
var grd2 = svg.createLinearGradient(400, 0, 400, c.height);
grd.addColorStop(0, '#e50000');
grd.addColorStop(1 / 5, '#ff8d00');
grd.addColorStop(2 / 5, '#ffee00');
grd.addColorStop(3 / 5, '#008121');
grd.addColorStop(4 / 5, '#004cff');
grd.addColorStop(1, '#760188');
grd2.addColorStop(0, '#e50000');
grd2.addColorStop(1 / 5, '#ff8d00');
grd2.addColorStop(2 / 5, '#ffee00');
grd2.addColorStop(3 / 5, '#008121');
grd2.addColorStop(4 / 5, '#004cff');
grd2.addColorStop(1, '#760188');
ctx.fillStyle = grd;
svg.fillStyle = grd2;
break;
}
roundRect(ctx, 0, 0, c.width, c.height, parseInt(cor.value), true, false);
roundRect(svg, 0, 0, c.width, c.height, parseInt(cor.value), true, false);
// Inside rounded rectangle
ctx.lineWidth = 20;
svg.lineWidth = 20;
ctx.strokeStyle = rc.value;
svg.strokeStyle = rc.value;
roundRect(ctx, 25, 25, 750, 350, 20, false);
roundRect(svg, 25, 25, 750, 350, 20, false);
ctx.textAlign="center";
svg.textAlign="center";
// Write WE MAKE
ctx.font = 'bold '+parseInt(ws.value)+'px sans-serif';
svg.font = 'bold '+parseInt(ws.value)+'px sans-serif';
ctx.fillStyle = wc.value;
svg.fillStyle = wc.value;
ctx.fillText(w.value, parseInt(wx.value), parseInt(wy.value), 725);
svg.fillText(w.value, parseInt(wx.value), parseInt(wy.value), 725);
// Write PORN
ctx.font = 'bold '+parseInt(ps.value)+'px sans-serif';
svg.font = 'bold '+parseInt(ps.value)+'px sans-serif';
ctx.fillStyle = pc.value
svg.fillStyle = pc.value
ctx.fillText(p.value, parseInt(px.value), parseInt(py.value), 725);
svg.fillText(p.value, parseInt(px.value), parseInt(py.value), 725);
document.getElementById('svg').innerHTML = svg.getSerializedSvg();
}
function roundRect(ctx, x, y, width, height, radius, fill, stroke) {
......
Supports Markdown
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