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

Allow to use background images from the web

parent 0255cefb
......@@ -395,6 +395,12 @@
<input type="file" id="custom-img" name="custom-img" class="form-control-file"/>
</div>
</div>
<div class="row">
<label for="custom-img-url" class="col-sm-12 col-md-6">Use an image from the web</label><br/>
<div class="col-sm-12 col-md-6">
<input type="url" id="custom-img-url" name="custom-img-url" class="form-control"/>
</div>
</div>
<div class="d-none" id="bg-custom-img-settings">
<div class="row">
<label for="custom-x" class="col-sm-12 col-md-6">Custom image x position</label>
......@@ -474,7 +480,7 @@
</div>
</div>
<div class="col">
<div class="row">
<div class="row" id="canvas-container">
<div id="svg" class="d-none"></div>
<canvas class="img-fluid" id="canvas" width="800" height="400"></canvas>
</div>
......
......@@ -7,6 +7,7 @@ var sorryNoGallery = 'Sorry, but you haven\'t saved any image yet';
var load = 'Load';
var deleteText = 'Delete';
var download = 'Download';
var downloadClic = 'Please, right-click on the sticker and select "Save as" to download the sticker'
var customImg;
var fonts = {
......@@ -115,7 +116,7 @@ function translate(userLang, languages) {
});
['wemake', 'porn', 'filename', 'corners', 'bg-type', 'bgu-color', 'bgr-color', 'egr-color',
'gr-orientation', 'bg-img', 'custom-img', 'custom-x', 'custom-y', 'custom-size', 'border-thickness',
'img-width', 'img-height'
'img-width', 'img-height', 'custom-img-url'
].forEach(function(e) {
if (locale[e] !== undefined) {
$('label[for="'+e+'"]').text(locale[e]);
......@@ -163,6 +164,16 @@ function translate(userLang, languages) {
if (locale['delete'] !== undefined) {
deleteText = locale['delete'];
}
if (locale['custom-img-text'] !== undefined) {
customImgText = locale['custom-img-text'];
var c = $('option[value="custom"]');
if (c.length !== 0) {
c.text(customImgText);
}
}
if (locale['download-clic'] !== undefined) {
downloadClic = locale['download-clic'];
}
}
});
}
......@@ -278,6 +289,10 @@ function getParameters() {
if (url.searchParams.get('s') !== null) {
$('#custom-size').val(url.searchParams.get('s'));
}
if (url.searchParams.get('bgu') !== null && url.searchParams.get('bgu') !== '') {
$('#custom-img-url').val(url.searchParams.get('bgu'));
handleImageURL(false);
}
}
function bindEvents() {
......@@ -294,6 +309,18 @@ function bindEvents() {
});
}
});
$('#custom-img-url').keyup(function() {
if (this.checkValidity() && !$(this).val().match(/^ *$/)) {
handleImageURL(true);
refreshText();
}
});
$('#custom-img-url').on('paste', function() {
if (this.checkValidity() && !$(this).val().match(/^ *$/)) {
handleImageURL(true);
refreshText();
}
});
// Various settings changes
$('select,input[type="number"],input[type="color"],input[type="checkbox"]').each(function(index) {
......@@ -351,7 +378,13 @@ function bindEvents() {
this.download = $('#filename').val();
var s = $('#svg');
if (s.hasClass('d-none')) {
this.href = document.getElementById('canvas').toDataURL().replace("image/png", "image/octet-stream");
var bgu = $('#custom-img-url').val();
if (bgu === undefined || bgu === null || bgu.match(/^ *$/) || !$('#custom-img-url')[0].checkValidity()) {
this.href = document.getElementById('canvas').toDataURL('image/octet-stream');
} else {
e.preventDefault();
alert(downloadClic);
}
} else {
this.href = 'data:image/octet-stream;base64,'+btoa(svg.getSerializedSvg(true));
}
......@@ -429,6 +462,30 @@ function bindEvents() {
});
}
function handleImageURL(onChange) {
$('#bg-type').val('img');
var o = $('<option>');
var b = $('#bg-img');
var c = $('option[value="custom"]');
if (c.length !== 0) {
c.remove();
}
o.attr('value', 'custom');
o.text(customImgText);
b.append(o);
b.val('custom');
if (onChange) {
$('#custom-x').val(0);
$('#custom-y').val(0);
$('#custom-size').val(0);
}
toggleBgSettings();
}
function toggleBgSettings() {
switch($('#bg-type').val()) {
case 'plain':
......@@ -580,6 +637,7 @@ function reset() {
$('#img-width').val(800);
$('#img-height').val(400);
$('#border-thickness').val(20);
$('#custom-img-url').val(null);
show('bg-color');
hide('gradient-settings');
......@@ -620,13 +678,18 @@ function refreshText() {
var x = $('#custom-x').val();
var y = $('#custom-y').val();
var s = $('#custom-size').val();
var bgu = ($('#custom-img-url')[0].checkValidity()) ? $('#custom-img-url').val() : '';
var width = $('#img-width').val();
var height = $('#img-height').val();
var c = document.getElementById('canvas');
$('#canvas').remove();
var c = document.createElement('canvas');
c.id = 'canvas';
c.classList.add('img-fluid');
c.width = width;
c.height = height;
document.getElementById('canvas-container').appendChild(c);
var ctx = c.getContext('2d');
// do we work on the SVG?
......@@ -641,13 +704,13 @@ function refreshText() {
window.history.pushState("change", "WemaWema", createUrl(url,
w, wx, wy, ws, wc, wa, wf, wfs,
p, px, py, ps, pc, pa, pf, pfs,
co, ra, gli, bgt, rc, bgr, egr, or, bgi, cor, bth, width, height, x, y, s)
co, ra, gli, bgt, rc, bgr, egr, or, bgi, cor, bth, width, height, x, y, s, bgu)
);
drawCtx(false, ctx, rc, ra, ws, wc, wa, wf, wfs, w, wx, wy, ps, pc, pa, pf, pfs, p, px, py, gli, width, height, bth, bgt, co, cor, bgi, s, bgr, egr, or, x, y);
drawCtx(false, ctx, rc, ra, ws, wc, wa, wf, wfs, w, wx, wy, ps, pc, pa, pf, pfs, p, px, py, gli, width, height, bth, bgt, co, cor, bgi, s, bgr, egr, or, x, y, bgu);
}
function drawCtx(inGallery, ctx, rc, ra, ws, wc, wa, wf, wfs, w, wx, wy, ps, pc, pa, pf, pfs, p, px, py, gli, width, height, bth, bgt, co, cor, bgi, s, bgr, egr, or, x, y) {
function drawCtx(inGallery, ctx, rc, ra, ws, wc, wa, wf, wfs, w, wx, wy, ps, pc, pa, pf, pfs, p, px, py, gli, width, height, bth, bgt, co, cor, bgi, s, bgr, egr, or, x, y, bgu) {
// cleanup
ctx.clearRect(0, 0, width, height);
......@@ -697,15 +760,15 @@ function drawCtx(inGallery, ctx, rc, ra, ws, wc, wa, wf, wfs, w, wx, wy, ps, pc,
window.history.pushState("change", "WemaWema", createUrl(url,
w, wx, wy, ws, wc, wa, wf, wfs,
p, px, py, ps, pc, pa, pf, pfs,
co, ra, gli, bgt, rc, bgr, egr, or, bgi, cor, bth, width, height, x, y, s)
co, ra, gli, bgt, rc, bgr, egr, or, bgi, cor, bth, width, height, x, y, s, bgu)
);
}
ctx.drawImage(customImg, 0, 0, iw, ih, x, y, iw*sizer, ih*sizer);
drawOver(ctx, rc, ra, ws, wc, wa, wf, wfs, w, wx, wy, ps, pc, pa, pf, pfs, p, px, py, gli, width, height, bth);
} else {
if (bgi === '' || bgi === 'custom') {
if (bgi === '' || (bgi === 'custom' && (bgu === undefined || bgu === null || bgu === ''))) {
bgi = 'beer';
if (inGallery !== true) {
if (inGallery !== true && (bgu === undefined || bgu === null || bgu === '')) {
$('#bg-img').val('beer');
}
}
......@@ -714,7 +777,12 @@ function drawCtx(inGallery, ctx, rc, ra, ws, wc, wa, wf, wfs, w, wx, wy, ps, pc,
if (parseInt(cor) === 20) {
img += '-round';
}
background.src = img+'.png';
if (bgu === undefined || bgu === null || bgu === '') {
img += '.png';
} else {
img = bgu;
}
background.src = img;
background.onload = function() {
var iw = background.width;
var ih = background.height;
......@@ -732,7 +800,7 @@ function drawCtx(inGallery, ctx, rc, ra, ws, wc, wa, wf, wfs, w, wx, wy, ps, pc,
window.history.pushState("change", "WemaWema", createUrl(url,
w, wx, wy, ws, wc, wa, wf, wfs,
p, px, py, ps, pc, pa, pf, pfs,
co, ra, gli, bgt, rc, bgr, egr, or, bgi, cor, bth, width, height, x, y, s)
co, ra, gli, bgt, rc, bgr, egr, or, bgi, cor, bth, width, height, x, y, s, bgu)
);
}
ctx.drawImage(background, 0, 0, iw, ih, x, y, iw*sizer, ih*sizer);
......@@ -886,6 +954,7 @@ function addItem() {
x : $('#custom-x').val(),
y : $('#custom-y').val(),
s : $('#custom-size').val(),
bgu : $('#custom-img-url').val(),
};
localStorage.setItem('wemas', JSON.stringify(wemas));
}
......@@ -929,7 +998,7 @@ function fillGallery() {
c.setAttribute('width', v.width);
c.setAttribute('height', v.height);
var ctx = c.getContext('2d');
drawCtx(true, ctx, v.rc, v.ra, v.ws, v.wc, v.wa, v.wf, v.wfs, v.w, v.wx, v.wy, v.ps, v.pc, v.pa, v.pf, v.pfs, v.p, v.px, v.py, v.gli, v.width, v.height, v.bth, v.bgt, v.co, v.cor, v.bgi, v.s, v.bgr, v.egr, v.org, v.x, v.y);
drawCtx(true, ctx, v.rc, v.ra, v.ws, v.wc, v.wa, v.wf, v.wfs, v.w, v.wx, v.wy, v.ps, v.pc, v.pa, v.pf, v.pfs, v.p, v.px, v.py, v.gli, v.width, v.height, v.bth, v.bgt, v.co, v.cor, v.bgi, v.s, v.bgr, v.egr, v.org, v.x, v.y, v.bgu);
d.html(c);
var p = $('<div>');
......@@ -941,7 +1010,7 @@ function fillGallery() {
var url = createUrl(new URL(window.location),
v.w, v.wx, v.wy, v.ws, v.wc, v.wa, v.wf, v.wfs,
v.p, v.px, v.py, v.ps, v.pc, v.pa, v.pf, v.pfs,
v.co, v.ra, v.gli, v.bgt, v.rc, v.bgr, v.egr, v.or, v.bgi, v.cor, v.bth, v.width, v.height, v.x, v.y, v.s
v.co, v.ra, v.gli, v.bgt, v.rc, v.bgr, v.egr, v.or, v.bgi, v.cor, v.bth, v.width, v.height, v.x, v.y, v.s, v.bgu
);
a1.attr('href', url);
a1.text(load);
......@@ -954,7 +1023,12 @@ function fillGallery() {
a2.attr('href', '#');
a2.click(function(e) {
this.download = $('#filename').val();
this.href = $('[data-item="'+k+'"] canvas')[0].toDataURL().replace("image/png", "image/octet-stream");
if (v.bgu === undefined || v.bgu === null || v.bgu.match(/^ *$/)) {
this.href = $('[data-item="'+k+'"] canvas')[0].toDataURL('image/octet-stream');
} else {
e.preventDefault();
alert(downloadClic);
}
});
a2.text(download);
p2.append(a2);
......@@ -1058,7 +1132,7 @@ function centerText(e) {
}
// create the URL with all the parameters
function createUrl(url, w, wx, wy, ws, wc, wa, wf, wfs, p, px, py, ps, pc, pa, pf, pfs, co, ra, gli, bgt, rc, bgr, egr, or, bgi, cor, bth, width, height, x, y, s) {
function createUrl(url, w, wx, wy, ws, wc, wa, wf, wfs, p, px, py, ps, pc, pa, pf, pfs, co, ra, gli, bgt, rc, bgr, egr, or, bgi, cor, bth, width, height, x, y, s, bgu) {
url.searchParams.set('w', w);
url.searchParams.set('wx', wx);
url.searchParams.set('wy', wy);
......@@ -1091,6 +1165,7 @@ function createUrl(url, w, wx, wy, ws, wc, wa, wf, wfs, p, px, py, ps, pc, pa, p
url.searchParams.set('x', x);
url.searchParams.set('y', y);
url.searchParams.set('s', s);
url.searchParams.set('bgu', bgu);
return url;
}
This diff is collapsed.
......@@ -71,5 +71,8 @@
"sorry-no-gallery": "Sorry, but you haven't saved any image yet",
"load": "Load",
"delete": "Delete",
"snow": "Snow"
"snow": "Snow",
"custom-img-url": "Use an image from the Web",
"custom-img-text": "Custom image",
"download-clic": "Please, right-click on the sticker and select \"Save as\" to download the sticker"
}
......@@ -71,5 +71,8 @@
"sorry-no-gallery": "Désolé, mais vous n’avez pas encore enregistré d’image",
"load": "Charger",
"delete": "Supprimer",
"snow": "Neige"
"snow": "Neige",
"custom-img-url": "Utiliser une image du web",
"custom-img-text": "Image personnalisée",
"download-clic": "Veuillez faire un clic droit sur l’autocollant et sélectionner « Enregistrer l’image sous » pour télécharger l’autocollant"
}
......@@ -64,5 +64,15 @@
"border-txt": "I am Groot",
"border-thickness": "I am Groot",
"make-text-center": "I am Groot",
"print": "I am Groot"
"print": "I am Groot",
"bark": "I am Groot",
"save": "I am Groot",
"gallery": "I am Groot",
"sorry-no-gallery": "I am Groot",
"load": "I am Groot",
"delete": "I am Groot",
"snow": "I am Groot",
"custom-img-url": "I am Groot",
"custom-img-text": "I am Groot",
"download-clic": "I am Groot"
}
......@@ -65,5 +65,6 @@
"border-thickness": "Espessor",
"make-text-center": "Centrar lo tèxte",
"print": "Imprimir",
"bark": "Rusca d’arbre"
"bark": "Rusca d’arbre",
"custom-img-text": "Imatge personalizat"
}
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