Skip to content

Commit 60f9c3c

Browse files
csxiaoyaojianxiancsxiaoyaojianxian
committed
DataURL
1 parent 4982c5d commit 60f9c3c

File tree

7 files changed

+223
-1
lines changed

7 files changed

+223
-1
lines changed

‎4 其他/dataURL-Blob-File-canvas/dataURL-Blob-File-canvas.html‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<script src="dataURL-Blob-canvas.js"></script>
6+
</head>
7+
<body>
8+
</body>
9+
</html>

‎4 其他/dataURL-Blob-File-canvas/dataURL-Blob-File-canvas.js‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
/*
2+
* @Author: SUNSHINE
3+
* @Date: 2017-03-18 19:03:26
4+
* @Last Modified by: SUNSHINE
5+
* @Last Modified time: 2017-03-18 19:15:31
6+
*/
7+
8+
'use strict';
9+
// 【canvas ---> dataURL】 (从canvas获取dataURL)
10+
// var dataurl = canvas.toDataURL('image/png');
11+
// var dataurl = canvas.toDataURL('image/jpeg', 0.8);
12+
13+
// 【File/Blob ---> dataURL】
14+
function readBlobAsDataURL(blob, callback) {
15+
var reader = new FileReader();
16+
reader.onload = function(e) {callback(e.target.result);};
17+
reader.readAsDataURL(blob);
18+
}
19+
// readBlobAsDataURL(blob, function (dataurl){
20+
// console.log(dataurl);
21+
// });
22+
// readBlobAsDataURL(file, function (dataurl){
23+
// console.log(dataurl);
24+
// });
25+
26+
// 【dataURL ---> Blob】
27+
function dataURLtoBlob(dataurl) {
28+
var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
29+
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
30+
while(n--){
31+
u8arr[n] = bstr.charCodeAt(n);
32+
}
33+
return new Blob([u8arr], {type:mime});
34+
}
35+
var blob = dataURLtoBlob('data:text/plain;base64,YWFhYWFhYQ==');
36+
37+
// 【dataURL ---> canvas】
38+
// 先构造Image对象，src为dataURL，onload后绘制到canvas
39+
var img = new Image();
40+
img.onload = function(){
41+
canvas.drawImage(img);
42+
};
43+
img.src = dataurl;
44+
45+
// 【File/Blob ---> canvas】
46+
// 先转换成url，然后构造Image对象，src为dataURL，图片onload后绘制到canvas
47+
// 利用上面的 readBlobAsDataURL 函数，由File,Blob对象得到dataURL格式的url，再参考 dataURL图片数据绘制到canvas
48+
readBlobAsDataURL(file, function (dataurl){
49+
var img = new Image();
50+
img.onload = function(){
51+
canvas.drawImage(img);
52+
};
53+
img.src = dataurl;
54+
});
55+
56+
// 【Canvas ---> Blob】Ajax发送
57+
// 先从canvas获取dataurl, 再将dataurl转换为Blob对象
58+
var dataurl = canvas.toDataURL('image/png');
59+
var blob = dataURLtoBlob(dataurl);
60+
// 使用ajax发送
61+
var fd = new FormData();
62+
fd.append("image", blob, "image.png");
63+
var xhr = new XMLHttpRequest();
64+
xhr.open('POST', '/server', true);
65+
xhr.send(fd);

‎4 其他/upload/README.md‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,18 @@
99
* **图片居中、上传预览.html**
1010
1、水平垂直居中的两种实现：CSS-table & js计算
1111
2、图片的max宽高的两种实现：CSS & js计算
12-
3、预览图的实现的三种方式：
12+
3、判断文件类型
13+
4、文件大小限制
14+
5、预览图的实现的三种方式：
1315
【file -> base64】、【file -> blob】、【canvas】
1416
4、FileReader 读取文件常见属性
1517
* **拖拽事件.html**
1618
1、拖拽事件的判断
1719
2、识别文件/文件夹
20+
* **js图片压缩.html**
21+
利用canvas压缩图片
22+
* **download.html**
23+
多文件下载，支持DataURL和Blob
1824

1925
## 2. webuploader-demo
2026

‎4 其他/upload/upload/download.html‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
6+
</head>
7+
<body>
8+
<!-- <a href="download.html" download="download.html">直接下载文件</a> -->
9+
<input type="file" id="fileImg" multiple />
10+
<script>
11+
function selectChange(evt){
12+
var files = evt.target.files;
13+
console.log(files);
14+
for(var i=0;i<files.length;i++){
15+
var name = files[i].name;
16+
17+
// downloadFile(name,files[i]);//直接传入File对象下载
18+
19+
var reader = new FileReader();
20+
reader.onload = function(evt) {
21+
downloadDataUrl(name,reader.result);
22+
}
23+
reader.readAsDataURL(files[i]);
24+
}
25+
}
26+
function downloadFile(fileName, content){
27+
var aLink = document.createElement('a')
28+
, blob = new Blob([content])
29+
, evt = document.createEvent("HTMLEvents");
30+
evt.initEvent("click",false,false);
31+
aLink.download = fileName;
32+
aLink.href = URL.createObjectURL(blob);
33+
// aLink.dispatchEvent(evt); 未知原因，无效
34+
aLink.click();
35+
}
36+
function downloadDataUrl(fileName, DataUrl){
37+
var aLink = document.createElement('a')
38+
, blob = dataURLtoBlob(DataUrl)
39+
, evt = document.createEvent("HTMLEvents");
40+
evt.initEvent("click",false,false);
41+
aLink.download = fileName;
42+
aLink.href = URL.createObjectURL(blob);
43+
// aLink.dispatchEvent(evt); 未知原因，无效
44+
aLink.click();
45+
}
46+
function dataURLtoBlob(dataurl) {
47+
var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
48+
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
49+
while(n--){
50+
u8arr[n] = bstr.charCodeAt(n);
51+
}
52+
return new Blob([u8arr], {type:mime});
53+
}
54+
document.getElementById('fileImg').addEventListener('change', selectChange, false);
55+
</script>
56+
</body>
57+
</html>

‎4 其他/upload/upload/js/picCompress.js‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
/*
2+
* @Author: SUNSHINE
3+
* @Date: 2017-03-18 15:14:45
4+
* @Last Modified by: SUNSHINE
5+
* @Last Modified time: 2017-03-18 16:20:54
6+
*/
7+
8+
'use strict';
9+
10+
var picCompress = {
11+
/**
12+
* Receives an Image Object (can be JPG OR PNG) and returns a new Image Object compressed
13+
* @param {Image} source_img_obj The source Image Object
14+
* @param {Integer} quality The output quality of Image Object
15+
* @return {Image} result_image_obj The compressed Image Object
16+
*/
17+
compress: function(source_img_obj, quality, output_format) {
18+
var mime_type = "image/jpeg";
19+
if (output_format != undefined && output_format == "png") {
20+
mime_type = "image/png";
21+
}
22+
var cvs = document.createElement('canvas');
23+
//naturalWidth真实图片的宽度
24+
cvs.width = source_img_obj.naturalWidth;
25+
cvs.height = source_img_obj.naturalHeight;
26+
var ctx = cvs.getContext("2d").drawImage(source_img_obj, 0, 0);
27+
var newImageData = cvs.toDataURL(mime_type, quality / 100);
28+
var result_image_obj = new Image();
29+
result_image_obj.src = newImageData;
30+
return result_image_obj;
31+
}
32+
}

‎4 其他/upload/upload/js图片压缩.html‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
</head>
6+
<body>
7+
8+
<input type="file" id="fileImg" >
9+
<img src="" id="preview" alt="">
10+
11+
<script src="js/picCompress.js"></script>
12+
<script>
13+
// 图片压缩
14+
// (1) 调用 FileReader 的 reader.readAsDataURL(img); 方法, 在其onload事件中, 将用户选择的图片读入 Image 对象.
15+
// (2) 在 image 对象的 onload 事件中, 通过 canvas 的 canvas.getContext('2d') 的 drawImage 方法, 将Image 改变大小绘制到canvas上.
16+
// (3) 通过 canvas.toDataURL("image/jpeg", 0.1); 方法, 将图片变成base64字符串, 传入服务端.
17+
18+
function handleFileSelect(evt) {
19+
// 最终成像质量
20+
var quality = 50;
21+
var files = evt.target.files;
22+
for (var i = 0; i < files.length; i++) {
23+
var f = files[i];
24+
// 判断文件类型
25+
if (!f.type.match('image.*')) {
26+
continue;
27+
}
28+
var reader = new FileReader();
29+
reader.onloadend = function() {
30+
var result = document.getElementById("preview");
31+
result.src = reader.result;
32+
// 只为确定显示效果的大小，不影响实际结果
33+
result.width /= 10;
34+
result.src = picCompress.compress(result, quality).src;
35+
// window.location.href = result.src;
36+
}
37+
reader.readAsDataURL(f);
38+
}
39+
}
40+
document.getElementById('fileImg').addEventListener('change', handleFileSelect, false);
41+
42+
</script>
43+
</body>
44+
</html>

‎4 其他/upload/upload/图片居中、上传预览.html‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -92,16 +92,25 @@
9292
9393
图片预览的三种方式：
9494
【1】 file -> base64 (FileReader)
95+
data:[][;charset=][;base64],
96+
Base64 在CSS中的使用：
97+
.demoImg{ background-image: url("data:image/jpg;base64,/9j/4QMZRXhpZgAASUkqAAgAAAAL...."); }
98+
Base64 在HTML中的使用：
99+
<img width="40" height="30" src="data:image/jpg;base64,/9j/4QMZRXhpZgAASUkqAAgAAAAL...." />
100+
101+
实现代码：
95102
var reader = new FileReader();
96103
reader.onload = function(e) {
97104
var img = new Image;
98105
img.src = this.result; // this.result 为base64
99106
};
100107
reader.readAsDataURL(file);
108+
101109
【2】 file -> blob
102110
var url = window.URL.createObjectURL(file);
103111
var img = new Image;
104112
img.src = url;
113+
105114
【3】 canvas 略
106115
107116
FileReader

0 commit comments

Comments
 (0)