Hbuilder mui 相册拍照图片上传

来源：互联网发布：javascript写注册界面编辑：程序博客网时间：2024/04/30 13:54

在做WebAPP项目中，需要从相册或是拍照，视频或录音，然后上传，比如修改用户头像或是上传项目图片等.
这里写图片描述
点击用户头像后，弹出actionSheet，选着从相册或是拍照；选着图片后就调用上传方法，上传图片；在上传之前先压缩了一下图片。还可以加入拍摄视频和录制音频
使用流程
1弹出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"     }) };

图片上传和压缩,转base64

//上传头像图片 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,", ""); }

完成的js代码已经写在一个js文件中了。mui.upload.js
下载后根据情况进行少量修改

阅读全文

0 0