[html_html5_css]-----Blob、File

hechengjin

理解DOMString、Document、FormData、Blob、File、ArrayBuffer数据类型
DataURL与File,Blob,canvas对象之间的互相转换的Javascript

1. canvas转换为dataURL (从canvas获取dataURL)
   
2. 
   
3. var dataurl = canvas.toDataURL('image/png');
   
4. var dataurl2 = canvas.toDataURL('image/jpeg', 0.8);
   
5. 
   
6. File对象转换为dataURL、Blob对象转换为dataURL
   
7. 
   
8. File对象也是一个Blob对象，二者的处理相同。
   
9. 
   
10. function readBlobAsDataURL(blob, callback) {
    
11.     var a = new FileReader();
    
12.     a.onload = function(e) {callback(e.target.result);};
    
13.     a.readAsDataURL(blob);
    
14. }
    
15. //example:
    
16. readBlobAsDataURL(blob, function (dataurl){
    
17.     console.log(dataurl);
    
18. });
    
19. readBlobAsDataURL(file, function (dataurl){
    
20.     console.log(dataurl);
    
21. });
    
22. 
    
23. dataURL转换为Blob对象
    
24. 
    
25. function dataURLtoBlob(dataurl) {
    
26.     var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
    
27.         bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
    
28.     while(n--){
    
29.         u8arr[n] = bstr.charCodeAt(n);
    
30.     }
    
31.     return new Blob([u8arr], {type:mime});
    
32. }
    
33. //test:
    
34. var blob = dataURLtoBlob('data:text/plain;base64,YWFhYWFhYQ==');
    
35. 
    
36. dataURL图片数据绘制到canvas
    
37. 
    
38. 先构造Image对象，src为dataURL，图片onload之后绘制到canvas
    
39. 
    
40. var img = new Image();
    
41. img.onload = function(){
    
42.     canvas.drawImage(img);
    
43. };
    
44. img.src = dataurl;
    
45. 
    
46. File,Blob的图片文件数据绘制到canvas
    
47. 
    
48. 还是先转换成一个url，然后构造Image对象，src为dataURL，图片onload之后绘制到canvas
    
49. 
    
50. 利用上面的 readBlobAsDataURL 函数，由File,Blob对象得到dataURL格式的url，再参考 dataURL图片数据绘制到canvas
    
51. 
    
52. readBlobAsDataURL(file, function (dataurl){
    
53.     var img = new Image();
    
54.     img.onload = function(){
    
55.         canvas.drawImage(img);
    
56.     };
    
57.     img.src = dataurl;
    
58. });
    
59. 
    
60. 不同的方法用于构造不同类型的url (分别是 dataURL, objectURL(blobURL), filesystemURL)。这里不一一介绍，仅以dataURL为例。
    
61. 
    
62. filesystemURL不是指本地文件URL的形式(file:///….), 而是格式类似于 filesystem:http://... 的一种URL，支持沙盒文件系统的浏览器支持(目前仅Chrome)支持。
    
63. 
    
64. Canvas转换为Blob对象并使用Ajax发送
    
65. 
    
66. 转换为Blob对象后，可以使用Ajax上传图像文件。
    
67. 
    
68. 先从canvas获取dataurl, 再将dataurl转换为Blob对象
    
69. 
    
70. var dataurl = canvas.toDataURL('image/png');
    
71. var blob = dataURLtoBlob(dataurl);
    
72. //使用ajax发送
    
73. var fd = new FormData();
    
74. fd.append("image", blob, "image.png");
    
75. var xhr = new XMLHttpRequest();
    
76. xhr.open('POST', '/server', true);
    
77. xhr.send(fd);
    

复制代码

hechengjin

file转blog

1. function* fetpic(uriOptions) {
   
2.     let XHR = require('app://app/mail/net/XHR.js');
   
3.     let image = yield XHR.fetch(uriOptions);
   
4.     let myavatar = image.request.response;
   
5.     if( myavatar.toString() == '[object File]' ) {
   
6.       let deferred = defer();
   
7.       readBlobAsDataURL(myavatar, function (dataurl){
   
8.           deferred.resolve(dataurl);
   
9.       });
   
10.       let mydataurl = yield deferred.promise;
    
11.       let myblob = dataURLtoBlob(mydataurl);
    
12.       myavatar = myblob;
    
13.     }
    
14. 
    
15.     expect(myavatar.toString()).to.eql('[object Blob]');  //[object File]
    
16.     return myavatar;
    
17.   }
    
18. 
    
19. 
    
20. function readBlobAsDataURL(blob, callback) {
    
21.     let a = new FileReader();
    
22.     a.onload = function(e) {callback(e.target.result);};
    
23.     a.readAsDataURL(blob);
    
24.   }
    
25. 
    
26.   function dataURLtoBlob(dataurl) {
    
27.     let arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
    
28.         bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
    
29.     while(n--){
    
30.         u8arr[n] = bstr.charCodeAt(n);
    
31.     }
    
32.     return new Blob([u8arr], {type:mime});
    
33.   }
    
34. 
    
35. 
    
36. 
    
37. let imgURI = appGlobal.cli.appURI + 'test/data/pic.jpg';
    
38.     let uriOptions = {
    
39.       //uri:'http://news.cnr.cn/native/pic/20151023/W020151023244447426179.jpg',
    
40.       uri:imgURI,
    
41. 
    
42.     }
    
43.     //create blob
    
44.     let contactAvatarUUID = yield* getBlobUUID(uriOptions);
    
45.     expect(contactAvatarUUID).not.equal(undefined);

复制代码