H5+获取手机拍照和相册 vue做数据 base64上传

2019独角兽企业重金招聘Python工程师标准>>>

          //弹出选择拍照还是相册选择
              addCamera: function() {
						var that = this;
						plus.nativeUI.actionSheet({
								cancel: "取消",
								buttons: [{
									title: "从相册选择"
								}, {
									title: "拍照"
								}]
							},
							function(event) {
								if(event.index == 1) {
									that.getGallery();
								} else if(event.index == 2) {
									that.getCamera();
								}
							}
						);
					}

          //拍照
               getCamera: function() {
						var that = this;
						var cmr = plus.camera.getCamera();
						console.log(that.picData.length);
						if(that.picData.length <= 2) {
							cmr.captureImage(function(path) {
								plus.io.resolveLocalFileSystemURL(path, function(entry) {
									var localurl = entry.toLocalURL();

									//将拍照的图片编码为base64
									that.uploadPics(localurl);
								});
							}, function(error) {
								console.log(error.message);
							}, {
								filename: "_doc/camera/", //我是根据文档写的
								index: 1 //ios指定主摄像头
							});
						} else {
							mui.toast("最多只能上传三张照片")
						}

					},
              //相册选择
                 getGallery: function() {
						var that = this;
						if(that.picData.length <= 2) {
							plus.gallery.pick(function(path) {
								
								//将相册的图片编码为base64
								that.uploadPics(path);
							}, function(e) {
								console.log("取消选择图片");
							}, {
								filename: "_doc/gallery/", //我是根据文档写的
								filter: "image"
							});
						} else {
							mui.toast("最多只能上传三张照片")
						}

					},
         //编码为base64
                  uploadPics: function(url) {
						var img = new Image();
						img.src = url;
						img.onload = function() {
							var that = img;
							var w = that.width,
								h = that.height,
								scale = w / h;
							w = 320 || w;
							h = w / scale;
							var canvas = document.createElement('canvas');
							var ctx = canvas.getContext('2d');
							$(canvas).attr({
								width: w,
								height: h
							});
							ctx.drawImage(that, 0, 0, w, h);
							var base64 = canvas.toDataURL('image/png', 'image/jpeg', 'image/jpg', 1 || 0.8);
							console.log(base64)
						}
					},

 

转载于:https://my.oschina.net/u/2428630/blog/1579166