web app上传图片

以前,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));
}
}
};
上一篇:手把手Vue3项目(二)——安装配置 json-server 、 json-server-auth ,模拟后端服务,测试注册和登录功能


下一篇:Django之视图函数