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的使用还要简单一些。

Hbuilder mui 相册拍照图片上传的更多相关文章

  1. HTML5 Plus 拍照或者相册选择图片上传

    HBuilder+HTML5 Plus+MUI实现拍照或者相册选择图片上传,利用HTML5 Plus的Camera.Gallery.IO.Storage和Uploader来实现手机APP拍照或者从相册 ...

  2. mui + H5 调取摄像头和相册 实现图片上传

    最近要用MUI做项目,在研究图片上传时 ,遇到了大坑 ,网上搜集各种资料,最终写了一个demo,直接看代码.参考(http://www.cnblogs.com/richerdyoung/p/66123 ...

  3. hybird app项目实例:安卓webview中HTML5拍照图片上传

    应用的平台环境:安卓webview: 涉及的技术点: (1) <input type="file" > :在开发中,安卓webview默认点击无法调用文件选择与相机拍照 ...

  4. IOS网络第五天 AFN-02-文件上传,底部弹出窗体,拍照和相册获取图片上传

    ************** #import "HMViewController.h" #import "AFNetworking.h" @interface ...

  5. Ionic3学习笔记(十二)拍照上传图片以及从相册选择图片上传

    本文为原创文章,转载请标明出处 目录 安装插件 导入 app.module.ts 创建 provider 更多 效果图 1. 安装插件 终端运行: ionic cordova plugin add c ...

  6. HTML5 开发APP(打开相册以及图片上传)

    我们开发app,常常会遇到让用户上传文件的功能.比如让用户上传头像.我公司的业务要求是让用户上传支付宝收款二维码,来实现用户提现的功能.想要调用相册要靠HTML Plus来实现.先上效果图 基本功能是 ...

  7. android选择图片或拍照图片上传到服务器(包括上传参数)

    From:http://blog.csdn.net/springsky_/article/details/8213898具体上传代码: 1.选择图片和上传界面,包括上传完成和异常的回调监听 [java ...

  8. android选择图片或拍照图片上传到server(包含上传參数)

    在9ria论坛看到的.还没測试,先Mark与大家分享一下. 近期要搞一个项目,须要上传相冊和拍照的图片.不负所望,最终完毕了! 只是须要说明一下,事实上网上非常多教程拍照的图片.都是缩略图不是非常清晰 ...

  9. mui 的多图片上传

    pickHead(){ var _this = this; plus.gallery.pick(function(path){ _this.headImage=path; var files = [{ ...

随机推荐

  1. Response.ContentType都有哪些?

    Response.ContentType 名称 类型ai application/postscriptaif audio/x-aiffaifc audio/x-aiffaiff audio/x-aif ...

  2. python3.6 连接mysql数据库

    ==================pymysql=================== 由于 MySQLdb 模块还不支持 Python3.x,所以 Python3.x 如果想连接MySQL需要安装 ...

  3. Python Django 之 Template 模板语言简介

    一.什么事模板语言 html+逻辑控制语句 二.模板语言的作用 帮助前端处理后端发来的数据,方便前端展示(杂糅渲染) 三.模板语言语法 1.{{变量}} 变量使用双大括号{{}} 2.万能的句点号. ...

  4. pandas 常用语句

    pandas的功能非常强大,支持类似与sql的数据增.删.查.改,并且带有丰富的数据处理函数: 支持时间序列分析功能:支持灵活处理缺失数据等. pandas的基本数据结构是Series和DataFra ...

  5. Linux 查看服务器硬件信息

    目录 CPU CPU 总核数 = 物理CPU个数 X 每颗物理CPU的核数 总逻辑CPU数 = 物理CPU个数 X 每颗物理CPU的核数 X 超线程数 查看路数/Socket(s) cat /proc ...

  6. DevExpress DateEdit 5 常见问题解决方法

    1. 如何设置选择的日期大于当天? dateEdit1.Properties.MinValue = DateTime.Now.AddDays(1) 2. 如何做到只显示年.月? var formatS ...

  7. spring入门程序编写

    1.导入jar包

  8. 双击打开excel时提示:向程序发送命令时出现问题

    重装Excel.Office无效 解决方法如下: 打开excel-excel选项-高级选项卡, 找到最下面的常规-忽略使用动态数据交换(DDE)的其他应用程序,去掉前面的勾勾,保存即可.

  9. L237

    The British parliament on Tuesday rejected overwhelmingly the Brexit deal, further complicating the ...

  10. ZooKeeper 之 zkCli.sh客户端的命令使用

    zkCli.sh的使用 ZooKeeper服务器简历客户端 ./zkCli.sh -timeout 0 -r -server ip:port ./zkCli.sh -timeout 5000 -ser ...