js上传文件(压缩文件)

最新推荐文章于 2024-07-29 10:40:59 发布

唐僧 ——1

最新推荐文章于 2024-07-29 10:40:59 发布

阅读量5.9k

点赞数 4

分类专栏： js 压缩图片上传

本文链接：https://blog.csdn.net/qq_22560431/article/details/80883223

版权

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>XMLHttpRequest上传文件(压缩文件)</title>
		<script type="text/javascript">
			/*三个参数
			 * file：一个是文件(类型是图片格式)，
			 * w：一个是文件压缩的后宽度，宽度越小，字节越小
			 * objDiv：一个是容器或者回调函数
			 * photoCompress()
			 */

			function photoCompress(file, w, objDiv) {
				var ready = new FileReader();
				/*开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容.*/
				ready.readAsDataURL(file);
				ready.onload = function() {
					var re = this.result;
					canvasDataURL(re, w, objDiv)
				}
			}

			function canvasDataURL(path, obj, callback) {
				var img = new Image();
				img.src = path;
				img.onload = function() {
					var that = this;
					// 默认按比例压缩
					var w = that.width,
						h = that.height,
						scale = w / h;
					w = obj.width || w;
					h = obj.height || (w / scale);
					var quality = 0.7; // 默认图片质量为0.7
					//生成canvas
					var canvas = document.createElement('canvas');
					var ctx = canvas.getContext('2d');
					// 创建属性节点
					var anw = document.createAttri