Hbuilder mui 相册拍照图片上传
http://www.bcty365.com/content-146-3648-1.html
使用流程
弹出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 0:
- break;
- case 1:
- getImage(); /*拍照*/
- break;
- case 2:
- 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);
- /*在这里调用上传接口*/
- // 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 > 100) {
- height = Math.round(height *= 100 / width);
- width = 100;
- }
- } else {
- if (height > 100) {
- width = Math.round(width *= 100 / height);
- height = 100;
- }
- }
- canvas.width = width; /*设置新的图片的宽度*/
- canvas.height = height; /*设置新的图片的长度*/
- var ctx = canvas.getContext("2d");
- ctx.drawImage(img, 0, 0, width, height); /*绘图*/
- var dataURL = canvas.toDataURL("image/png", 0.8);
- return dataURL.replace("data:image/png;base64,", "");
- }
总结
在使用中,我们可以发现,使用流程是非常清晰的;某种程度来说比原生iOS的使用还要简单一些。
Hbuilder mui 相册拍照图片上传的更多相关文章
- HTML5 Plus 拍照或者相册选择图片上传
HBuilder+HTML5 Plus+MUI实现拍照或者相册选择图片上传,利用HTML5 Plus的Camera.Gallery.IO.Storage和Uploader来实现手机APP拍照或者从相册 ...
- mui + H5 调取摄像头和相册 实现图片上传
最近要用MUI做项目,在研究图片上传时 ,遇到了大坑 ,网上搜集各种资料,最终写了一个demo,直接看代码.参考(http://www.cnblogs.com/richerdyoung/p/66123 ...
- hybird app项目实例:安卓webview中HTML5拍照图片上传
应用的平台环境:安卓webview: 涉及的技术点: (1) <input type="file" > :在开发中,安卓webview默认点击无法调用文件选择与相机拍照 ...
- IOS网络第五天 AFN-02-文件上传,底部弹出窗体,拍照和相册获取图片上传
************** #import "HMViewController.h" #import "AFNetworking.h" @interface ...
- Ionic3学习笔记(十二)拍照上传图片以及从相册选择图片上传
本文为原创文章,转载请标明出处 目录 安装插件 导入 app.module.ts 创建 provider 更多 效果图 1. 安装插件 终端运行: ionic cordova plugin add c ...
- HTML5 开发APP(打开相册以及图片上传)
我们开发app,常常会遇到让用户上传文件的功能.比如让用户上传头像.我公司的业务要求是让用户上传支付宝收款二维码,来实现用户提现的功能.想要调用相册要靠HTML Plus来实现.先上效果图 基本功能是 ...
- android选择图片或拍照图片上传到服务器(包括上传参数)
From:http://blog.csdn.net/springsky_/article/details/8213898具体上传代码: 1.选择图片和上传界面,包括上传完成和异常的回调监听 [java ...
- android选择图片或拍照图片上传到server(包含上传參数)
在9ria论坛看到的.还没測试,先Mark与大家分享一下. 近期要搞一个项目,须要上传相冊和拍照的图片.不负所望,最终完毕了! 只是须要说明一下,事实上网上非常多教程拍照的图片.都是缩略图不是非常清晰 ...
- mui 的多图片上传
pickHead(){ var _this = this; plus.gallery.pick(function(path){ _this.headImage=path; var files = [{ ...
随机推荐
- Response.ContentType都有哪些?
Response.ContentType 名称 类型ai application/postscriptaif audio/x-aiffaifc audio/x-aiffaiff audio/x-aif ...
- python3.6 连接mysql数据库
==================pymysql=================== 由于 MySQLdb 模块还不支持 Python3.x,所以 Python3.x 如果想连接MySQL需要安装 ...
- Python Django 之 Template 模板语言简介
一.什么事模板语言 html+逻辑控制语句 二.模板语言的作用 帮助前端处理后端发来的数据,方便前端展示(杂糅渲染) 三.模板语言语法 1.{{变量}} 变量使用双大括号{{}} 2.万能的句点号. ...
- pandas 常用语句
pandas的功能非常强大,支持类似与sql的数据增.删.查.改,并且带有丰富的数据处理函数: 支持时间序列分析功能:支持灵活处理缺失数据等. pandas的基本数据结构是Series和DataFra ...
- Linux 查看服务器硬件信息
目录 CPU CPU 总核数 = 物理CPU个数 X 每颗物理CPU的核数 总逻辑CPU数 = 物理CPU个数 X 每颗物理CPU的核数 X 超线程数 查看路数/Socket(s) cat /proc ...
- DevExpress DateEdit 5 常见问题解决方法
1. 如何设置选择的日期大于当天? dateEdit1.Properties.MinValue = DateTime.Now.AddDays(1) 2. 如何做到只显示年.月? var formatS ...
- spring入门程序编写
1.导入jar包
- 双击打开excel时提示:向程序发送命令时出现问题
重装Excel.Office无效 解决方法如下: 打开excel-excel选项-高级选项卡, 找到最下面的常规-忽略使用动态数据交换(DDE)的其他应用程序,去掉前面的勾勾,保存即可.
- L237
The British parliament on Tuesday rejected overwhelmingly the Brexit deal, further complicating the ...
- ZooKeeper 之 zkCli.sh客户端的命令使用
zkCli.sh的使用 ZooKeeper服务器简历客户端 ./zkCli.sh -timeout 0 -r -server ip:port ./zkCli.sh -timeout 5000 -ser ...