H5+ 相册拍照图片上传

  点击用户头像后,弹出actionSheet,选择从相册或是拍照;选取照片后调用上传方法;

  上传图片后调用PhotoClip.js  插件进行裁剪

具体流程

弹出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 :
  16. break;
  17. case :
  18. getImage(); /*拍照*/
  19. break;
  20. case :
  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);

          pc = new PhotoClip("#clipArea", {
                        size: [300, 300],//裁剪框大小
                        outputSize:[0,0],//打开图片大小,[0,0]表示原图大小
                        ok: "#clipBtn",
                        img: imgPath,
                        loadStart: function() { //图片开始加载的回调函数。this 指向当前 PhotoClip 的实例对象,并将正在加载的 file 对象作为参数传入。(如果是使用非 file 的方式加载图片,则该参数为图片的 url)
                        },
                        loadComplete: function() {//图片加载完成的回调函数。this 指向当前 PhotoClip 的实例对象,并将图片的 <img> 对象作为参数传入。
                        },                         

                        done: function(dataURL) { //裁剪完成的回调函数。this 指向当前 PhotoClip 的实例对象,会将裁剪出的图像数据DataURL作为参数传入。                           

                  pc.destroy();销毁裁剪,必须销毁否则拍照和选取照片会冲突

  1.                         /*在这里调用上传接口*/
  2.                           // mui.ajax("图片上传接口", {
  3.                           // data: {
  4.                           //
  5.                           // },
  6.                           // dataType: 'json',
  7.                           // type: 'post',
  8.                           // timeout: 10000,
  9.                           // success: function(data) {
  10.                           // console.log('上传成功');
  11.                           // },
  12.                           // error: function(xhr, type, errorThrown) {
  13.                           // mui.toast('网络异常,请稍后再试!');
  14.                           // }
  15.                           // });
  16.                  }

          }
      });

  }

  1. //将图片压缩转成base64
  2. function getBase64Image(img) {
  3. var canvas = document.createElement("canvas");
  4. var width = img.width;
  5. var height = img.height;
  6. // calculate the width and height, constraining the proportions
  7. if (width > height) {
  8. if (width > ) {
  9. height = Math.round(height *= / width);
  10. width = ;
  11. }
  12. } else {
  13. if (height > ) {
  14. width = Math.round(width *= / height);
  15. height = ;
  16. }
  17. }
  18. canvas.width = width; /*设置新的图片的宽度*/
  19. canvas.height = height; /*设置新的图片的长度*/
  20. var ctx = canvas.getContext("2d");
  21. ctx.drawImage(img, , , width, height); /*绘图*/
  22. var dataURL = canvas.toDataURL("image/png", 0.8);
  23. return dataURL.replace("data:image/png;base64,", "");
  24. }

mui H5+ 调取 相册 拍照 功能 上传图片 + 裁剪功能的更多相关文章

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

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

  2. MUI如何调取相册的方法

    第一种是HTML方法 <label> <input style="opacity: 0;" type="file" accept=" ...

  3. Android SDK4/5/6/7,相册、拍照及裁剪功能及遇见的坑

    保存照片和视频到系统相册显示- http://blog.csdn.net/chendong_/article/details/52290329 Android 7.0 之拍照与图片裁剪适配-http: ...

  4. 手机调用系统的拍照和裁剪功能,假设界面有输入框EditText,在一些手机会出现点击EditText会弹出输入法,却不能输入的情况。

    1. 拍照裁剪后 点击EditText会弹出输入法,却不能输入.可是点击点一EdtiText就能够输入了,所以我就写了一个看不见的EdtiText,切换焦点,这样就攻克了这个奇怪的这问题,应该是and ...

  5. mui调用本地相册调用相机上传照片

    调用mui的常用库和jquery html部分: <header class="mui-bar mui-bar-nav"> <a class="mui- ...

  6. Android实现类似换QQ头像功能(图片裁剪)

    现在几乎所有的App都有用户登录模块,需要设置用户头像,而关于用户头像部分无疑也是比较头疼的,目前大部分应用的头像部分会有两种方式:一种是利用系统的裁剪功能去获取用户头像,一种就是获取到图片或者照片的 ...

  7. android之照相、相冊裁剪功能的实现过程

    今天无聊做了一些照相.相冊裁剪功能,希望能够帮到大家! 不多说了,贴代码实际一点: 首先是XML: <ImageButton android:id="@+id/imageButton1 ...

  8. Android 系统自带图片裁剪功能(适配7.0、8.0、对了还有小米手机)

    前段时间写了如何获取相册和拍照之后的照片并且进行显示和上传,这一次是如何进行圆形图像制作,经常看我写的笔记的人会知道,我很懒.那么我就懒的自定义了,目前需求就用原生的就好了,大神的轮子,我会在后面进行 ...

  9. android 照相或从相册获取图片并裁剪

    照相或从相册获取图片并裁剪 在android应用中很多时候都要获取图片(例如获取用户的头像)就需要从用户手机上获取图片.可以直接照,也可以从用户SD卡上获取图片,但获取到的图片未必能达到要求.所以要对 ...

随机推荐

  1. 【转载】ibit-mybatis介绍

    原文链接:ibit-mybatis介绍 概述    ibit-mybatis是一个Mybatis的增强工具,在Mybatis的基础上增加了新的特性与功能,志在简化开发流程.提高开发效率. 特性 无侵入 ...

  2. 【python基础语法】第5天作业练习题

    import random """ 1.一家商场在降价促销.如果购买金额50-100元(包含50元和100元)之间,会给10%的折扣(打九折), 如果购买金额大于100元 ...

  3. IntelliJ IDEA 更新

    一. 下载最新版本的idea 1. 官网下载,官网地址:http://www.jetbrains.com/idea/download/#section=windows 2. 百度网盘直接下载:http ...

  4. Swift -POP( 面向协议编程)与OOP(面向对象编程)

    面向协议编程(Protocol Oriented Programming,简称POP),是Swift的一种编程范式,Apple于2015年WWDC提出的,如果大家看Swift的标准库,就会看到大量PO ...

  5. Git常用命令 - 随时更新

    1. 配置用户信息 git config --global user.name <name> git config --global user.email <email_addres ...

  6. C#实现图片文件到数据流,再到图片文件的转换

    //----引入必要的命名空间 using System.IO; using System.Drawing.Imaging; //----代码部分----// private byte[] photo ...

  7. 剑指offer-面试题32-从上到下打印二叉树-二叉树遍历

    /* 题目: 按层自上向下打印二叉树. */ /* 思路: 使用队列,将节点压入队列中,再弹出来,压入其左右子节点,循环,直到栈为空. */ #include<iostream> #inc ...

  8. layui弹出表单提交后,界面model验证部分起作用

    情况1----input属性中type=submit时验证都可以起作用,但是弹出层表单的返回值不能获取,所以用ajax二次提交后会出现重复添加数据的问题 情况2----input属性中type=but ...

  9. 关于 DP 的一些内容

    0.关于         动态规划是编程解题的一种重要手段.1951 年美国数学家 R.Bellman 等人,根据一类多阶段问题的特点,把多阶段决策问题变换为一系列互相联系的单阶段问题,然后逐个加以解 ...

  10. 用JavaScript设计和创建对象

    通过在优锐课的java学习分享中,get很多学习新技能,分享给大家参考学习. 介绍 在阅读此分步指南之前,你可能需要关注面向对象编程的介绍. 以下步骤中包含的Java代码与该文章理论中使用的Book对 ...