Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
Luc Didry
wemawema
Commits
ace3f203
Commit
ace3f203
authored
Oct 24, 2017
by
Luc Didry
Browse files
Allow to use background images from the web
parent
0255cefb
Pipeline
#26829
passed with stage
in 33 seconds
Changes
7
Pipelines
2
Expand all
Hide whitespace changes
Inline
Side-by-side
index.html
View file @
ace3f203
...
...
@@ -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>
...
...
js/wema_wema.js
View file @
ace3f203
...
...
@@ -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
;
}
js/wema_wema.min.js
View file @
ace3f203
This diff is collapsed.
Click to expand it.
locales/en.json
View file @
ace3f203
...
...
@@ -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"
}
locales/fr.json
View file @
ace3f203
...
...
@@ -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"
}
locales/groot.json
View file @
ace3f203
...
...
@@ -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"
}
locales/oc.json
View file @
ace3f203
...
...
@@ -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"
}
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment