-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
69 lines (57 loc) · 3.99 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
<title>Images Generator</title>
<meta property="og:title" content="Images Generator"/>
<meta property="og:type" content="website" />
<meta property="og:description" content="You can choose brush size, color to draw on the image, you can also customize the text on the image and customize filename"/>
<meta property="og:url" content="https://yschen25.github.io/Images_Generator/"/>
<meta property="og:image" content="https://yschen25.github.io/Images_Generator/images/sample05.png"/>
<meta name="author" content="Yi-Shiuan Chen,yschen,yschen25,Ka,Ka Ka,陳翊萱,(https://github.com/yschen25)">
<meta name="keywords" content="html,css,rwd,javascript,jQuery,canvas,ui,ux,design,photoshop,illustrator,website building,website designing,website drawing,drawing online,drawing on canvas,social sharing,line sharing,line sending,fb sharing,fb sending,fb posting,facebook sharing,facebook sending,facebook posting,線上小畫家,線上Canvas繪圖,Line分享,Line傳送,FB分享,FB傳送,FB貼文,FBPo文,Facebook分享,Facebook傳送,Facebook貼文,FacebookPo文">
<meta name="description" content="You can choose brush size, color to draw on the image on this website, you can also customize the text on the image and filename, finally download it, or you can upload your own image then draw it! 你可以在本網站線上繪圖，能選擇不同的筆刷尺寸和顏色，還可以客製化圖片上的文字和檔名，最後下載你繪製完的圖片；或是你可以上傳自己的圖片並在上面畫畫。" />
<link rel="icon" type="image/png" href="images/favicon_ka.png">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/media.css">
<link rel="stylesheet" href="css/image_generator.css">
<script src="https://d.line-scdn.net/r/web/social-plugin/js/thirdparty/loader.min.js" async="async" defer="defer"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="js/image_generator.js"></script>
</head>
<body>
<h1>Images Generator</h1>
<a class="share lineShare" target="_blank" href="https://social-plugins.line.me/lineit/share?url=https://yschen25.github.io/Images_Generator/index.html">LINE</a>
<a class="share fbShare" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fyschen25.github.io%2FImages_Generator%2F&src=sdkpreparse" class="fb-xfbml-parse-ignore" data-href="https://yschen25.github.io/Images_Generator/" data-mobile-iframe="true">FACEBOOK</a>
<a class="share githubShare" target="_blank" href="https://github.com/yschen25">GITHUB</a>
<div id="paletteWrapper" class="col-xs-push-1 col-xs-10 col-sm-push-2 col-sm-8 col-lg-push-3 col-lg-6"></div>
<div id="penWrapper" class="col-xs-push-1 col-xs-10 col-sm-push-2 col-sm-8 col-lg-push-3 col-lg-6"></div>
<div id="wrapper">
<canvas id="canvas">
Hey! Try another browser.
<img id="uploadImg">
</canvas>
<div id="imgsWrapper">
<img class="imgs" src="images/1.jpg">
<img class="imgs" src="images/2.jpg">
<img class="imgs" src="images/3.jpg">
<img class="imgs" src="images/0.jpg">
<img class="imgs" src="images/5.jpg">
</div>
<div id="clearFix"></div>
</div>
<a id="btnStyle">
<label for="uploadButton">Upload Image</label>
</a>
<input id="uploadButton" accept="image/*" type="file">
<p>Notice : The drawing now only support PC and images size under 400px * 300px</p>
<span>Customize Text : </span>
<input id="cusText" type="text" placeholder="There's No Place Like 127.0.0.1">
<p id="filenameDesc">Customize your filename or just press the download button below : D</p>
<span>Customize Filename : </span>
<input id="cusImgName" type="text" placeholder="Rick and Morty is awesome!">
<a id="downloadBtn" href="images/0.jpg" download="image_generator_ByKa.jpg">Download NOW</a>
</body>
</html>