html提交form预处理,HTML5 之图片上传预处理

在开发 H5 应用的时候碰到一个问题,

应用只需要一张小的缩略图,

而用户用手机上传的确是一张大图,

手机摄像机拍的图片好几 M,这可要浪费很多流量。

获取图片

通过 File API 获取图片。

var input = document.createElement('input');

input.type = 'file';

input.addEventListener('change', function() {

var file = this.files[0];

},false);

input.click();

预览图片

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

但是我一般用的createObjectURL()方法比较多

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);

上传缩略图

使用HTML5的新API formData来实现图片的ajax上传

canvas.toBlob(function(blob) {

var form = new FormData();

form.append('file', blob);

fetch('/api/upload', {method: 'POST', body: form});

});

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/265265.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

PID算法实现温控

参考:PID算法 作者:hillchina 发布时间: 2016-09-28 21:48:04 网址:https://www.bilibili.com/video/BV1Ds411t7Hr 以上完整的视频教程在腾讯课堂里有,在腾讯课堂里搜索PID,找到灵育科技,课程对…

React.js

类似于Jquery,主要是操作Dom 特点:1、基于组件开发 2、基于虚拟dom,速度快 用React的所需要引入的三个包: 1、react.min.js (引入React语法) 2、react-dom.min.js (用react操作Dom)…

[Unity3d]多个摄像机叠加效果

今天学习到一个多个摄像机看到的场景在同一个层显示,比如我们做一个类似反光镜的效果,当然反光镜可以直接用Shader来实现,但我就是了实现一个类比这样的一个效果,一个摄像机将看到的图像显示到一个Texture上,然后将Tex…

单片机程序跑飞原因

参考:单片机程序又跑飞? 作者:嵌入式ARM 网址:https://mp.weixin.qq.com/s/a22zVdSfCqWjSmlBxK2R1Q 目录数组越界/溢出中断服务程序缺失看门狗复位单片机中有看门狗,长时间不喂狗,程序就会复位。为什么长时…

html5大赛是什么,IE9开发大赛为HTML5打了一针兴奋剂

尽管HTML5是一种新的网页浏览标准,目前仅有苹果和微软的IE9支持该标准。客观地说,HTML5还是小众用户的标准。对于IE9来说,如果HTML5标准无法普及,IE9的硬件加速和性能优势就无从体现。加之Adobe一直力挺Flash,这对HTML…

apicloud手机查看效果

1.wifi全量同步 2.本地编译 需要在同一个WiFi中,WiFi全量同步,手机才会接受文件当代码改动时,需要本地编译后进行下载 如果是在海马模拟器上看效果,直接选择云编译自定义apploader-编译-下载apk文件-直接把apk文件拖进海马模拟器 …

Java关键字final使用详解

2019独角兽企业重金招聘Python工程师标准>>> http://docs.oracle.com/javase/tutorial/java/IandI/final.htmlWriting Final Classes and MethodsYou can declare some or all of a classs methods final. You use the final keyword in a method declaration to in…

一行代码揭开CPU执行原理

参考:一行代码,揭开CPU执行原理! 作者:嵌入式ARM 网址:https://mp.weixin.qq.com/s/qFnKhWqBGRCFAnp_KC1dmw 目录1、高级语言2、编译链接3、机器指令4、指令格式5、执行指令拓展总结很多刚刚入坑的小白可能对此完全没有…

html链接txt文件,怎么在TXT文件中建立超链接

参考方法如下:1、在桌面鼠标依次右键——新建——文本文档;2、在记事本中输入命令:echo off echo 正在清除系统垃圾文件,请稍等...... del /f /s /q %systemdrive%\*.tmp del /f /s /q %systemdrive%\*._mp del /f /s /q %systemd…

spark 2.4安装

1、spark 官网选择对应Hadoop的版本,之前安装的Hadoop版本为hadoop-3.0.2,获取下载包:wget http://mirrors.hust.edu.cn/apache/spark/spark-2.4.0/spark-2.4.0-bin-hadoop2.7.tgz2、解压缩安装包,创建软连接:tar -zxv…

redhat 挂载 iso文件 提示 mount :not a directory

redhat 挂载 iso文件 提示 mount :not a directory posted on 2013-12-28 22:26 秦瑞It行程实录 阅读(...) 评论(...) 编辑 收藏 转载于:https://www.cnblogs.com/ruiy/p/errors.html

C语言常见编译错误及分析

更多干货推荐可以去牛客网看看,他们现在的IT题库内容很丰富,属于国内做的很好的了,而且是课程刷题面经求职讨论区分享,一站式求职学习网站,最最最重要的里面的资源全部免费!!!点击进…

计算机组成原理实验 组装实验报告,计算机组成原理实验一实验报告..doc

计算机组成原理实验一实验报告.实验一 运算器实验算术逻辑运算器实验目的:掌握算术逻辑运算器单元ALU(74LS181)的工作原理掌握简单运算器的数据传送通道验算由74LS181等组合逻辑电路组成的运算功能发生器运算功能按给定数据,完成实验指定的算术/逻辑运算…

FIS.js前端开发的使用说明文档

文档结构什么是FIS部署FISFIS基本使用模块定义加载方式调用Tangram 2.0一.什么是FIS FIS提供了一套贯穿开发流程的开发体系和集成开发环境,为产品线提供前端开发底层架构,这能帮助工程师提高开发效率,沟通协作效率,快速实现需求并…

典型用户和用户场景描述

场 景 / 故 事 / Story 版权信息 :大浪淘沙 版本信息 :Beta Version(测试版) 维护人信息:热心市民隔壁老王 版本记录:目前版本为第一期测试版 1.背景: (一)典…

面经——嵌入式常见面试题总结100题(上)

更多干货推荐可以去牛客网看看,他们现在的IT题库内容很丰富,属于国内做的很好的了,而且是课程刷题面经求职讨论区分享,一站式求职学习网站,最最最重要的里面的资源全部免费!!!点击进…

计算机专业运动会口号,运动会口号押韵有气势 计算机系霸气口号

淡泊明志,宁静致远,团结友爱,顽强拼搏。下面是文艺范收集的运动会口号押韵有气势,计算机系霸气口号,欢迎阅读收藏。1、球进了球,分了就会,不怕**,战无不胜。2、阳光运动,…

1. 观察者模式总结(C++)

1. 介绍 观察者模式:定义了一种“一对多”的依赖关系,让多个观察者对象同时监听一个对象的改变,即当该对象的状态发现改变时,会通知所有它依赖的观察者对象。观察者模式属于行为模式。 意图:定义对象间的一种一对多的依…

面经——嵌入式常见面试题总结100题(下)

更多干货推荐可以去牛客网看看,他们现在的IT题库内容很丰富,属于国内做的很好的了,而且是课程刷题面经求职讨论区分享,一站式求职学习网站,最最最重要的里面的资源全部免费!!!点击进…

学计算机要不要护发,脱发平时应该注意什么 四个妙招教你如何防止脱发

头发一掉,失去的不仅仅是发丝,还有美丽与颜值,一把把辛酸泪只能往肚子里吞。秃头星人们,如果已经脱发了,日常一定要加倍注意哦,一些错误的护发方法不要踩坑,护理、食疗、良好的生活作息&#xf…