Hbuilder mui 相册拍照图片上传

标签：nload   else   copy   word   error:   sheet   round   builder   raw   

http://www.bcty365.com/content-146-3648-1.html

使用流程

弹出actionSheet

1. /*点击头像触发*/ 
2.         document.getElementById(‘headImage‘).addEventListener(‘tap‘, function() { 
3.             if (mui.os.plus) { 
4.                 var a = [{ 
5.                     title: "拍照" 
6.                 }, { 
7.                     title: "从手机相册选择" 
8.                 }]; 
9.                 plus.nativeUI.actionSheet({ 
10.                     title: "修改用户头像", 
11.                     cancel: "取消", 
12.                     buttons: a 
13.                 }, function(b) { /*actionSheet 按钮点击事件*/ 
14.                     switch (b.index) { 
15.                         case 0: 
16.                             break; 
17.                         case 1: 
18.                             getImage(); /*拍照*/ 
19.                             break; 
20.                         case 2: 
21.                             galleryImg();/*打开相册*/ 
22.                             break; 
23.                         default: 
24.                             break; 
25.                     } 
26.                 }) 
27.             } 
28.         }, false); 

拍照上传

1. //拍照 
2.         function getImage() { 
3.             var c = plus.camera.getCamera(); 
4.             c.captureImage(function(e) { 
5.                 plus.io.resolveLocalFileSystemURL(e, function(entry) { 
6.                     var s = entry.toLocalURL() + "?version=" + new Date().getTime(); 
7.                     uploadHead(s); /*上传图片*/ 
8.                 }, function(e) { 
9.                     console.log("读取拍照文件错误：" + e.message); 
10.                 }); 
11.             }, function(s) { 
12.                 console.log("error" + s); 
13.             }, { 
14.                 filename: "_doc/head.png" 
15.             }) 
16.         } 

从相册选图上传

1. //本地相册选择 
2.         function galleryImg() { 
3.             plus.gallery.pick(function(a) { 
4.                 plus.io.resolveLocalFileSystemURL(a, function(entry) { 
5.                     plus.io.resolveLocalFileSystemURL("_doc/", function(root) { 
6.                         root.getFile("head.png", {}, function(file) { 
7.                             //文件已存在 
8.                             file.remove(function() { 
9.                                 console.log("file remove success"); 
10.                                 entry.copyTo(root, ‘head.png‘, function(e) { 
11.                                         var e = e.fullPath + "?version=" + new Date().getTime(); 
12.                                         uploadHead(e); /*上传图片*/ 
13.                                         //变更大图预览的src 
14.                                         //目前仅有一张图片，暂时如此处理，后续需要通过标准组件实现 
15.                                     }, 
16.                                     function(e) { 
17.                                         console.log(‘copy image fail:‘ + e.message); 
18.                                     }); 
19.                             }, function() { 
20.                                 console.log("delete image fail:" + e.message); 
21.                             }); 
22.                         }, function() { 
23.                             //文件不存在 
24.                             entry.copyTo(root, ‘head.png‘, function(e) { 
25.                                     var path = e.fullPath + "?version=" + new Date().getTime(); 
26.                                     uploadHead(path); /*上传图片*/ 
27.                                 }, 
28.                                 function(e) { 
29.                                     console.log(‘copy image fail:‘ + e.message); 
30.                                 }); 
31.                         }); 
32.                     }, function(e) { 
33.                         console.log("get _www folder fail"); 
34.                     }) 
35.                 }, function(e) { 
36.                     console.log("读取拍照文件错误：" + e.message); 
37.                 }); 
38.             }, function(a) {}, { 
39.                 filter: "image" 
40.             }) 
41.         }; 

图片上传和压缩

1. //上传头像图片 
2.         function uploadHead(imgPath) { 
3.             console.log("imgPath = " + imgPath); 
4.             mainImage.src = imgPath; 
5.             mainImage.style.width = "60px"; 
6.             mainImage.style.height = "60px"; 
7.  
8.             var image = new Image(); 
9.             image.src = imgPath; 
10.             image.onload = function() { 
11.                 var imgData = getBase64Image(image); 
12.                 /*在这里调用上传接口*/ 
13. //              mui.ajax("图片上传接口", { 
14. //                  data: { 
15. //                       
16. //                  }, 
17. //                  dataType: ‘json‘, 
18. //                  type: ‘post‘, 
19. //                  timeout: 10000, 
20. //                  success: function(data) { 
21. //                      console.log(‘上传成功‘); 
22. //                  }, 
23. //                  error: function(xhr, type, errorThrown) { 
24. //                      mui.toast(‘网络异常，请稍后再试！‘); 
25. //                  } 
26. //              }); 
27.             } 
28.     } 
29.         //将图片压缩转成base64 
30.         function getBase64Image(img) { 
31.             var canvas = document.createElement("canvas"); 
32.             var width = img.width; 
33.             var height = img.height; 
34.             // calculate the width and height, constraining the proportions 
35.             if (width > height) { 
36.                 if (width > 100) { 
37.                     height = Math.round(height *= 100 / width); 
38.                     width = 100; 
39.                 } 
40.             } else { 
41.                 if (height > 100) { 
42.                     width = Math.round(width *= 100 / height); 
43.                     height = 100; 
44.                 } 
45.             } 
46.             canvas.width = width;   /*设置新的图片的宽度*/ 
47.             canvas.height = height; /*设置新的图片的长度*/ 
48.             var ctx = canvas.getContext("2d"); 
49.             ctx.drawImage(img, 0, 0, width, height); /*绘图*/ 
50.             var dataURL = canvas.toDataURL("image/png", 0.8); 
51.             return dataURL.replace("data:image/png;base64,", ""); 
52.         }    

总结

在使用中，我们可以发现，使用流程是非常清晰的；某种程度来说比原生iOS的使用还要简单一些。 

Hbuilder mui 相册拍照图片上传

标签：nload   else   copy   word   error:   sheet   round   builder   raw   

原文地址：http://www.cnblogs.com/zouhao/p/7440123.html