以前,web app上传图片需要通过cordova插件
后来一个html标签就可以了
<input type="file" class="upload" capture="camera" accept="image/*" onchange="angular.element(this).scope().uploadhead(this)" />
js里的代码:
$scope.uploadhead = function(file) { fileSelected(file); } function fileSelected(obj) { if (obj) { var file = obj.files[0]; if (ImgCompress.checkType(file)) { ImgCompress.getBase64(file, obj, getBase); } } } function getBase(data) { $("#myavatar").attr("src", data); } var ImgCompress = { checkType: function(file) { if (!file.type.match('image.*')) { return false; } else { return true; } }, getBase64: function(file, obj, callBack) { var _this = this; _this.readFile(file, obj, callBack); }, readFile: function(file, obj, callBack) { var _this = this; //读取文件 if (window.FileReader) { var fr = new FileReader(); fr.onloadend = function(e) { //显示图片 var src = e.target.result; //压缩图片获取base64编码 _this.compress(src, callBack); }; fr.readAsDataURL(file); } else { alert("请使用高版本浏览器!"); } }, compress: function(src, callBack) { var _this = this; var img = new Image(); img.src = src; img.onload = function() { //生成比例 var width = img.naturalWidth, height = img.naturalHeight, scale = width / height; width = parseInt(750); height = parseInt(width / scale); //生成canvas var $canvas = document.createElement("canvas"); var ctx = $canvas.getContext('2d'); $canvas.width = width; $canvas.height = height; //压缩 ctx.drawImage(img, 0, 0, width, height);
//这里转成jpeg,也可以不转 callBack($canvas.toDataURL('image/jpeg', 0.5)); } } };