-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
117 lines (106 loc) · 4.1 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<html>
<head>
<title>Dyposter - Browser Image Generator</title>
<meta charset="utf-8">
<style type="text/css">
html,body {
padding: 0; margin: 0; background: #313131;
font-family: Arial, Helvetica, sans-serif;
/* padding-top: 6vh; */
}
.center {
text-align: center;
margin: 0 auto;
}
/* @media screen and (orientation: landscape) {
width: ;
}
@media screen and (orientation: portrait) {
} */
</style>
</head>
<body>
<!-- <header style="position:fixed; left:0; top: 0; background: #a3e635; padding: .6em 1em; border-radius: 0 0 2rem 0; ">
<h1 style="font-size: 20px; display: inline-block; margin-right: 10px;">Dyposter</h1>
<p style="color:#313131; display: inline-block; ">长按/右击图片下载保存</p>
</header> -->
<!-- screen view port center then image -->
<div style="width: 100vw; height: 100vh; display: flex; flex-direction: row; align-items: center; justify-content: center;">
<div id="dyposter" class="center" style="background:#fff;overflow: visible; "></div>
</div>
</body>
<script type="application/javascript" src="./lib/zepto.min.js"></script>
<script type="application/javascript" src="./lib/fabric.min.js"></script>
<script type="application/javascript" src="./dyposter.js"></script>
<script type="application/javascript">
const defaultData = {
"config": { "width": 1125, "height": 1800, "backgroundColor": "#22d3ee" },
"objects": [
// { "type": "image", "mode": "cover", "top": 60, "left": 60, "width": 1005, "height": 1005, "centeredScaling": true, "crossOrigin": "anonymous", "src": "https:\/\/bluedge.oss-cn-shenzhen.aliyuncs.com\/static\/shop_cover_default.jpg" },
// { "type": "image", "top": 0, "left": 0, "width": 1125, "height": 1800, "crossOrigin": "anonymous", "src": "https:\/\/bluedge.oss-cn-shenzhen.aliyuncs.com\/static\/poster-bg.png" },
{
"type": "textbox",
"text": "No Data Url",
"fontFamily":'Arial',
"top": 300, "left": 0, "width": 1125, "fontSize": 120, "fontWeight": 400,
"textAlign":"center",
"splitByGrapheme": true,
},
{
"type": "textbox",
"text": window.location.href + '?d=[Data Url]',
"fontFamily":'Arial',
"top": 600, "left": 100, "width": 925, "fontSize": 60, "fontWeight": 400,
"textAlign":"left",
"splitByGrapheme": true,
},
{
"type": "textbox",
"text": "The [Data Url] is an url accept GET request publicly and return a [Config Object], which will be drawed.",
"fontFamily":'Arial',
"top": 900, "left": 100, "width": 925, "fontSize": 60, "fontWeight": 400,
"textAlign":"left",
// "splitByGrapheme": true,
},
{ "type": "image",
"mode": "cover",
"top": 1500, "left": 825, "width": 300, "height": 300,
"crossOrigin": "anonymous",
"src": "https://th.bing.com/th?q=Red+Emoji&w=120&h=120&c=1&rs=1&qlt=90&cb=1&dpr=2&pid=InlineBlock&mkt=en-US&cc=US&setlang=en&adlt=moderate&t=1&mw=247" }
]
}
function getUrlParams() {
const query = {}
const args = document.location.search.slice(1).split('&')
args.forEach(ar => query[ar.split('=')[0]] = ar.split('=')[1])
return query
}
const imageSize = 90 // means long border is 90vw/vh
function fitScreen( $ele, w, h ){
var width, height
const ratio = w / h
const ratioScreen = window.innerWidth / window.innerHeight
const isPortrait = window.innerWidth < window.innerHeight
if( ratio > ratioScreen ){
width = imageSize/100 * window.innerWidth
height = width / ratio
}else{
height = imageSize/100 * window.innerHeight
width = height * ratio
}
$ele.width(width)
$ele.height(height)
}
function run(data){
fitScreen( $('#dyposter'), data.config.width, data.config.height )
const $poster = new Dyposter('dyposter', data.config)
$poster.draw(data.objects)
}
const src = getUrlParams().d
if( !src ) run(defaultData)
else $.get( src, function (data) {
if (status > 300) return alert('DATA URL ERROR')
run(data)
})
</script>
</html>