HTML5 实现图片上传预处理功能


Posted in HTML / CSS onFebruary 06, 2020

在开发 H5 应用的时候碰到一个问题,应用只需要一张小的缩略图,而用户用手机上传的确是一张大图,手机摄像机拍的图片好几 M,这可要浪费很多流量。

像我这么为用户着想的程序员,绝对不会让这种事情发生的,于是就有了本文。

获取图片

通过 File API 获取图片。

var input = document.createElement('input');
input.type = 'file';
input.addEventListener('change', function() {
  var file = this.files[0];
});
input.click();

预览图片

使用 createObjectURL() 或者 FileReader 预览图片

var img = document.createElement('img');
img.src = window.URL.createObjectURL(file);
var img = document.createElement("img");
var reader = new FileReader();
reader.onload = function(e) {
  img.src = e.target.result;
}
reader.readAsDataURL(file);

使用 canvas 做缩略图

var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
var MAX_WIDTH = 800;
var MAX_HEIGHT = 600;
var width = img.width;
var height = img.height;

if (width > height) {
  if (width > MAX_WIDTH) {
    height *= MAX_WIDTH / width;
    width = MAX_WIDTH;
  }
} else {
  if (height > MAX_HEIGHT) {
    width *= MAX_HEIGHT / height;
    height = MAX_HEIGHT;
  }
}
canvas.width = width;
canvas.height = height;
ctx.drawImage(img, 0, 0, width, height);

上传缩略图

canvas.toBlob(function(blob) {
  var form = new FormData();
  form.append('file', blob);
  fetch('/api/upload', {method: 'POST', body: form});
});

结语

DEMO:weekcool.com/js/upload.j…

总结

以上所述是小编给大家介绍的HTML5 实现图片上传预处理功能,希望对大家有所帮助!

HTML / CSS 相关文章推荐
css3打造一款漂亮的卡哇伊按钮
Mar 20 HTML / CSS
css3教程之倾斜页面
Jan 27 HTML / CSS
CSS3中利用animation属性创建雪花飘落特效
May 14 HTML / CSS
无需JS和jQuery代码实现CSS3鼠标浮动放大图片
Nov 21 HTML / CSS
CSS3 函数技巧 用css 实现js实现的事情(clac Counters Tooltip)
Aug 15 HTML / CSS
用CSS3实现瀑布流布局的示例代码
Nov 10 HTML / CSS
仿CSDN Blog返回页面顶部功能实现原理及代码
Jun 30 HTML / CSS
html5记忆翻牌游戏实现思路及代码
Jul 25 HTML / CSS
html5 canvas合成海报所遇问题及解决方案总结
Aug 03 HTML / CSS
html5+css如何实现中间大两头小的轮播效果
Dec 06 HTML / CSS
详解使用postMessage解决iframe跨域通信问题
Nov 01 HTML / CSS
HTML中的表单元素介绍
Feb 28 HTML / CSS
微信小程序canvas实现水平、垂直居中效果
Feb 05 #HTML / CSS
Html5定位终极解决方案
Feb 05 #HTML / CSS
canvas简单连线动画的实现代码
Feb 04 #HTML / CSS
html5手机键盘弹出收起的处理
Jan 20 #HTML / CSS
canvas实现烟花的示例代码
Jan 16 #HTML / CSS
使用iframe+postMessage实现页面跨域通信的示例代码
Jan 14 #HTML / CSS
Html5跳转到APP指定页面的实现
Jan 14 #HTML / CSS
You might like
php 魔术函数使用说明
2010/02/21 PHP
codeigniter上传图片不能正确识别图片类型问题解决方法
2014/07/25 PHP
php字符比较函数similar_text、strnatcmp与strcasecmp用法分析
2014/11/18 PHP
PHP变量赋值、代入给JavaScript中的变量
2015/06/29 PHP
PHP strip_tags() 去字符串中的 HTML、XML 以及 PHP 标签的函数
2016/05/22 PHP
php两点地理坐标距离的计算方法
2018/12/29 PHP
JS setCapture 区域外事件捕捉
2010/03/18 Javascript
JavaScript 产生不重复的随机数三种实现思路
2012/12/13 Javascript
jQuery实现tab标签自动切换的方法
2015/02/28 Javascript
JS模拟酷狗音乐播放器收缩折叠关闭效果代码
2015/10/29 Javascript
JS实现单击输入框弹出选择框效果完整实例
2015/12/14 Javascript
AngularJS 过滤器(自带和自建)详解
2016/09/19 Javascript
js实现九宫格的随机颜色跳转
2017/02/19 Javascript
如何使用electron-builder及electron-updater给项目配置自动更新
2018/12/24 Javascript
Ant Design Vue 添加区分中英文的长度校验功能
2020/01/21 Javascript
浅谈vuex为什么不建议在action中修改state
2020/02/02 Javascript
Vue实现input宽度随文字长度自适应操作
2020/07/29 Javascript
js实现简易拖拽的示例
2020/10/26 Javascript
原生jQuery实现只显示年份下拉框
2020/12/24 jQuery
python使用Berkeley DB数据库实例
2014/09/26 Python
Python入门篇之条件、循环
2014/10/17 Python
PyTorch CNN实战之MNIST手写数字识别示例
2018/05/29 Python
python scp 批量同步文件的实现方法
2019/01/03 Python
python微信聊天机器人改进版(定时或触发抓取天气预报、励志语录等,向好友推送)
2019/04/25 Python
python实现同一局域网下传输图片
2020/03/20 Python
英国最大的香水商店:The Fragrance Shop
2018/07/06 全球购物
Calzedonia美国官网:意大利风格袜子、打底裤和沙滩装
2018/07/19 全球购物
什么是会话Bean
2015/05/14 面试题
GC是什么?为什么要有GC?
2013/12/08 面试题
开业庆典策划方案
2014/02/18 职场文书
车辆委托书范本
2014/10/05 职场文书
2015年南京大屠杀纪念日活动总结
2015/03/24 职场文书
2015小学教师年度工作总结
2015/05/12 职场文书
Python 数据可视化之Seaborn详解
2021/11/02 Python
JavaScript流程控制(分支)
2021/12/06 Javascript
《吸血鬼幸存者》新内容发布 追加多个全新模式
2022/04/07 其他游戏