压缩上传图片
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <img src="" alt="" id="img1"/> <input class="hide_input" type="file" name="imageFiles" id="img" onchange="showimg(this,'#img1')"/> <script src="jquery-2.0.0.min.js"></script> <script> function showimg(inputId,imgId) { var file =inputId.files[0];//获取input file控件选择的文件 ImgToBase64(file, 450, function (base64) { $(imgId)[0].src = base64;//预览页面上预留一个img元素,载入base64 }); } function ImgToBase64(file, maxLen, callBack) { var img = new Image(); var reader = new FileReader();//读取客户端上的文件 reader.onload = function () { var url = reader.result;//读取到的文件内容.这个属性只在读取操作完成之后才有效,并且数据的格式取决于读取操作是由哪个方法发起的.所以必须使用reader.onload, img.src = url;//reader读取的文件内容是base64,利用这个url就能实现上传前预览图片 }; img.onload = function () { //生成比例 var width = img.width, height = img.height; //计算缩放比例 var rate = 1; if (width >= height) { if (width > maxLen) { rate = maxLen / width; } } else { if (height > maxLen) { rate = maxLen / height; } }; img.width = width * rate; img.height = height * rate; //生成canvas var canvas = document.createElement("canvas"); var ctx = canvas.getContext("2d"); canvas.width = img.width; canvas.height = img.height; ctx.drawImage(img, 0, 0, img.width, img.height); var base64 = canvas.toDataURL('image/jpeg', 0.9); callBack(base64); }; reader.readAsDataURL(file); } </script> </body> </html>
相关推荐
-
JavaScript 操作cookie javascript
2019-1-8
-
canvas雨滴特效 javascript
2019-1-8
-
404页面 结合了一个闯迷宫的小游戏 javascript
2019-1-8
-
原生javasxript获取浏览器的滚动距离和可视窗口的高度 javascript
2019-1-8
-
ajax方式验证登录系统 javascript
2019-1-8
-
判断当前客户端是否移动设备 javascript
2019-1-8
-
js存、取、删cookie javascript
2019-1-8
-
判断手机横屏和竖屏方向 javascript
2019-1-7
-
eslintrc配置项 javascript
2019-1-8
-
微信自带返回按钮自定义事件 javascript
2019-1-7