Hbuilder mui 相册拍照图片上传

蔚落 2022-06-13 01:26 480阅读 0赞

在做WebAPP项目中，需要从相册或是拍照，视频或录音，然后上传，比如修改用户头像或是上传项目图片等.  
![这里写图片描述][SouthEast]  
点击用户头像后，弹出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" 
        }) 
    }

从相册选图上传

图片上传和压缩,转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][]  
下载后根据情况进行少量修改

使用方式 ,结合上面的 mui\_upload.js  
html code

js code

initUpload("headImage", "FileUrl", 5, 'add', [{
    	title: "拍摄照片"
    }, {
    	title: "拍摄视频"
    }, {
    	title: "从手机文件选择"
    }, {
    	title: "录制音频"
    }]);

[SouthEast]: /images/20220613/90f817d6433c4f5994fc5155c9a74ec5.png
[mui.upload.js]: https://download.csdn.net/download/zhuyu19911016520/10893218