Skip to content

Commit 7e028dc

Browse files
veryyoungveryyoung
committedJan 18, 2016
init maker
0 parents  commit 7e028dc

15 files changed

+4032
-0
lines changed
 

‎README.md

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
弹幕图片生成器。
2+
3+
可以快速地将图片和文字转换成弹幕图片，生成了图片链接、HTML、UBB、MARKDOWN多种外链方式，可以非常方便地分享到其他地方。
4+
5+
![](http://7xofqv.com1.z0.glb.clouddn.com/Fjzcw1arcGtV-LZvbk0Gs6ZfhTvM)
6+
7+
8+
![](http://7xofqv.com1.z0.glb.clouddn.com/FjhRQ0yHK6WihqsrZHk2FDZ06z_Q)
9+

‎css/bootstrap.min.css

+5
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎css/index.css

+215
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,215 @@
1+
button:focus{outline:0 !important;}
2+
input:focus,input:active,label:focus,label:active{
3+
outline:0 !important;
4+
}
5+
textarea:focus, input:focus{
6+
outline: 0;
7+
}
8+
strong{
9+
color:#777;
10+
}
11+
.res:focus {
12+
outline: 0;
13+
border-color: #31b0d5;
14+
box-shadow: none;
15+
}
16+
*:focus {
17+
outline: 0;
18+
}
19+
input:focus{
20+
outline:none;
21+
}
22+
html {
23+
position: relative;
24+
}
25+
body {
26+
font-size:12px;
27+
}
28+
::selection {
29+
background: #4096EE;
30+
color:#FFF;
31+
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
32+
}
33+
.muted{
34+
color:#CCC;
35+
margin-left:10px;
36+
font-weight:100;
37+
}
38+
a#optionPage{
39+
-webkit-transition: all .4s;
40+
padding:2px;
41+
border-radius: 2px;
42+
color: #808080;
43+
}
44+
a#optionPage:hover{
45+
color: #FFF;
46+
background-color: #808080;
47+
text-decoration: none;
48+
}
49+
.btn {
50+
border: 1px solid #BBB;
51+
font-size:9px;
52+
margin-bottom:25px;
53+
}
54+
.btn-default, .btn-batch{
55+
color:#818181;
56+
height: 21px;
57+
padding-top: 5px;
58+
line-height:10px;
59+
-webkit-transition: all .4s;
60+
}
61+
.btn-batch{
62+
color:#555;
63+
height: 30px;
64+
padding: 3px 6px;
65+
line-height:20px;
66+
border: 2px solid rgba(187,187,187,0.5);
67+
-webkit-transition: all .4s;
68+
}
69+
.btn-group>.btn, .btn-group-vertical>.btn{
70+
border: 1px solid rgba(187,187,187,0.5);
71+
padding: 10px;
72+
height: 28px;
73+
line-height: 6px;
74+
}
75+
.btn-group>.btn:focus, .btn-group>.btn:active, .btn-group>.btn.active{
76+
background-color:rgb(232, 232, 232);
77+
-webkit-box-shadow: none;
78+
box-shadow: none;
79+
-webkit-transition: none;
80+
transition: none;
81+
color: #868686;
82+
}
83+
.link-item{
84+
margin-bottom: -15px;
85+
}
86+
.main{
87+
margin-top: 20px;
88+
}
89+
.clicker{
90+
border: 5px dashed #FDFDFD;
91+
border-radius: 10px;
92+
box-shadow: 0 1px 5px rgba(0,0,0,0.85);
93+
display: inline-block;
94+
margin-top:45px;
95+
background-size: cover;
96+
background-repeat: no-repeat;
97+
background-color: #BBB;
98+
width:200px;
99+
height:200px;
100+
opacity:1;
101+
}
102+
.clicker:hover{
103+
-webkit-transition: all .6s;
104+
border-color: #808080;
105+
cursor:pointer;
106+
opacity:0.7;
107+
}
108+
.res{
109+
height: 30px;
110+
background-color: #FFF;
111+
cursor: default;
112+
position: relative;
113+
margin: 5px 5px 0px 0px;
114+
vertical-align: top;
115+
border: 2px solid rgba(187,187,187,0.5);
116+
display: inline-block;
117+
padding: 4px 6px;
118+
line-height: 20px;
119+
color: #717171;
120+
font-size: 12px;
121+
cursor: default;
122+
box-shadow:none;
123+
border-radius: 5px;
124+
}
125+
.copyBtn{
126+
height: 30px;
127+
margin-top: 5px;
128+
border: 2px solid rgba(187,187,187,0.5);
129+
margin-bottom:20px;
130+
}
131+
li a{
132+
color: #909090;
133+
border-radius: 2px;
134+
padding:0px 2px;
135+
-webkit-transition: all .6s;
136+
}
137+
li a:hover, li a:active{
138+
text-decoration: none;
139+
color:#FFF;
140+
background-color:#999;
141+
outline:none;
142+
}
143+
.loader-wrap{
144+
background-color: rgba(0,0,0,0.65);
145+
height: 100%;
146+
width: 100%;
147+
position: fixed;
148+
z-index: 99999;
149+
margin-top:-20px;
150+
padding-top:25%;
151+
display:none;
152+
}
153+
154+
/* Add this attribute to the element that needs a tooltip */
155+
[data-tooltip] {
156+
position: relative;
157+
z-index: 2;
158+
cursor: pointer;
159+
}
160+
161+
/* Hide the tooltip content by default */
162+
[data-tooltip]:before,
163+
[data-tooltip]:after {
164+
visibility: hidden;
165+
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
166+
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
167+
opacity: 0;
168+
pointer-events: none;
169+
}
170+
171+
/* Position tooltip above the element */
172+
[data-tooltip]:before {
173+
position: absolute;
174+
bottom: 150%;
175+
left: 50%;
176+
margin-bottom: 5px;
177+
margin-left: -40px;
178+
padding: 7px;
179+
width: 80px;
180+
-webkit-border-radius: 3px;
181+
-moz-border-radius: 3px;
182+
border-radius: 3px;
183+
background-color: #000;
184+
background-color: hsla(0, 0%, 20%, 0.7);
185+
color: #fff;
186+
content: attr(data-tooltip);
187+
text-align: center;
188+
font-size: 11px;
189+
line-height: 1.2;
190+
}
191+
192+
/* Triangle hack to make tooltip look like a speech bubble */
193+
[data-tooltip]:after {
194+
position: absolute;
195+
bottom: 150%;
196+
left: 50%;
197+
margin-left: -5px;
198+
width: 0;
199+
border-top: 5px solid #000;
200+
border-top: 5px solid hsla(0, 0%, 20%, 0.7);
201+
border-right: 5px solid transparent;
202+
border-left: 5px solid transparent;
203+
content: " ";
204+
font-size: 0;
205+
line-height: 0;
206+
}
207+
208+
/* Show tooltip content on hover */
209+
[data-tooltip]:hover:before,
210+
[data-tooltip]:hover:after {
211+
visibility: visible;
212+
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
213+
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
214+
opacity: 1;
215+
}

‎css/loaders.min.css

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎css/maker.css

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
#danmako_container{
2+
width:max-content;
3+
}
4+
5+
.danmako_screen {
6+
width: 100%;
7+
height: 100%;
8+
position: fixed;
9+
left: 0;
10+
top: 0;
11+
display: inline-block;
12+
z-index: 1050;
13+
}
14+
15+
16+
17+
.danmako_screen .s_dm .s_show {
18+
position: relative;
19+
z-index: 2;
20+
}
21+
22+
.danmako_screen .s_dm .s_show div {
23+
line-height: 36px;
24+
font-size: 24px;
25+
font-weight: bold;
26+
position: absolute;
27+
top: 0;
28+
left: 0;
29+
}
30+

‎css/sweet-alert.min.css

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎img/placeholder.png

8.61 KB
Loading

‎index.html

+70
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
<!DOCTYPE html>
2+
<html lang="zh-CN">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>弹幕生成器</title>
6+
<link type="text/css" href="css/bootstrap.min.css" rel="stylesheet">
7+
<link type="text/css" href="css/sweet-alert.min.css" rel="stylesheet">
8+
<link type="text/css" href="css/loaders.min.css" rel="stylesheet">
9+
<link rel="stylesheet" type="text/css" href="css/maker.css" />
10+
<link rel="stylesheet" type="text/css" href="css/index.css" />
11+
</head>
12+
<body>
13+
<div class="loader-wrap text-center">
14+
<div class="loader-inner line-scale"></div>
15+
</div>
16+
17+
<div class="container main">
18+
<div class="row">
19+
20+
<div class="col-xs-12" style="">
21+
<input id="input" type="file" class="uploadTrigger" style="display:none;">
22+
</div>
23+
24+
<div class="col-xs-8">
25+
<p>请输入弹幕文字，每行一句</p>
26+
<textarea class="form-control" rows="13" id="input_text"></textarea>
27+
</div>
28+
<div class="col-xs-4">
29+
<p>单击或者拖拽图片到此</p>
30+
<img src="img/placeholder.png" class="dragger clicker">
31+
</div>
32+
<div class="col-xs-12" style="margin-top:100px;">
33+
<div class="link-item">
34+
<strong>图片链接</strong>
35+
<div class="input-append">
36+
<input class="res col-xs-10" id="res_img" value="" spelcheck="false"/>
37+
<button type="button" class="btn btn-default copyBtn disabled">复制</button>
38+
</div>
39+
</div>
40+
<div class="link-item">
41+
<strong>HTML</strong>
42+
<div class="input-append">
43+
<input class="res col-xs-10" id="res_html" value="" spellcheck="false" readonly="true"/>
44+
<button type="button" class="btn btn-default copyBtn disabled">复制</button>
45+
</div>
46+
</div>
47+
<div class="link-item">
48+
<strong>UBB</strong>
49+
<div class="input-append">
50+
<input class="res col-xs-10" id="res_ubb" value="" spellcheck="false" readonly="true"/>
51+
<button type="button" class="btn btn-default copyBtn disabled">复制</button>
52+
</div>
53+
</div>
54+
<div class="link-item">
55+
<strong>Markdown</strong>
56+
<div class="input-append">
57+
<input class="res col-xs-10" id="res_md" value="" spellcheck="false" readonly="true"/>
58+
<button type="button" class="btn btn-default copyBtn disabled">复制</button>
59+
</div>
60+
</div>
61+
</div>
62+
63+
</div>
64+
</div>
65+
<script type="text/javascript" src="js/jquery.min.js"></script>
66+
<script type="text/javascript" src="js/sweet-alert.min.js"></script>
67+
<script type="text/javascript" src="js/index.js"></script>
68+
<script type="text/javascript" src="js/html2canvas.js"></script>
69+
</body>
70+
</html>

‎js/html2canvas.js

+3,375
Large diffs are not rendered by default.

‎js/index.js

+220
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,220 @@
1+
$(document).ready(function () {
2+
3+
$(".copyBtn").hover(function () {
4+
$(this).removeAttr('data-tooltip');
5+
},
6+
function () {
7+
$(this).blur();
8+
});
9+
10+
$(".copyBtn").click(function () {
11+
event.preventDefault();
12+
$(this).prev().select();
13+
var dataToCpy = $(this).prev().val();
14+
document.execCommand('copy');
15+
$(this).attr("data-tooltip", "复制成功"); //data-tooltip="复制成功"
16+
document.getSelection().removeAllRanges();
17+
});
18+
19+
20+
$(".clicker").click(function () {
21+
$('#input').trigger('click');
22+
});
23+
24+
$(".dragger").on({
25+
dragleave: function (e) {
26+
e.preventDefault();
27+
e.stopPropagation();
28+
},
29+
drop: function (e) {
30+
e.preventDefault();
31+
e.stopPropagation();
32+
},
33+
dragenter: function (e) {
34+
e.preventDefault();
35+
e.stopPropagation();
36+
},
37+
dragover: function (e) {
38+
e.preventDefault();
39+
e.stopPropagation();
40+
}
41+
});
42+
43+
$(".res").hover(function () {
44+
$(this).select();
45+
},
46+
function () {
47+
$(this).blur();
48+
});
49+
50+
$('#input').change(function () {
51+
event.preventDefault();
52+
var filesToUpload = document.getElementById('input').files;
53+
var file = filesToUpload[0];
54+
if (file) {
55+
if (!/image\/\w+/.test(file.type) || file == "undefined") {
56+
swal("文件必须为图片！");
57+
return false;
58+
}
59+
previewAndUpload(file);
60+
}
61+
62+
});
63+
64+
//HTML5 paste http://www.zhihu.com/question/20893119
65+
$("#res_img").on("paste",
66+
function (e) {
67+
var oe = e.originalEvent;
68+
var clipboardData, items, item;
69+
if (oe && (clipboardData = oe.clipboardData) && (items = clipboardData.items)) {
70+
var b = false;
71+
for (var i = 0,
72+
l = items.length; i < l; i++) {
73+
if ((item = items[i]) && item.kind == 'file' && item.type.match(/^image\//i)) {
74+
b = true;
75+
previewAndUpload(item.getAsFile());
76+
} else {
77+
swal("您粘贴的不是图片~");
78+
$('#res_img').val('');
79+
}
80+
}
81+
if (b) return false;
82+
}
83+
});
84+
85+
$(".dragger").on("drop",
86+
function (e) {
87+
e.preventDefault(); //取消默认浏览器拖拽效果
88+
var fileList = e.originalEvent.dataTransfer.files; //获取文件对象
89+
//检测是否是拖拽文件到页面的操作
90+
if (fileList.length == 0) {
91+
return false;
92+
}
93+
//检测文件是不是图片
94+
if (fileList[0].type.indexOf('image') === -1 || fileList[0] == "undefined") {
95+
swal("您拖的不是图片~");
96+
return false;
97+
}
98+
//拖拉图片到浏览器，可以实现预览功能
99+
var img = window.webkitURL.createObjectURL(fileList[0]);
100+
var file = fileList[0];
101+
previewAndUpload(file);
102+
});
103+
104+
});
105+
106+
107+
function fillInputBlank(pid) {
108+
var picSizeType = $(".btn-group").children(".active").prop("value");
109+
var callBackImg = 'http://7xofqv.com1.z0.glb.clouddn.com/' + pid;
110+
$('#res_img').val(callBackImg);
111+
$('#res_html').val('<img src="' + callBackImg + '"/>');
112+
$('#res_ubb').val('[IMG]' + callBackImg + '[/IMG]');
113+
$('#res_md').val('![](' + callBackImg + ')');
114+
}
115+
116+
function previewAndUpload(file) {
117+
$(".loader-wrap").show();
118+
var reader = new FileReader();
119+
var imgFile;
120+
reader.readAsDataURL(file);
121+
reader.onload = function (e) {
122+
$('.clicker').prop('src', '');
123+
$('.clicker').css('background-image', 'url(' + this.result + ')');
124+
$('.clicker').css('background-position', 'center');
125+
};
126+
reader.onloadend = function (e) {
127+
imgFile = e.target;
128+
129+
init_danmako(imgFile.result);
130+
131+
html2canvas($('#danmako_container')).then(function (canvas) {
132+
var base64 = canvas.toDataURL('image/png');
133+
console.log(base64);
134+
base64 = base64.split(',')[1];
135+
var xhr = new XMLHttpRequest();
136+
xhr.onreadystatechange = function () {
137+
if (xhr.readyState === 4) {
138+
if (xhr.status === 200) {
139+
var resText = xhr.responseText;
140+
try {
141+
rs = JSON.parse(resText);
142+
fillInputBlank(rs.hash);
143+
return true;
144+
} catch (e) {
145+
console.log(e);
146+
swal("上传失败");
147+
return;
148+
}
149+
} else {
150+
swal("图片上传失败...");
151+
}
152+
}
153+
};
154+
xhr.open('POST', '//up.qiniu.com/putb64/-1', true);
155+
xhr.setRequestHeader("Content-Type", "application/octet-stream");
156+
xhr.setRequestHeader("Authorization", "UpToken 1OcsILqPu9A_YrO7bgAEBowPWwmjTfzt_zUoINRC:bnJk5GpXzhX78F4TgpzZdbhU6PY=:eyJzY29wZSI6ImRhbm1ha28iLCJkZWFkbGluZSI6MTQ1MTU1MzE1N30=");
157+
xhr.send(base64);
158+
$('#danmako_container').remove();
159+
});
160+
161+
$(".loader-wrap").fadeOut("fast");
162+
$(".copyBtn").removeClass("disabled");
163+
};
164+
}
165+
166+
167+
//初始化弹幕
168+
function init_danmako(base64Img) {
169+
var danmacoDiv = $('<div id="danmako_container"><img id="danmako_img" src="{imgsrc}" />\
170+
<div class="danmako_screen"><div class="s_dm"><div class="s_show"></div></div></div></div>'.replace(/{imgsrc}/, base64Img));
171+
172+
danmacoDiv.appendTo('body');
173+
174+
175+
var words = $("textarea#input_text").val().split("\n")
176+
177+
// var fakes = ["Sogou 第二届黑客马拉松", "Biztech 万岁！", "评委老师们好~", "我是萌萌的弹幕~~~~", "前方高能", "刚才那个是假高能", "我来承包！", "PHP是违反广告法的语言！", "小鲜肉团队荣誉出品", "双十一我要剁手剁手剁手！", "折腾了一下午TMD代码没提交….", "这个逼装的我给一百分", "川总在哪里！！？？", "活捉川总一只！", "么么哒"];
178+
179+
for (var i = 0; i < words.length; i++) {
180+
if (words[i]) {
181+
var word = $.trim(words[i]);
182+
$(".s_show").append("<div>" + word + "</div>");
183+
}
184+
}
185+
186+
$(".s_show").find("div").show().each(function () {
187+
var _width = $('#danmako_img').width();
188+
var _height = $('#danmako_img').height();
189+
190+
var _left = Math.random() * (_width);
191+
var _top = Math.random() * (_height);
192+
193+
if (_top + $(this).height() > _height) {
194+
_top = _height - $(this).height();
195+
}
196+
197+
if (_left + $(this).width() > _width) {
198+
_left = _width - $(this).width();
199+
}
200+
201+
_left = $('#danmako_container').offset().left + _left;
202+
_top = $('#danmako_container').offset().top + _top;
203+
204+
//设定文字的位置
205+
$(this).css({
206+
left: _left,
207+
top: _top,
208+
color: getRandomColor()
209+
});
210+
211+
});
212+
}
213+
214+
215+
//随机获取颜色值
216+
function getRandomColor() {
217+
return '#' + (function (h) {
218+
return new Array(7 - h.length).join("0") + h
219+
})((Math.random() * 0x1000000 << 0).toString(16))
220+
}

‎js/jquery.min.js

+5
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎js/jquery.min.map

+1
Large diffs are not rendered by default.

‎js/sweet-alert.min.js

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎maker.html

+99
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5+
<script type="text/javascript" src="https://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
6+
<script type="text/javascript" src="js/html2canvas.js"></script>
7+
<link rel="stylesheet" type="text/css" href="css/maker.css" />
8+
<title>弹幕生成器</title>
9+
</head>
10+
11+
<body>
12+
<div id="danmako_container">
13+
<img id="danmako_img"src="test.png" />
14+
<div class="danmako_screen">
15+
<div class="s_dm">
16+
<div class="s_show"></div>
17+
</div>
18+
</div>
19+
</div>
20+
</body>
21+
22+
<script type="text/javascript">
23+
$(document).ready(function(){
24+
init();
25+
html2canvas($('#danmako_container')).then(function(canvas) {
26+
var dataUrl = canvas.toDataURL('image/png');
27+
console.log(dataUrl);
28+
});
29+
});
30+
31+
32+
33+
function init(){
34+
var fakes = [
35+
"Sogou 第二届黑客马拉松",
36+
"Biztech 万岁！",
37+
"评委老师们好~",
38+
"我是萌萌的弹幕~~~~",
39+
"前方高能",
40+
"刚才那个是假高能",
41+
"我来承包！",
42+
"PHP是违反广告法的语言！",
43+
"小鲜肉团队荣誉出品",
44+
"双十一我要剁手剁手剁手！",
45+
"折腾了一下午TMD代码没提交….",
46+
"这个逼装的我给一百分",
47+
"川总在哪里！！？？",
48+
"活捉川总一只！",
49+
"么么哒"];
50+
for(var i = 0; i < fakes.length; i++) {
51+
post(fakes[i]);
52+
}
53+
54+
$('#danmako_container').width($('#danmako_img').width());
55+
$('#danmako_container').height($('#danmako_img').height());
56+
init_screen();
57+
}
58+
59+
function post(message) {
60+
$(".s_show").append("<div>" + message + "</div>");
61+
}
62+
63+
//初始化弹幕
64+
function init_screen() {
65+
$(".s_show").find("div").show().each(function () {
66+
var _width = $('#danmako_img').width();
67+
var _height = $('#danmako_img').height();
68+
69+
var _left = Math.random()*(_width);
70+
var _top = Math.random()*(_height);
71+
72+
if(_top + $(this).height() > _height){
73+
_top = _height - $(this).height();
74+
}
75+
76+
if(_left + $(this).width() > _width){
77+
_left = _width - $(this).width();
78+
}
79+
80+
//设定文字的位置
81+
$(this).css({
82+
left: _left,
83+
top: _top,
84+
color: getRandomColor()
85+
});
86+
87+
});
88+
}
89+
90+
91+
//随机获取颜色值
92+
function getRandomColor() {
93+
return '#' + (function (h) {
94+
return new Array(7 - h.length).join("0") + h
95+
})((Math.random() * 0x1000000 << 0).toString(16))
96+
}
97+
</script>
98+
99+
</html>

‎test.png

64.2 KB
Loading

0 commit comments

Comments
 (0)
Please sign in to comment.