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

总结

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