mui H5+ 调取 相册 拍照 功能 上传图片 + 裁剪功能
H5+ 相册拍照图片上传
点击用户头像后,弹出actionSheet,选择从相册或是拍照;选取照片后调用上传方法;
上传图片后调用PhotoClip.js 插件进行裁剪
具体流程
弹出actionSheet
- /*点击头像触发*/
- document.getElementById('headImage').addEventListener('tap', function() {
- if (mui.os.plus) {
- var a = [{
- title: "拍照"
- }, {
- title: "从手机相册选择"
- }];
- plus.nativeUI.actionSheet({
- title: "修改用户头像",
- cancel: "取消",
- buttons: a
- }, function(b) { /*actionSheet 按钮点击事件*/
- switch (b.index) {
- case :
- break;
- case :
- getImage(); /*拍照*/
- break;
- case :
- galleryImg();/*打开相册*/
- break;
- default:
- break;
- }
- })
- }
- }, false);
拍照上传
- //拍照
- function getImage() {
- var c = plus.camera.getCamera();
- c.captureImage(function(e) {
- plus.io.resolveLocalFileSystemURL(e, function(entry) {
- var s = entry.toLocalURL() + "?version=" + new Date().getTime();
- uploadHead(s); /*上传图片*/
- }, function(e) {
- console.log("读取拍照文件错误:" + e.message);
- });
- }, function(s) {
- console.log("error" + s);
- }, {
- filename: "_doc/head.png"
- })
- }
- //本地相册选择
- function galleryImg() {
- plus.gallery.pick(function(a) {
- plus.io.resolveLocalFileSystemURL(a, function(entry) {
- plus.io.resolveLocalFileSystemURL("_doc/", function(root) {
- root.getFile("head.png", {}, function(file) {
- //文件已存在
- file.remove(function() {
- console.log("file remove success");
- entry.copyTo(root, 'head.png', function(e) {
- var e = e.fullPath + "?version=" + new Date().getTime();
- uploadHead(e); /*上传图片*/
- //变更大图预览的src
- //目前仅有一张图片,暂时如此处理,后续需要通过标准组件实现
- },
- function(e) {
- console.log('copy image fail:' + e.message);
- });
- }, function() {
- console.log("delete image fail:" + e.message);
- });
- }, function() {
- //文件不存在
- entry.copyTo(root, 'head.png', function(e) {
- var path = e.fullPath + "?version=" + new Date().getTime();
- uploadHead(path); /*上传图片*/
- },
- function(e) {
- console.log('copy image fail:' + e.message);
- });
- });
- }, function(e) {
- console.log("get _www folder fail");
- })
- }, function(e) {
- console.log("读取拍照文件错误:" + e.message);
- });
- }, function(a) {}, {
- filter: "image"
- })
- };
- //上传头像图片
- function uploadHead(imgPath) {
- console.log("imgPath = " + imgPath);
- mainImage.src = imgPath;
- mainImage.style.width = "60px";
- mainImage.style.height = "60px";
- var image = new Image();
- image.src = imgPath;
- image.onload = function() {
- 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();销毁裁剪,必须销毁否则拍照和选取照片会冲突
- /*在这里调用上传接口*/
- // mui.ajax("图片上传接口", {
- // data: {
- //
- // },
- // dataType: 'json',
- // type: 'post',
- // timeout: 10000,
- // success: function(data) {
- // console.log('上传成功');
- // },
- // error: function(xhr, type, errorThrown) {
- // mui.toast('网络异常,请稍后再试!');
- // }
- // });
- }
}
});
}
- //将图片压缩转成base64
- function getBase64Image(img) {
- var canvas = document.createElement("canvas");
- var width = img.width;
- var height = img.height;
- // calculate the width and height, constraining the proportions
- if (width > height) {
- if (width > ) {
- height = Math.round(height *= / width);
- width = ;
- }
- } else {
- if (height > ) {
- width = Math.round(width *= / height);
- height = ;
- }
- }
- canvas.width = width; /*设置新的图片的宽度*/
- canvas.height = height; /*设置新的图片的长度*/
- var ctx = canvas.getContext("2d");
- ctx.drawImage(img, , , width, height); /*绘图*/
- var dataURL = canvas.toDataURL("image/png", 0.8);
- return dataURL.replace("data:image/png;base64,", "");
- }
mui H5+ 调取 相册 拍照 功能 上传图片 + 裁剪功能的更多相关文章
- mui + H5 调取摄像头和相册 实现图片上传
最近要用MUI做项目,在研究图片上传时 ,遇到了大坑 ,网上搜集各种资料,最终写了一个demo,直接看代码.参考(http://www.cnblogs.com/richerdyoung/p/66123 ...
- MUI如何调取相册的方法
第一种是HTML方法 <label> <input style="opacity: 0;" type="file" accept=" ...
- Android SDK4/5/6/7,相册、拍照及裁剪功能及遇见的坑
保存照片和视频到系统相册显示- http://blog.csdn.net/chendong_/article/details/52290329 Android 7.0 之拍照与图片裁剪适配-http: ...
- 手机调用系统的拍照和裁剪功能,假设界面有输入框EditText,在一些手机会出现点击EditText会弹出输入法,却不能输入的情况。
1. 拍照裁剪后 点击EditText会弹出输入法,却不能输入.可是点击点一EdtiText就能够输入了,所以我就写了一个看不见的EdtiText,切换焦点,这样就攻克了这个奇怪的这问题,应该是and ...
- mui调用本地相册调用相机上传照片
调用mui的常用库和jquery html部分: <header class="mui-bar mui-bar-nav"> <a class="mui- ...
- Android实现类似换QQ头像功能(图片裁剪)
现在几乎所有的App都有用户登录模块,需要设置用户头像,而关于用户头像部分无疑也是比较头疼的,目前大部分应用的头像部分会有两种方式:一种是利用系统的裁剪功能去获取用户头像,一种就是获取到图片或者照片的 ...
- android之照相、相冊裁剪功能的实现过程
今天无聊做了一些照相.相冊裁剪功能,希望能够帮到大家! 不多说了,贴代码实际一点: 首先是XML: <ImageButton android:id="@+id/imageButton1 ...
- Android 系统自带图片裁剪功能(适配7.0、8.0、对了还有小米手机)
前段时间写了如何获取相册和拍照之后的照片并且进行显示和上传,这一次是如何进行圆形图像制作,经常看我写的笔记的人会知道,我很懒.那么我就懒的自定义了,目前需求就用原生的就好了,大神的轮子,我会在后面进行 ...
- android 照相或从相册获取图片并裁剪
照相或从相册获取图片并裁剪 在android应用中很多时候都要获取图片(例如获取用户的头像)就需要从用户手机上获取图片.可以直接照,也可以从用户SD卡上获取图片,但获取到的图片未必能达到要求.所以要对 ...
随机推荐
- 【转载】ibit-mybatis介绍
原文链接:ibit-mybatis介绍 概述 ibit-mybatis是一个Mybatis的增强工具,在Mybatis的基础上增加了新的特性与功能,志在简化开发流程.提高开发效率. 特性 无侵入 ...
- 【python基础语法】第5天作业练习题
import random """ 1.一家商场在降价促销.如果购买金额50-100元(包含50元和100元)之间,会给10%的折扣(打九折), 如果购买金额大于100元 ...
- IntelliJ IDEA 更新
一. 下载最新版本的idea 1. 官网下载,官网地址:http://www.jetbrains.com/idea/download/#section=windows 2. 百度网盘直接下载:http ...
- Swift -POP( 面向协议编程)与OOP(面向对象编程)
面向协议编程(Protocol Oriented Programming,简称POP),是Swift的一种编程范式,Apple于2015年WWDC提出的,如果大家看Swift的标准库,就会看到大量PO ...
- Git常用命令 - 随时更新
1. 配置用户信息 git config --global user.name <name> git config --global user.email <email_addres ...
- C#实现图片文件到数据流,再到图片文件的转换
//----引入必要的命名空间 using System.IO; using System.Drawing.Imaging; //----代码部分----// private byte[] photo ...
- 剑指offer-面试题32-从上到下打印二叉树-二叉树遍历
/* 题目: 按层自上向下打印二叉树. */ /* 思路: 使用队列,将节点压入队列中,再弹出来,压入其左右子节点,循环,直到栈为空. */ #include<iostream> #inc ...
- layui弹出表单提交后,界面model验证部分起作用
情况1----input属性中type=submit时验证都可以起作用,但是弹出层表单的返回值不能获取,所以用ajax二次提交后会出现重复添加数据的问题 情况2----input属性中type=but ...
- 关于 DP 的一些内容
0.关于 动态规划是编程解题的一种重要手段.1951 年美国数学家 R.Bellman 等人,根据一类多阶段问题的特点,把多阶段决策问题变换为一系列互相联系的单阶段问题,然后逐个加以解 ...
- 用JavaScript设计和创建对象
通过在优锐课的java学习分享中,get很多学习新技能,分享给大家参考学习. 介绍 在阅读此分步指南之前,你可能需要关注面向对象编程的介绍. 以下步骤中包含的Java代码与该文章理论中使用的Book对 ...