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制作的20种loading动效
Jul 05 HTML / CSS
CSS3混合模式mix-blend-mode/background-blend-mode简介
Mar 15 HTML / CSS
使用CSS3来制作消息提醒框
Jul 12 HTML / CSS
使用CSS3来实现滚动视差效果的教程
Aug 24 HTML / CSS
传统HTML页面实现模块化加载的方法
Oct 15 HTML / CSS
HTML5通过调用canvas对象的getContext()方法来获取绘图环境
Jun 23 HTML / CSS
详解HTML5中的manifest缓存使用
Sep 09 HTML / CSS
详解html5 postMessage解决跨域通信的问题
Aug 17 HTML / CSS
canvas学习总结三之绘制路径-线段
Jan 31 HTML / CSS
HTML5中 rem适配方案与 viewport 适配问题详解
Apr 27 HTML / CSS
不要在HTML中滥用div
May 08 HTML / CSS
html解决浏览器记住密码输入框的问题
May 07 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
实用函数2
2007/11/08 PHP
坏狼的PHP学习教程之第2天
2008/06/15 PHP
PHP ajax 分页类代码
2008/11/13 PHP
php使用类继承解决代码重复的问题
2015/02/11 PHP
四个常见html网页乱码问题及解决办法
2015/09/08 PHP
PHP常见数组函数用法小结
2016/03/21 PHP
PHP读书笔记整理_结构语句详解
2016/07/01 PHP
php源码的安装方法和实例
2019/09/26 PHP
PHP实现简单的计算器
2020/08/28 PHP
js的event详解。
2006/09/06 Javascript
CLASS_CONFUSION JS混淆 全源码
2007/12/12 Javascript
使用基于jquery的gamequery插件做JS乒乓球游戏
2011/07/31 Javascript
Java 正则表达式学习总结和一些小例子
2012/09/13 Javascript
解析Javascript中中括号“[]”的多义性
2013/12/03 Javascript
javascript匿名函数实例分析
2014/11/18 Javascript
jQuery的position()方法详解
2015/07/19 Javascript
使用JavaScript和CSS实现文本隔行换色的方法
2015/11/04 Javascript
JS倒计时实例_天时分秒
2017/08/22 Javascript
Vue下路由History模式打包后页面空白的解决方法
2018/06/29 Javascript
Angular Excel 导入与导出的实现代码
2019/04/17 Javascript
用js编写留言板
2020/03/17 Javascript
python+matplotlib绘制旋转椭圆实例代码
2018/01/12 Python
Python使用crontab模块设置和清除定时任务操作详解
2019/04/09 Python
TensorFlow基本的常量、变量和运算操作详解
2020/02/03 Python
python判断是空的实例分享
2020/07/06 Python
python 模拟登陆163邮箱
2020/12/15 Python
探究 canvas 绘图中撤销(undo)功能的实现方式详解
2018/05/17 HTML / CSS
英国知名的护肤彩妆与时尚配饰大型综合零售电商:Unineed
2016/11/21 全球购物
澳大利亚窗帘商店:Curtain Wonderland
2019/12/01 全球购物
一些Unix笔试题和面试题
2013/01/22 面试题
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢?
2016/08/18 面试题
高中体育教学反思
2014/01/24 职场文书
提取视频中的音频 Python只需要三行代码!
2021/05/10 Python
OpenCV3.3+Python3.6实现图片高斯模糊
2021/05/18 Python
Python3 多线程(连接池)操作MySQL插入数据
2021/06/09 Python
一些让Python代码简洁的实用技巧总结
2021/08/23 Python