以前,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));
}
}
};

web app上传图片的更多相关文章

  1. html5文章 -- HTML5开发实例-网易微博手机Web App开发过程

    HTML5在国内外越来越受到互联网开发团队的青睐.国外,谷歌兴致勃勃地开发Chrome Web Store,微软发布了支持使用HTML5技术开发的“Irish Spring”主题网站,诺基亚斥巨资购得 ...

  2. Ionic app 上传图片之webApi接口

    App上传图片对应的webApi服务端是怎么处理的呢? using System; using System.Collections.Generic; using System.Diagnostics ...

  3. JRE System Library、Referenced Libraries、Web App Libraries的含义

    JRE System Library.Referenced Libraries.Web App Libraries 这三个都是jar包的存放集合. JRE System Library:指Java S ...

  4. 详解Python Streamlit框架,用于构建精美数据可视化web app,练习做个垃圾分类app

    今天详解一个 Python 库 Streamlit,它可以为机器学习和数据分析构建 web app.它的优势是入门容易.纯 Python 编码.开发效率高.UI精美. 上图是用 Streamlit 构 ...

  5. Azure 部署 Asp.NET Core Web App

    在云计算大行其道的时代,当你在部署一个网站时,第一选择肯定是各式各样的云端服务.那么究竟使用什么样的云端服务才能够以最快捷的方式部署一个 ASP.NET Core 的网站呢?Azure 的 Web A ...

  6. 如何用Azure Web App Services接入微信公众号

    注:本文提到的代码示例下载地址>如何用Azure Web App Services接入微信公众号 如何用Azure Web App Services接入微信公众号 简介 此示例演示如何创建Azu ...

  7. .net core 源码解析-web app是如何启动并接收处理请求(二) kestrel的启动

    上篇讲到.net core web app是如何启动并接受请求的,下面接着探索kestrel server是如何完成此任务的. 1.kestrel server的入口KestrelServer.Sta ...

  8. .net core 源码解析-web app是如何启动并接收处理请求

    最近.net core 1.1也发布了,蹒跚学步的小孩又长高了一些,园子里大家也都非常积极的在学习,闲来无事,扒拔源码,涨涨见识. 先来见识一下web站点是如何启动的,如何接受请求,.net core ...

  9. web app开发技巧总结 (share)

    (转自http://hi.baidu.com/kuntakinte/item/ca92d6e5edae9fc0bbf37d08) 自Iphone和Android这两个牛逼的手机操作系统发布以来,在互联 ...

随机推荐

  1. 与你相遇好幸运,aglio写接口文档

    npm install -g aglio npm i aglio-theme-minimal aglio --theme-full-width -t minimal -i ./src/index.md ...

  2. Android 笔记 day1

  3. HDU3333 Turing Tree(线段树)

    题目 Source http://acm.hdu.edu.cn/showproblem.php?pid=3333 Description After inventing Turing Tree, 3x ...

  4. 【BZOJ】3993: [SDOI2015]星际战争

    题意 \(m\)个人\(n\)个物品,第\(i\)个物品生命值为\(A_i\),第\(i\)个人每秒可以减少一个物品\(B_i\)的生命值,给出一个\(m \times n\)的矩阵,如果\(i\)行 ...

  5. MySQL导出数据

    1.MySQL导出数据库 只导出数据库结构:选中数据库-->右键—>数据传输—>高级—>取消勾选记录选项.

  6. iOS开发中常见问题集锦

    在iOS开发中,会出现各种各样的问题.今天,就把这些常见的问题以及各位大牛的解决方案汇总下,方便以后查阅: 常见错误: 1. linker command failed with exit code ...

  7. 【Alpha】Daily Scrum Meeting第二次

    一.Daily Scrum Meeting照片 二.Burndown Chart 由于此次项目延期7天,因此Burndown Chart较第一次会变宽 三.项目进展 登陆模块已经能和服务器交流 可以使 ...

  8. MySQL黑科技用法总结(持续更新)

    1.利用set插入数值 insert [into] 表名 set 列=值.  2.利用select对字段进行测试 ) ,并且有2条记录 ',num1+1的计算结果 tips:相等返回1,否则返回0 f ...

  9. 在ubuntu 12.04 x64下编译hadoop2.4

    自己编译hadoop:x64 1.安装依赖包 sudo apt-get install g++ autoconf automake libtool cmake zlib1g-dev pkg-confi ...

  10. 马克飞象 Markdown 使用和学习

    第三方学习网站 http://sspai.com/25137https://maxiang.io/ 使用工具:有道云笔记 https://note.youdao.com/ 新建时使用Mardown类型 ...