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));
}
}
};
web app上传图片的更多相关文章
- html5文章 -- HTML5开发实例-网易微博手机Web App开发过程
HTML5在国内外越来越受到互联网开发团队的青睐.国外,谷歌兴致勃勃地开发Chrome Web Store,微软发布了支持使用HTML5技术开发的“Irish Spring”主题网站,诺基亚斥巨资购得 ...
- Ionic app 上传图片之webApi接口
App上传图片对应的webApi服务端是怎么处理的呢? using System; using System.Collections.Generic; using System.Diagnostics ...
- JRE System Library、Referenced Libraries、Web App Libraries的含义
JRE System Library.Referenced Libraries.Web App Libraries 这三个都是jar包的存放集合. JRE System Library:指Java S ...
- 详解Python Streamlit框架,用于构建精美数据可视化web app,练习做个垃圾分类app
今天详解一个 Python 库 Streamlit,它可以为机器学习和数据分析构建 web app.它的优势是入门容易.纯 Python 编码.开发效率高.UI精美. 上图是用 Streamlit 构 ...
- Azure 部署 Asp.NET Core Web App
在云计算大行其道的时代,当你在部署一个网站时,第一选择肯定是各式各样的云端服务.那么究竟使用什么样的云端服务才能够以最快捷的方式部署一个 ASP.NET Core 的网站呢?Azure 的 Web A ...
- 如何用Azure Web App Services接入微信公众号
注:本文提到的代码示例下载地址>如何用Azure Web App Services接入微信公众号 如何用Azure Web App Services接入微信公众号 简介 此示例演示如何创建Azu ...
- .net core 源码解析-web app是如何启动并接收处理请求(二) kestrel的启动
上篇讲到.net core web app是如何启动并接受请求的,下面接着探索kestrel server是如何完成此任务的. 1.kestrel server的入口KestrelServer.Sta ...
- .net core 源码解析-web app是如何启动并接收处理请求
最近.net core 1.1也发布了,蹒跚学步的小孩又长高了一些,园子里大家也都非常积极的在学习,闲来无事,扒拔源码,涨涨见识. 先来见识一下web站点是如何启动的,如何接受请求,.net core ...
- web app开发技巧总结 (share)
(转自http://hi.baidu.com/kuntakinte/item/ca92d6e5edae9fc0bbf37d08) 自Iphone和Android这两个牛逼的手机操作系统发布以来,在互联 ...
随机推荐
- 与你相遇好幸运,aglio写接口文档
npm install -g aglio npm i aglio-theme-minimal aglio --theme-full-width -t minimal -i ./src/index.md ...
- Android 笔记 day1
- HDU3333 Turing Tree(线段树)
题目 Source http://acm.hdu.edu.cn/showproblem.php?pid=3333 Description After inventing Turing Tree, 3x ...
- 【BZOJ】3993: [SDOI2015]星际战争
题意 \(m\)个人\(n\)个物品,第\(i\)个物品生命值为\(A_i\),第\(i\)个人每秒可以减少一个物品\(B_i\)的生命值,给出一个\(m \times n\)的矩阵,如果\(i\)行 ...
- MySQL导出数据
1.MySQL导出数据库 只导出数据库结构:选中数据库-->右键—>数据传输—>高级—>取消勾选记录选项.
- iOS开发中常见问题集锦
在iOS开发中,会出现各种各样的问题.今天,就把这些常见的问题以及各位大牛的解决方案汇总下,方便以后查阅: 常见错误: 1. linker command failed with exit code ...
- 【Alpha】Daily Scrum Meeting第二次
一.Daily Scrum Meeting照片 二.Burndown Chart 由于此次项目延期7天,因此Burndown Chart较第一次会变宽 三.项目进展 登陆模块已经能和服务器交流 可以使 ...
- MySQL黑科技用法总结(持续更新)
1.利用set插入数值 insert [into] 表名 set 列=值. 2.利用select对字段进行测试 ) ,并且有2条记录 ',num1+1的计算结果 tips:相等返回1,否则返回0 f ...
- 在ubuntu 12.04 x64下编译hadoop2.4
自己编译hadoop:x64 1.安装依赖包 sudo apt-get install g++ autoconf automake libtool cmake zlib1g-dev pkg-confi ...
- 马克飞象 Markdown 使用和学习
第三方学习网站 http://sspai.com/25137https://maxiang.io/ 使用工具:有道云笔记 https://note.youdao.com/ 新建时使用Mardown类型 ...