Hbuilder mui 相册拍照图片上传

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

使用流程

弹出actionSheet

1. /*点击头像触发*/
2. document.getElementById(‘headImage‘).addEventListener(‘tap‘,function(){
3. if(mui.os.plus){
4. vara=[{
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. case0:
16. break;
17. case1:
18. getImage();/*拍照*/
19. break;
20. case2:
21. galleryImg();/*打开相册*/
22. break;
23. default:
24. break;
25. }
26. })
27. }
28. },false);

拍照上传

1. //拍照
2. functiongetImage(){
3. varc=plus.camera.getCamera();
4. c.captureImage(function(e){
5. plus.io.resolveLocalFileSystemURL(e,function(entry){
6. vars=entry.toLocalURL()+"?version="+newDate().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. functiongalleryImg(){
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("fileremovesuccess");
10. entry.copyTo(root,‘head.png‘,function(e){
11. vare=e.fullPath+"?version="+newDate().getTime();
12. uploadHead(e);/*上传图片*/
13. //变更大图预览的src
14. //目前仅有一张图片，暂时如此处理，后续需要通过标准组件实现
15. },
16. function(e){
17. console.log(‘copyimagefail:‘+e.message);
18. });
19. },function(){
20. console.log("deleteimagefail:"+e.message);
21. });
22. },function(){
23. //文件不存在
24. entry.copyTo(root,‘head.png‘,function(e){
25. varpath=e.fullPath+"?version="+newDate().getTime();
26. uploadHead(path);/*上传图片*/
27. },
28. function(e){
29. console.log(‘copyimagefail:‘+e.message);
30. });
31. });
32. },function(e){
33. console.log("get_wwwfolderfail");
34. })
35. },function(e){
36. console.log("读取拍照文件错误："+e.message);
37. });
38. },function(a){},{
39. filter:"image"
40. })
41. };

图片上传和压缩

1. //上传头像图片
2. functionuploadHead(imgPath){
3. console.log("imgPath="+imgPath);
4. mainImage.src=imgPath;
5. mainImage.style.width="60px";
6. mainImage.style.height="60px";
8. varimage=newImage();
9. image.src=imgPath;
10. image.onload=function(){
11. varimgData=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. functiongetBase64Image(img){
31. varcanvas=document.createElement("canvas");
32. varwidth=img.width;
33. varheight=img.height;
34. //calculatethewidthandheight,constrainingtheproportions
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. varctx=canvas.getContext("2d");
49. ctx.drawImage(img,0,0,width,height);/*绘图*/
50. vardataURL=canvas.toDataURL("image/png",0.8);
51. returndataURL.replace("data:image/png;base64,","");
52. }

总结

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

Hbuilder mui 相册拍照图片上传

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