Commit 31f2edc4 authored by Luc Didry's avatar Luc Didry
Browse files

Allow to upload a custom image for sticker background

parent b735871e
......@@ -109,30 +109,64 @@
</select>
</div>
</div>
<div class="row hidden" id="bg-custom-img-settings">
<div class="three columns">
<label for="custom-img">Upload a background image</label><br/>
</div>
<div class="three columns">
<label for="custom-x">Custom image x position</label>
<input id="custom-x" type="number" min="0" max="800" value="0">
</div>
<div class="three columns">
<label for="custom-y">Custom image y position</label>
<input id="custom-y" type="number" min="0" max="400" value="0">
</div>
<div class="three columns">
<label for="custom-size">Custom image size</label>
<input id="custom-size" type="number" min="0" step="0.001" value="0.000">
</div>
<div class="three columns">
<input type="file" id="custom-img" name="custom-img"/>
</div>
</div>
<hr>
<div class="row">
<div class="two columns">
<label for="wemake-x">First line x position</label>
<input id="wemake-x" type="number" min="0" value="400">
</div>
<div class="two columns">
<label for="wemake-y">First line y position</label>
<input id="wemake-y" type="number" min="0" value="160">
</div>
<div class="two columns">
<label for="wemake-size">First line text size</label>
<input id="wemake-size" type="number" min="1" value="150">
</div>
<div class="two columns">
<label for="porn-x">Second line x position</label>
<input id="porn-x" type="number" min="0" value="400">
</div>
<div class="two columns">
<label for="porn-y">Second line y position</label>
<input id="porn-y" type="number" min="0" value="350">
</div>
<div class="two columns">
<label for="porn-size">Second line text size</label>
</div>
</div>
<div class="row">
<div class="two columns">
<input id="wemake-x" type="number" min="0" value="400">
</div>
<div class="two columns">
<input id="wemake-y" type="number" min="0" value="160">
</div>
<div class="two columns">
<input id="wemake-size" type="number" min="1" value="150">
</div>
<div class="two columns">
<input id="porn-x" type="number" min="0" value="400">
</div>
<div class="two columns">
<input id="porn-y" type="number" min="0" value="350">
</div>
<div class="two columns">
<input id="porn-size" type="number" min="1" value="220">
</div>
</div>
......
......@@ -24,11 +24,13 @@ var domIsReady = (function(domIsReady) {
return domIsReady;
})(domIsReady || {});
var svg = new C2S(800,400);
var showSettings = 'Show advanced settings';
var hideSettings = 'Hide advanced settings';
var workCanvas = 'Work with canvas';
var workSvg = 'Work with SVG';
var svg = new C2S(800,400);
var showSettings = 'Show advanced settings';
var hideSettings = 'Hide advanced settings';
var workCanvas = 'Work with canvas';
var workSvg = 'Work with SVG';
var customImgText = 'Custom image';
var customImg;
(function(document, window, domIsReady, undefined) {
domIsReady(function() {
......@@ -40,7 +42,7 @@ var workSvg = 'Work with SVG';
xhr.onload = function() {
if (xhr.readyState == 4 && xhr.status === 200) {
var locale = xhr.response;
['wemake', 'porn', 'filename', 'corners', 'wemake-color', 'porn-color', 'rect-color', 'add-glitter', 'bg-type', 'color', 'bgr-color', 'egr-color', 'bg-img', 'wemake-x', 'wemake-y', 'wemake-size', 'porn-x', 'porn-y', 'porn-size'].forEach(function(e) {
['wemake', 'porn', 'filename', 'corners', 'wemake-color', 'porn-color', 'rect-color', 'add-glitter', '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(e) {
if (locale[e] !== undefined) {
document.querySelector('label[for="'+e+'"]').innerText = locale[e];
}
......@@ -72,16 +74,19 @@ var workSvg = 'Work with SVG';
document.querySelector('#settings').innerText = locale['settings-hide'];
}
if (locale['settings-show'] !== undefined) {
showSettings = locale['settings-show'];
showSettings = locale['settings-show'];
}
if (locale['settings-hide'] !== undefined) {
hideSettings = locale['settings-hide'];
hideSettings = locale['settings-hide'];
}
if (locale['toggle-canvas'] !== undefined) {
workCanvas = locale['toggle-canvas'];
workCanvas = locale['toggle-canvas'];
}
if (locale['toggle-svg'] !== undefined) {
workSvg = locale['toggle-svg'];
workSvg = locale['toggle-svg'];
}
if (locale['custom-img-text'] !== undefined) {
customImgText = locale['custom-img-text'];
}
if (locale['footer'] !== undefined) {
document.querySelector('footer p').innerHTML = locale['footer'];
......@@ -142,7 +147,6 @@ var workSvg = 'Work with SVG';
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
......@@ -169,6 +173,12 @@ var workSvg = 'Work with SVG';
refreshText();
});
// Upload custom image
document.getElementById('custom-img').addEventListener('change', handleImage, false);
if (customImg === undefined || customImg === null) {
document.getElementById('custom-img').value = null;
}
// Get parameters
if (window.location.hash) {
document.querySelector('#porn').value = decodeURIComponent(window.location.hash.substr(1));
......@@ -241,6 +251,40 @@ var workSvg = 'Work with SVG';
});
})(document, window, domIsReady);
function handleImage(e) {
var reader = new FileReader();
reader.onload = function(event) {
var img = new Image();
img.onload = function() {
var o = document.createElement('option');
var b = document.getElementById('bg-img');
var c = document.querySelector('option[value="custom"]');
if (c !== null) {
c.remove();
}
o.setAttribute('value', 'custom');
o.text = customImgText;
b.appendChild(o);
b.value = 'custom';
customImg = img;
document.getElementById('custom-x').value = 0;
document.getElementById('custom-y').value = 0;
document.getElementById('custom-size').value = 0;
refreshText();
}
img.src = event.target.result;
}
reader.readAsDataURL(e.target.files[0]);
}
function scalePreserveAspectRatio(imgW,imgH,maxW,maxH){
return(Math.min((maxW/imgW),(maxH/imgH)));
}
function switchTextColors() {
var w = document.getElementById('wemake-color');
var p = document.getElementById('porn-color');
......@@ -258,21 +302,25 @@ function toggleBgSettings() {
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');
show('bg-custom-img-settings');
break;
default:
hide('bg-color');
hide('gradient-settings');
hide('bg-img-settings');
hide('bg-custom-img-settings');
}
}
......@@ -291,26 +339,31 @@ function hide(id) {
}
function reset() {
document.getElementById('wemake-x').value = "400";
document.getElementById('wemake-y').value = "160";
document.getElementById('wemake-size').value = "150";
document.getElementById('wemake-color').value = "#000000";
document.getElementById('porn-x').value = "400";
document.getElementById('porn-y').value = "350";
document.getElementById('porn-size').value = "220";
document.getElementById('porn-size').value = "220";
document.getElementById('porn-color').value = "#000000";
document.getElementById('color').value = "#fcd205";
document.getElementById('rect-color').value = "#000000";
document.getElementById('wemake-x').value = '400';
document.getElementById('wemake-y').value = '160';
document.getElementById('wemake-size').value = '150';
document.getElementById('wemake-color').value = '#000000';
document.getElementById('porn-x').value = '400';
document.getElementById('porn-y').value = '350';
document.getElementById('porn-size').value = '220';
document.getElementById('porn-size').value = '220';
document.getElementById('porn-color').value = '#000000';
document.getElementById('color').value = '#fcd205';
document.getElementById('rect-color').value = '#000000';
document.getElementById('add-glitter').checked = false;
document.getElementById('bg-type').value = 'plain';
document.getElementById('gr-orientation').value = 'lr';
document.getElementById('bg-img').value = 'beer';
document.getElementById('corners').value = '20';
document.getElementById('custom-img').value = null;
document.getElementById('custom-x').value = 0;
document.getElementById('custom-y').value = 0;
document.getElementById('custom-size').value = 0;
show('bg-color');
hide('gradient-settings');
hide('bg-img-settings');
hide('bg-custom-img-settings');
refreshText();
}
......@@ -418,16 +471,41 @@ function refreshText() {
svg.fillStyle = grd2;
break;
case 'img':
var background = new Image();
var img = 'img/'+bgi.value
if (parseInt(cor.value) === 20) {
img += '-round';
}
background.src = img+'.png';
background.onload = function() {
ctx.drawImage(background, 0, 0);
svg.drawImage(background, 0, 0);
if (bgi.value === 'custom' && customImg !== undefined && customImg !== null) {
var iw = customImg.width;
var ih = customImg.height;
if (iw > 800 || ih > 400) {
var x = document.getElementById('custom-x').value;
var y = document.getElementById('custom-y').value;
var s = document.getElementById('custom-size');
var sizer = scalePreserveAspectRatio(iw, ih, 800, 400);
if (parseFloat(s.value) === 0.0) {
s.value = Math.round(sizer * 1000)/1000;
} else {
sizer = s.value;
}
ctx.drawImage(customImg, 0, 0, iw, ih, x, y, iw*sizer, ih*sizer);
svg.drawImage(customImg, 0, 0, iw, ih, x, y, iw*sizer, ih*sizer);
} else {
ctx.drawImage(customImg, 0, 0);
svg.drawImage(customImg, 0, 0);
}
drawOver(ctx, svg, rc, ws, wc, w, wx, wy, ps, pc, p, px, py, gli);
} else {
if (bgi.value === '') {
bgi.value = 'beer';
}
var background = new Image();
var img = 'img/'+bgi.value
if (parseInt(cor.value) === 20) {
img += '-round';
}
background.src = img+'.png';
background.onload = function() {
ctx.drawImage(background, 0, 0);
svg.drawImage(background, 0, 0);
drawOver(ctx, svg, rc, ws, wc, w, wx, wy, ps, pc, p, px, py, gli);
}
}
return;
break;
......
......@@ -34,6 +34,11 @@
"porn-x": "Abscisse de la seconde ligne",
"porn-y": "Ordonnée de la seconde ligne",
"porn-size": "Taille du texte de la seconde ligne",
"custom-img": "Utiliser une image personnalisée",
"custom-img-text": "Image personnalisée",
"custom-x": "Abscisse de l’image personnalisée",
"custom-y": "Ordonnée de l’image personnalisée",
"custom-size": "Taille de l’image personnalisée",
"toggle-svg": "Travailler en SVG",
"toggle-canvas": "Travailler en Canvas",
"download": "Télécharger",
......
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