相机相册上传图片(base64)

 

// 母函数
function App() {}
/**
 * 图片压缩,默认同比例压缩
 * @param {Object} path
 *         pc端传入的路径可以为相对路径,但是在移动端上必须传入的路径是照相图片储存的绝对路径
 * @param {Object} obj
 *         obj 对象 有 width, height, quality(0-1)
 * @param {Object} callback
 *         回调函数有一个参数,base64的字符串数据
 */
App.prototype.dealImage = function(path, obj, callback) {
	var img = new Image();
	img.src = path;
	img.onload = function() {
		var that = this;
		// 默认按比例压缩
		var w = that.width,
			h = that.height,
			scale = w / h;
		w = obj.width || w;
		h = obj.height || (w / scale);
		var quality = 0.5; // 默认图片质量为0.5

		//生成canvas
		var canvas = document.createElement('canvas');
		var ctx = canvas.getContext('2d');

		// 创建属性节点
		var anw = document.createAttribute("width");
		anw.nodeValue = w;
		var anh = document.createAttribute("height");
		anh.nodeValue = h;
		canvas.setAttributeNode(anw);
		canvas.setAttributeNode(anh);

		ctx.drawImage(that, 0, 0, w, h);
		// 图像质量
		if(obj.quality && obj.quality <= 1 && obj.quality > 0) {
			quality = obj.quality;
		}
		// quality值越小,所绘制出的图像越模糊
		var base64 = canvas.toDataURL('image/jpeg', quality);
		// 回调函数返回base64的值
		callback(base64);
	}
}

/**
 * 获取图片后处理回调处理数据
 * @param {Object} delobj
 *         需要处理的对象参数
 * @param {Object} cb
 *         回调函数返回需要处理的数据,包括源文件大小,处理后的文件大小,文件名
 */
App.prototype.delPhotoMsg = function(delobj, cb) {
	var camera = plus.camera.getCamera();
	var res = camera.supportedImageResolutions[0];
	var fmt = camera.supportedImageFormats[0];
	var _this = this;
	var fileObj = {
		origin: {},
		now: {}
	}; // 回调对象接口
	// 获取摄像头进行拍照
	camera.captureImage(function(path) {
		plus.io.requestFileSystem(plus.io.PRIVATE_WWW, function(fs) {
			fs.root.getFile(path, {
				create: true
			}, function(fileEntry) {
				fileEntry.file(function(file) {
					//                    console.log("原始文件大小:" + file.size / 1024 +"KB   filename:"+file.name);
					origin(file.size, file.name);
				})
			})
		})

		function origin(filesize, filename) {
			// 移动端图片压缩处理
			plus.io.resolveLocalFileSystemURL(path, function(entry) {
				var local = entry.toLocalURL(); // 获取本地地址
				// 图片压缩处理
				_this.dealImage(local, delobj, function(base) {
					fileObj.now.base64Char = base;
					fileObj.now.base64Length = base.length;
					fileObj.now.fileSize = (base.length / 1024).toFixed(2) + "KB";
					fileObj.origin.fileSize = (filesize / 1024).toFixed(2) + "KB";
					fileObj.origin.filePath = local;
					fileObj.fileName = filename;
					cb(fileObj);
				})
			})
		}
	}, function(err) {
		console.log("获取相片错误:" + err.message);
	}, {
		resolution: res,
		format: fmt
	})
}

/**
 * 
 * @param {Object} del
 *         需要直接处理的参数对象
 *             例如: "{width : 100, height: 100, quality : 0.5}"  
 *                 默认处理按比例处理,只要设置width或height,quality默认0.7
 * @param {Object} options
 *         图片处理的属性  处理文件格式 multiple 选择多张文件进行批量处理
 *             例如:{filter : "image", multiple : true}
 * @param {Object} callback
 *         回调函数返回相应的参数
 *             返回对象数组,包括原始文件大小等内容
 *             例如:obj[0].origin.fileSize, obj[0].now.fileSize,obj[0].now.filePath等
 */
App.prototype.delGalleryImg = function(del, options, callback) {
	var _this = this;
	var fileObj = {
		now: {},
		origin: {}
	}
	plus.gallery.pick(function(eve) {
		if(options.multiple) {
			delmultiple(eve); // 多张照片处理回调函数
		} else {
			delsingle(eve); // 单张图片处理回调函数
		}
	}, function(err) {
		console.log(err.message)
	}, {
		filter: options.filter || "image",
		multiple: options.multiple || false
	})

	// 处理多张图片
	function delmultiple(eve) {
		for(var i = 0, len = eve.files.length; i < len; i++) {
			//            console.log(i +" : "+ eve.files[i])
			(function(i, len) { // 因为此处为异步操作,需要自动执行函数传入index的值到函数中进行自动执行
				retValue(eve.files[i], function(filepro) {
					//                    console.log(JSON.stringify(filepro))
					inner(i, len, filepro);
				})

			})(i, len)
		}

		var cbobj = []; // 暂存json字符串话的字符数组
		function inner(index, len, result) {
			//            console.log(index +"  "+ JSON.stringify(result));
			cbobj.push(JSON.stringify(result)); // 此处如果直接将对象push到数值中,会存在相同的对象元素(不知为什么),所以进行了一个
			if(cbobj.length == len) {
				var tempobj = []; // 解析字符串 后回调该对象数组
				for(var i = 0; i < len; i++) { // 遍历所有的文件进行字符串解析
					var obj = JSON.parse(cbobj[i])
					tempobj[i] = obj;
				}
				callback(tempobj); // 回调数组对象
			}
		}
	}
	// 处理单张图片
	function delsingle(path) {
		// 调用内部函数回调函数进行外部单一图片选择处理属性回调
		retValue(path, function(filepro) {
			callback(filepro);
		});
	}

	function retValue(path, cb) {
		plus.io.requestFileSystem(plus.io.PRIVATE_WWW, function(fs) {
			fs.root.getFile(path, {
				create: true
			}, function(fileEntry) {
				fileEntry.file(function(file) {
					//                    console.log("原始文件大小:" + file.size / 1024 +"KB   filename:"+file.name);
					origin(file.size, file.name);
				})
			})
		})
		// 回调函数
		function origin(filesize, filename) {
			// 移动端图片压缩处理
			plus.io.resolveLocalFileSystemURL(path, function(entry) {
				var local = entry.toLocalURL(); // 获取本地地址
				// 图片压缩处理
				_this.dealImage(local, del, function(base) {
					fileObj.now.base64Char = base;
					fileObj.now.base64Length = base.length;
					fileObj.now.fileSize = (base.length / 1024).toFixed(2) + "KB";
					fileObj.origin.fileSize = (filesize / 1024).toFixed(2) + "KB";
					fileObj.origin.filePath = local;
					fileObj.fileName = filename;
					cb(fileObj);
				})
			})
		}
	}

}
//打开相机
			function ydl_getImage() {
				var c = plus.camera.getCamera();
				c.captureImage(function(e) {
					plus.io.resolveLocalFileSystemURL(e, function(entry) {
						var s = entry.toLocalURL() + "?version=" + new Date().getTime();
						App.prototype.dealImage(s, {
							width: 500,//图片宽
							height: 500,//图片高
							quality: 0.5//压缩0~1之间
						}, function(base64) {
							//图片处理
						});
					}, function(e) {
						alert("读取拍照文件错误:" + e.message);
					});
					$("#picture").hide();
					$("#picture").removeClass("mui-active");
					$(".mui-backdrop").remove();
				}, function(s) {
					alert("打开相机时出错:" + s.message);
				})
			}
			//打开相册
			function ydl_galleryImg() {
				plus.gallery.pick(function(a) {
					for(var i in a.files) {
						plus.io.resolveLocalFileSystemURL(a.files[i], function(entry) {
							console.log(a.files[i]);
							var s = entry.toLocalURL() + "?version=" + new Date().getTime();
							App.prototype.dealImage(s, {
								width: 500,
								height: 500,
								quality: 0.5
							}, function(base64) {
								//图片处理
							});
						}, function(e) {
							alert("读取文件错误:" + e.message);
						});
					}
					$("#picture").hide();
					$("#picture").removeClass("mui-active");
					$(".mui-backdrop").remove();
				}, function(a) {}, {
					filter: "image",
					multiple: true
				})
			};

-===============================================================================================

//后台处理方法

 public string  Action([FromBody]CustomerModes cobj)//自定义对象,{File}字符串用‘|’分隔多张图片的base64
{

                    List<String> fstr = new List<string>();//Base64集合
                    if (!string.IsNullOrEmpty(cobj.File))
                    {
                        fstr = cobj.File.Split('|').ToList();
                        for (int i = 0; i < fstr .Count - 1; i++)
                        {
                            string files = fstr[i].ToString();
                            string base64Data = files.Split(',')[1];
                            //图片路径
                            string filePath = HttpContext.Current.Server.MapPath("~/" + @System.Configuration.ConfigurationManager.AppSettings["ImagePath"]);
                            byte[] bt = Convert.FromBase64String(base64Data);//获取图片base64
                            string fileName = DateTime.Now.Year.ToString() + DateTime.Now.Month.ToString();//年月
                            string ImageFilePath = "/Image" + "/" + fileName;
                            if (System.IO.Directory.Exists(HttpContext.Current.Server.MapPath(ImageFilePath)) == false)//如果不存在就创建文件夹
                            {
                                System.IO.Directory.CreateDirectory(HttpContext.Current.Server.MapPath(ImageFilePath));
                            }
                            string ImagePath = HttpContext.Current.Server.MapPath(ImageFilePath) + "/" + System.DateTime.Now.ToString("yyyyHHddHHmmss");//定义图片名称
                            File.WriteAllBytes(ImagePath + ".jpg", bt); //保存图片到服务器,然后获取路径  
                            string imgurl=ImagePath + ".png";//图片路径

 

                             //数据库可直接保存imgurl   或者   bt

                             //如果保存bt可以不用将文件保存到服务器
                        }
                    }

}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值