基于web html5+js的图片压缩上传技术研究

《基于web html5+js的图片压缩上传技术研究》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、为了确保“教学点数字教育资源全覆盖”项目设备正常使用，我校做到安装、教师培训同步进行。设备安装到位后，中心校组织各学点管理人员统一到县教师进修学校进行培训，熟悉系统的使用和维护。基于webhtml5+js的图片压缩上传技术研究　　摘要：能够在上传到服务器之前进行图片压缩处理，也就是在客户端进行图片的处理需求一直都在，对于原生APP来说，具有原生API，图片处理很简单，而对于B/S应用来说，没有原生AIP的支持，处理图片就变得有些棘手。就当前的技术发展来说，可以通过对算法的实现来解决图片的压缩，客户端的解析能力并没有想象中那么强大，算法的运行

2、环境需要强的解析环境，同时，实现算法也会增加很大的代码量。　　关键词：；javascript；图片压　　1相关理论与技术介绍　　Web技术　　技术标准方面，XX年W3C期望发展是，XX年W3C放弃了改进的标准发展。当前W3C和WHATWG都在进行html5规范的修订和发展。其中W3C致力于对html5的展示层面，包括很多新的元素的制定，WHATWG致力在开发的角度进行改进。移动Web应用使用Web技术来构建，用网页语言进行撰写，并通过网页浏览器在互联网或企业内部网上执行。　　HTML5关键技术为了充分发挥“教学点数字教育资源全覆盖”项目设备

3、的作用，我们不仅把资源运用于课堂教学，还利用系统的特色栏目开展课外活动，对学生进行安全教育、健康教育、反邪教教育等丰富学生的课余文化生活。为了确保“教学点数字教育资源全覆盖”项目设备正常使用，我校做到安装、教师培训同步进行。设备安装到位后，中心校组织各学点管理人员统一到县教师进修学校进行培训，熟悉系统的使用和维护。　　HTML5有两大特点：首先，强化了Web网页的表现性能。其次，追加了本地数据库等Web应用的功能。图片在线处理功能的实现正是通过HTML5强化网页表，追加的canvas标签实现的，在开发图片在线处理功能时，项目首先是通过HTM

4、L5技术实现的。HTML5图片在线处理包括四大功能，剪裁、缩放、旋转、水印。这些可以通过canvas标签调用HTML5内置API分别实现。　　XMLHTTPrequest　　XMLHttpRequest是一个API对象，其中的方法可以用来在浏览器和服务器端传输数据。这个对象是浏览器的js环境提供的。从XHR获取数据的目的是为了持续修改一个加载过的页面，XHR是Ajax设计的底层概念。XHR使用的协议不同于HTTP，不仅可以使用XML格式的数据，也支持JSON，HTML或者纯文本。　　2Web前端图片压缩处理技术研究　　前端操作的性能指标为了

5、充分发挥“教学点数字教育资源全覆盖”项目设备的作用，我们不仅把资源运用于课堂教学，还利用系统的特色栏目开展课外活动，对学生进行安全教育、健康教育、反邪教教育等丰富学生的课余文化生活。为了确保“教学点数字教育资源全覆盖”项目设备正常使用，我校做到安装、教师培训同步进行。设备安装到位后，中心校组织各学点管理人员统一到县教师进修学校进行培训，熟悉系统的使用和维护。　　正如项目前期无框架可言一样，移动Web前端开发前期除了建立尽量完善的移动开发规范来避兔不必要的性能问题外，同样无法过度追求性能优化。多数的前端性能优化方案来自于权衡的结果。因此，前端

6、性能优化的工作往往放在应用开发到一定阶段后开展，以及项目正式上线后定期进行维护。在对移动图片社交Web应用进行前端性能优化之前，需要进行应用整体的性能测试，并根据性能测试分析结果制定优化方案加以应用。前端性能指标主要包括加载时间指标，资源情况指标和网络连接指标。　　基本原理　　图像数据之所以能被压缩，就是因为数据中存在着冗余。图像数据的冗余主要表现为：图像中相邻像素间的相关性引起的空间冗余；图像序列中不同帧之间存在相关性引起的时间冗余；不同彩色平面或频谱带的相关性引起的频谱冗余。数据压缩的目的就是通过去除这些数据冗余来减少表示数据所需的比特

7、数。由于图像数据量的庞大，在存储、传输、处理时非常困难，因此图像数据的压缩就显得非常重要。　　大体思路如下：　　利用FileReader，读取blob�ο螅�或者是file对象，将图片转化为datauri的形式。使用canvas，在页面上新建一个画布，利用canvas提供的API，将图片画入这个画布当中。利用，进行图片的压缩，得到图片的datauri的值。上传文件。　　文件上传方式　　文件上传有2种方式：　　将图片转化为base64：可以通过xhrajax或者xhr2FormData进行提交。　　将图片数据转为Blob对象，使用FormDa

8、ta上传文件：Blob对象是无法注入到FormData对象当中的，当拿到了图片的datauri数据后，将其转化为Blob数据类型。为了充分发挥“教学点数字教育资源全覆盖”项目设备