手机用户拍的照片通常会有2M以上，这对服务器带宽产生较大压力。
因此在某些应用下（对图片要求不那么高）我们可以在客户端来压缩图片，然后再提交给服务器。
总体思路是：
1. 使用HTML5的FileReader接口来读取用户上传的图片
2. 使用canvas drawImage接口绘制到Canvas 2d中
3. 使用canvas toDataUrl接口把图片转成base64编码字符串（这里可以降低图片质量）
4. 完成image src的替换后，表单提交时，就提交新的被压缩过的图像
这里不重复贴代码，直接看在线演示：http://wow.techbrood.com/fiddle/30625
该方案支持IE10+, FF, Chrome, Safari等现代浏览器。
有两点需要注意：
1. 注意在FF下，类似这样的处理方案必须确保canvas绘制和toDataUrl的处理是同步进行的，
也就是不能是异步处理的，否则可能会出现其他事件触发页面组合（Composite）而导致canvas缓存被清空的情况，那样toDataUrl出来的会是空白字符串。
2. 需要等image加载完成再做draw和转换的动作，否则一些浏览器会有问题。
by iefreer
分享到：
相关推荐
当用户选择图片后，lrz会自动进行压缩，压缩完成后调用七牛的上传接口，将图片上传到指定的空间。 以下是一个基本的使用流程： - 初始化lrz，设置压缩参数。 - 监听文件选择事件，读取图片文件并调用lrz的...
- 在表单提交中，可以预先压缩用户上传的图片，减少服务器处理的压力。 - 在Web应用中，动态生成缩略图时，可以先压缩图片，然后再进行尺寸裁剪。 - 在实时聊天或社交媒体应用中，压缩图片可以降低网络传输的数据...
在JavaScript的世界里，图片压缩和上传是Web应用中常见的需求，尤其在用户需要上传大量或大尺寸图片时，为了提高加载速度和节省服务器存储空间，压缩图片变得至关重要。本项目提供的"localResizeIMG3-3.0.20"是一个...
- 由于Canvas的`toDataURL()`方法可能涉及跨域问题，确保在处理用户上传图片时，遵循同源策略或设置正确的CORS策略。 - 图片压缩过程中，要注意防止恶意图片上传，例如XSS攻击，可以通过检查图片类型和内容来过滤...
因此，为了满足这一需求，我们需要对其进行二次封装，以便在用户上传图片之前对其进行压缩。 图片质量压缩是通过调整图片的位深度、颜色模式和编码方式来减小文件大小的一种方法。在JavaScript中，我们可以利用...
4. **图片压缩**：在上传前对图片进行压缩，减少网络传输的数据量，尤其在手机环境下，能够显著提升上传速度并节省流量。 5. **预览功能**：用户在上传前可以预览图片，增加了交互性和准确性。 6. **文件类型过滤*...
根据给定文件的信息，本文将深入探讨“图片上传压缩处理”的相关知识点，包括该功能的重要性、实现原理以及具体的代码分析。 ### 图片上传压缩处理的重要性 在互联网应用中，图片是用户界面的重要组成部分之一。...
- 图片上传过程中应考虑安全问题，如防止XSS攻击，可以通过转码、过滤特殊字符等方式处理用户上传的数据。 - 对于敏感内容的图片，可能需要进行隐私保护处理，如添加水印或模糊处理。 综上所述，单张图片上传压缩...
alert('请上传图片'); continue; } // 检查图片大小，这里省略... } ``` 图片的压缩通常使用HTML5的Canvas API，因为Canvas可以将图片数据转化为可操作的数据URL。FileReader API提供了一系列方法读取文件内容...
在某些场景下，为了优化网站性能和减少服务器存储空间，我们可能需要限制用户上传的图片大小，或者在上传过程中自动对过大的图片进行压缩。标题和描述提到的问题，就是在KindEditor中实现这一功能的方法。 首先，...
本文将详细讨论如何使用JavaScript（js）来压缩图片，并将其转换为Base64编码进行上传。这一技术常用于前端开发，以提升用户体验并降低服务器压力。 首先，我们需要了解JavaScript中的Image对象。这是处理图片的...
在JavaScript（JS）开发中，图片的剪切与压缩上传是一项常见的需求，特别是在网页应用中，用户可能需要上传个人头像或产品图片等。这个压缩包提供了一个完整的图片裁剪和压缩上传的Demo，它不依赖任何特定的前端框架...
微信小程序上传图片并压缩的实现涉及几个关键步骤，包括选择图片、将图片绘制到canvas上以及上传处理后的图片。下面将详细介绍这些步骤中涉及的知识点。 首先，我们需要理解微信小程序提供了哪些API来实现这些功能...
在移动端，用户可能拍摄或选择大尺寸的图片，这些图片如果未经压缩直接上传，不仅会占用大量存储空间，而且可能导致网络传输速度慢，用户体验不佳。因此，我们需要在前端对图片进行压缩，降低其质量和大小。这通常...
这个项目标题和描述中的"图片上传 图片压缩 上传压缩 HTML+JS"表明我们将探讨如何利用HTML和JavaScript实现这个功能。下面将详细阐述这一过程。 首先，我们从HTML部分开始。在HTML中，我们需要创建一个表单让用户...
在现代Web应用中，用户经常需要上传图片，特别是在社交媒体、电子商务网站或个人博客等平台。然而，原始的高分辨率图片可能会导致文件大小过大，从而延长上传时间，甚至可能超出服务器的存储限制。针对这一问题，...
在JavaScript和Vue.js开发中，有时我们需要处理用户上传的图片，特别是当图片尺寸过大时，为了提高用户体验和网络效率，我们需要在前端实现图片的压缩上传。这篇文档将介绍如何使用Vue.js结合HTML5的Canvas API来...
这通常意味着在用户上传图片后，编辑器会自动对图片进行压缩，降低其文件大小，从而减少服务器负担和提高页面加载速度。图片压缩可能采用了常见的图像处理库，如JavaScript的`compress.js`或`jpeg-js`，它们能够实现...
在实际开发中，"src"目录通常包含JavaScript、CSS和其他资源文件，而"test"目录则包含单元测试或集成测试用例，用于验证图片压缩和上传功能的正确性。 总的来说，H5图片压缩与上传涉及了HTML5的Canvas、FileReader...
JavaScript 图片压缩插件是一种用于优化用户在网页上上传大...总之，JavaScript 图片压缩插件如 `LocalResizeIMG.js` 在现代网页应用中起着至关重要的作用，它们有效地解决了大尺寸图片上传的难题，提高了用户体验。