Skip to content

Commit 9435faa

Browse files
author
xuming06
committed
add web demo.
1 parent ad87aef commit 9435faa

2 files changed

Lines changed: 320 additions & 0 deletions

File tree

‎24web/audio_demo.html‎

Lines changed: 268 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,268 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title></title>
6+
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
7+
<script type="text/javascript">
8+
(function () {
9+
//颜色动画插件 收录 前端网 halcheung 大侠的笔记。网址 http://www.w3cfuns.com/notes/17953/6ceda0bfa4a98d2d1a8c03fb638bae4e.html
10+
// store the jq animate function temporarily
11+
var _anim = $.fn.animate;
12+
// override jq animate function
13+
$.fn.extend({
14+
animate: function (styles, speed, easing, callback) {
15+
if (typeof styles == "object") {
16+
var colorStyles = null,
17+
that = this;
18+
for (var style in styles) {
19+
// init colorStyle object
20+
if (!colorStyles && /color/gi.exec(style)) colorStyles = {};
21+
// get the color styles
22+
if (style == "color") {
23+
colorStyles.color = styles[style];
24+
} else if (style == "background-color" || style == "backgroundColor") {
25+
colorStyles.backgroundColor = styles[style];
26+
} else if (style == "border-color" || style == "borderColor") {
27+
colorStyles.borderColor = styles[style];
28+
} else if (style == "border-top-color" || style == "borderTopColor") {
29+
colorStyles.borderTopColor = styles[style];
30+
} else if (style == "border-right-color" || style == "borderRightColor") {
31+
colorStyles.borderRightColor = styles[style];
32+
} else if (style == "border-bottom-color" || style == "borderBottomColor") {
33+
colorStyles.borderBottomColor = styles[style];
34+
} else if (style == "border-left-color" || style == "borderLeftColor") {
35+
colorStyles.borderLeftColor = styles[style];
36+
}
37+
delete styles[style];
38+
}
39+
// if check color styles positive
40+
if (colorStyles) {
41+
// color animation class
42+
function animColor() {
43+
// color animation function
44+
this.anim = function (colorStyle, targetStyleColor) {
45+
targetStyleColor = formatColor(targetStyleColor);
46+
var currentColor = formatColor($(that).get(0).style[colorStyle]),
47+
step = calcStep(currentColor, targetStyleColor);
48+
changeColor(colorStyle, currentColor, targetStyleColor, step);
49+
};
50+
// color value step of animation
51+
function calcStep(startColor, endColor) {
52+
var maxDiff = -1, animStep = 1;
53+
for (var i = 0; i < 3; i++) {
54+
if (Math.abs(endColor[i] - startColor[i]) > maxDiff) {
55+
maxDiff = Math.abs(endColor[i] - startColor[i]);
56+
}
57+
}
58+
animStep = Math.floor(maxDiff / (speed / 20));
59+
//console.log(maxDiff + "," + speed);
60+
animStep = !animStep ? 1 : animStep;
61+
return animStep;
62+
}
63+
64+
// set the middle frame color of element
65+
function changeColor(colorStyle, middleStyle, toStyle, step) {
66+
middleStyle = changeColorStep(middleStyle, toStyle, step);
67+
$(that).get(0).style[colorStyle] = "rgb(" + middleStyle[0] + "," + middleStyle[1] + "," + middleStyle[2] + ")";
68+
if (middleStyle[0] == toStyle[0] && middleStyle[1] == toStyle[1] && middleStyle[2] == toStyle[2]) {
69+
$(that).get(0).style[colorStyle] = hexColor(middleStyle);
70+
return;
71+
}
72+
setTimeout(function () {
73+
changeColor(colorStyle, middleStyle, toStyle, step);
74+
}, 20);
75+
}
76+
77+
// calculate step color
78+
function changeColorStep(curClr, tgtClr, step) {
79+
for (var i = 0; i < 3; i++) {
80+
if (curClr[i] < tgtClr[i]) {
81+
curClr[i] += step;
82+
if (curClr[i] > tgtClr[i]) curClr[i] = tgtClr[i];
83+
} else if (curClr[i] > tgtClr[i]) {
84+
curClr[i] -= step;
85+
if (curClr[i] < tgtClr[i]) curClr[i] = tgtClr[i];
86+
}
87+
}
88+
return curClr;
89+
}
90+
91+
// convert hex color to rgb color
92+
function formatColor(styleColor) {
93+
if (!styleColor) {
94+
return [0, 0, 0];
95+
} else {
96+
var r = g = b = 0;
97+
if (/^#[a-f0-9]{3}$/gi.exec(styleColor)) {
98+
r = parseInt(styleColor.substr(1, 1) + styleColor.substr(1, 1), 16);
99+
g = parseInt(styleColor.substr(2, 1) + styleColor.substr(2, 1), 16);
100+
b = parseInt(styleColor.substr(3, 1) + styleColor.substr(3, 1), 16);
101+
} else if (/^#[a-f0-9]{6}$/gi.exec(styleColor)) {
102+
r = parseInt(styleColor.substr(1, 2), 16);
103+
g = parseInt(styleColor.substr(3, 2), 16);
104+
b = parseInt(styleColor.substr(5, 2), 16);
105+
} else if (styleColor.toLowerCase().indexOf("rgb") != -1) { // rgb
106+
styleColor = styleColor.toLowerCase().split(/\(|\)/gi)[1].split(',');
107+
r = styleColor[0].trim() * 1;
108+
g = styleColor[1].trim() * 1;
109+
b = styleColor[2].trim() * 1;
110+
}
111+
return [r, g, b];
112+
}
113+
}
114+
115+
// convert rgb color to hex color
116+
function hexColor(rgb) {
117+
var r = ("0" + rgb[0].toString(16)).substr(-2),
118+
g = ("0" + rgb[1].toString(16)).substr(-2),
119+
b = ("0" + rgb[2].toString(16)).substr(-2);
120+
return "#" + r + g + b;
121+
}
122+
}
123+
124+
// play color animation
125+
for (var styl in colorStyles) {
126+
var anim = new animColor();
127+
anim.anim(styl, colorStyles[styl]);
128+
anim = null;
129+
}
130+
}
131+
}
132+
133+
// most important step: get the original function of jq animate
134+
return _anim.apply(this, [styles, speed, easing, callback]);
135+
}
136+
});
137+
})();
138+
(function () {
139+
$.fn.dragToDrop = function (fun) {
140+
var eventStr = "dragleave drop dragenter dragover";
141+
$(document).on(eventStr, function (e) {
142+
e.preventDefault(); // 禁用 document 默认行为
143+
});
144+
$(this).on(eventStr, function (e) {
145+
e.preventDefault();
146+
var files;
147+
if (e.type == "drop") files = e.originalEvent.dataTransfer.files; //获取文件对象
148+
fun(files);
149+
})
150+
return this;
151+
}
152+
153+
})();
154+
(function () { //列队播放音频文件
155+
var music;
156+
var i = 0;
157+
var flag = false;
158+
var playlist = [];
159+
$.audio = function (data) {
160+
playlist.push(data);
161+
//console.log(music)
162+
if (!music || $.type(music) != "object") {
163+
music = new Audio(data);
164+
music.play();
165+
}
166+
$(music).on("play", function () {
167+
flag = false;
168+
});
169+
$(music).on('ended', function () {
170+
if (flag) return;
171+
flag = true;
172+
i++;
173+
if (i >= playlist.length) {
174+
music = null;
175+
return;
176+
}
177+
this.src = playlist[i];
178+
this.play();
179+
return;
180+
});
181+
}
182+
})();
183+
(function () {
184+
$.readFileData = function (obj, fun) { //读取文件内容
185+
var reader = new FileReader();//新建一个FileReader
186+
reader.readAsDataURL(obj, "UTF-8");//以base64编码方式读取文件
187+
reader.onload = function (e) {
188+
fun(e.target.result);
189+
}
190+
}
191+
$.eachFiles = function (files) { // 遍历文件列表
192+
var obj = $("#look ul").length > 0 ? $("#look ul") : $("<ul>").appendTo($("#look"))
193+
var fileType = "mp3,ogg,wav,mid,midi,wma,asf";
194+
$.each(files, function (i, n) {
195+
$.readFileData(n, function (data) {
196+
obj.append($("<li>").css({
197+
"text-overflow": "ellipsis",
198+
"white-space": "nowrap"
199+
}).text(n.name + " - " + data));
200+
if (fileType.indexOf(n.name.split(".")[1]) > -1) $.audio(data);
201+
});
202+
});
203+
}
204+
Number.prototype.toFormatString = function (n, d) {
205+
return (Array(d).join(0) + this.toString(n)).slice(-d);
206+
}
207+
window.rgb = function (a, b, c) {
208+
return "#" + a.toFormatString(16, 2) + b.toFormatString(16, 2) + c.toFormatString(16, 2);
209+
}
210+
window.compileString = function (str) {
211+
return new Function("return " + str)();
212+
}
213+
window.RBGToHex = function (str) {
214+
return compileString(str);
215+
}
216+
window.HexToRGB = function (str) {
217+
if (str.length == 4) str = str.replace(/^#([A-Fa-f0-9]{1})([A-Fa-f0-9]{1})([A-Fa-f0-9]{1})/, "$1,$2,$3")
218+
if (str.length == 7) str = str.replace(/^#([A-Fa-f0-9]{2})([A-Fa-f0-9]{2})([A-Fa-f0-9]{2})/, "$1,$2,$3")
219+
var arr = str.split(",");
220+
$.each(arr, function (i, n) {
221+
if (n.length == 1) {
222+
if (parseInt(n, 16) > 0) n += n;
223+
}
224+
arr[i] = parseInt(n, 16)
225+
});
226+
return "rgb(" + arr.join(",") + ")";
227+
}
228+
})();
229+
$(function () {
230+
$("#form input[name='fileTrans']").change(function () {
231+
if (!(window.File || window.FileReader || window.FileList || window.Blob)) {
232+
alert('你妈喊你换Chrome浏览器啦');
233+
return;
234+
}
235+
var files = $(this).prop('files');//通过文件域获取到文件列表
236+
if (!files || files.length == 0) {
237+
alert('请选择文件');
238+
return;
239+
}
240+
$.eachFiles(files);
241+
}).dragToDrop(function (files) { //通过拖拽获取文件列表
242+
var flieStyle = $("#flieStyle");
243+
if (files && files.length > 0) {
244+
$.eachFiles(files);
245+
flieStyle.animate({"border-color": "#000"}, 10, "swing");
246+
return;
247+
}
248+
var color = RBGToHex(flieStyle.css("border-color")) == RBGToHex(HexToRGB("#0ff")) ? "#000" : "#0ff";
249+
//console.log(RBGToHex(HexToRGB(color)))
250+
flieStyle.animate({"border-color": color}, 10, "swing")
251+
});
252+
});
253+
</script>
254+
</head>
255+
<body>
256+
<h1>媒体文件 转 base64 编码</h1>
257+
<div style="font-size:12px;color:gray;margin-bottom:10px;">PS：选择一个或多个文件，如果是音频格式并且您的浏览器支持，便可能会听到 base64 编码后的声音。</div>
258+
<form id="form">
259+
<div id="flieStyle"
260+
style="border:dashed 1px black;background-color:snow;width:150px;height:150px;position:relative;line-height:2rem;font-size:12px;margin:30px auto;">
261+
<input type="file" name="fileTrans" multiple="multiple"
262+
style="width:150px;height:150px;position:absolute;opacity:0;background-color:black;">
263+
<span style="text-align:center;width:100%;margin-top:2.5rem;display:block;"><input type="button" value="点击选择文件"><br>拖动文件到此框中</span>
264+
</div>
265+
</form>
266+
<div id="look"></div>
267+
</body>
268+
</html>

‎24web/image_demo.html‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta name="viewport" content="width=device-width"/>
5+
<title>jquery image base64</title>
6+
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
7+
</head>
8+
<body>
9+
<div id="testPhone" class="weui_uploader_input_wrp" style="width:79px; height:79px;">
10+
</div>
11+
<input id="testFile" type="file">
12+
<hr>
13+
<img id="testImg" style="max-height: 300px; height: 8em; min-width:8em;">
14+
<script>
15+
$("#testPhone").click(function () {
16+
$("#testFile").click();
17+
});
18+
19+
$("#testFile").change(function () {
20+
run(this, function (data) {
21+
$('#testImg').attr('src', data);
22+
$('#testArea').val(data);
23+
});
24+
});
25+
26+
function run(input_file, get_data) {
27+
/*input_file：文件按钮对象*/
28+
/*get_data: 转换成功后执行的方法*/
29+
if (typeof (FileReader) === 'undefined') {
30+
alert("抱歉，你的浏览器不支持 FileReader，不能将图片转换为Base64，请使用现代浏览器操作！");
31+
} else {
32+
try {
33+
/*图片转Base64 核心代码*/
34+
var file = input_file.files[0];
35+
//这里我们判断下类型如果不是图片就返回 去掉就可以上传任意文件
36+
if (!/image\/\w+/.test(file.type)) {
37+
alert("请确保文件为图像类型");
38+
return false;
39+
}
40+
var reader = new FileReader();
41+
reader.onload = function () {
42+
get_data(this.result);
43+
}
44+
reader.readAsDataURL(file);
45+
} catch (e) {
46+
alert('图片转Base64出错啦！' + e.toString())
47+
}
48+
}
49+
}
50+
</script>
51+
</body>
52+
</html>

0 commit comments

Comments
 (0)