js 图片压缩上传（base64位）以及上传类型分类

一、input file上传类型

1.指明只需要图片

<input type="file" accept='image/*'>

2.指明需要多张图片

<input type="file" multiple accept='image/*'>

3.指明调用摄像头获取图片

<input type="file" capture='camera' accept='image/*'>

4.调用摄像头并获取多张图片（摄像头只能单张获取，multiple无效）

<!-- multiple 无效 -->
<input type="file" multiple capture='camera' accept='image/*'>

二、图片压缩上传

（1）移动端IOS上传的某些图片预览时发生了旋转？

　　你会发现手机截图，网络图片都不会有旋转问题，只有手机拍摄的才有，这就跟拍摄时的角度有问题了，所以我们通过 exif.js 获取角度（Orientation）的值，所获值分别需要旋转的角度如下：

旋转角度	参数值
0°	1
顺时针90°	6
逆时针90°	8
180°	3

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><script src="js/jquery-1.11.3.min.js"></script><script src="js/exif.js"></script><style>#preview{width:100px;height:110px;}</style></head><body><input type="file" id="files" ><img src="blank.gif" id="preview"><script>var ipt = document.getElementById('files'),img = document.getElementById('preview'),Orientation = null;
ipt.onchange = function () {var file = ipt.files[0],reader = new FileReader(),image = new Image();if(file){EXIF.getData(file, function() {  Orientation = EXIF.getTag(this, 'Orientation');console.log(Orientation);});reader.onload = function (ev) {image.src = ev.target.result;image.onload = function () {var imgWidth = this.width,imgHeight = this.height;// 控制上传图片的宽高if(imgWidth > imgHeight && imgWidth > 600){imgWidth = 600;imgHeight = Math.ceil(600 * this.height / this.width);}else if(imgWidth < imgHeight && imgHeight > 600){imgWidth = Math.ceil(600 * this.width / this.height);imgHeight = 600;}var canvas = document.createElement("canvas"),ctx = canvas.getContext('2d');canvas.width = imgWidth;canvas.height = imgHeight;if(Orientation && Orientation != 1){switch(Orientation){case 6:     // 旋转90度
                            canvas.width = imgHeight;    canvas.height = imgWidth;    ctx.rotate(Math.PI / 2);
                            ctx.drawImage(this, 0, -imgHeight, imgWidth, imgHeight);break;case 3:     // 旋转180度
                            ctx.rotate(Math.PI);    ctx.drawImage(this, -imgWidth, -imgHeight, imgWidth, imgHeight);break;case 8:     // 旋转-90度
                            canvas.width = imgHeight;    canvas.height = imgWidth;    ctx.rotate(3 * Math.PI / 2);    ctx.drawImage(this, -imgWidth, 0, imgWidth, imgHeight);break;}}else{ctx.drawImage(this, 0, 0, imgWidth, imgHeight);}var newImageData = canvas.toDataURL("image/jpeg", 0.6);$("img").attr("src", newImageData.replace("data:base64", "data:image/jpeg;base64"));}}reader.readAsDataURL(file);}
}
</script></body>
</html>

转载于:https://www.cnblogs.com/wj19940520/p/10207321.html

js 图片压缩上传（base64位）以及上传类型分类相关推荐

JS 图片压缩上传并在iOS中矫正方向
JS 图片压缩上传并在iOS中矫正方向最近在项目中,用到图片上传.如果不进行压缩再上传的话,动辄34兆的图片,上传起来会相当漫长.还有一点就是,在iOS中所拍摄的图片在本地显示是没有问题的,但是上传 ...
微信内置浏览器无法使用input图片上传和lrz.bundle.js图片压缩插件
标题微信内置浏览器无法使用input图片上传和lrz.bundle.js图片压缩插件图片上传功能作为一个比较常见的功能,有时候需要在微信内置浏览器里打开,但是有些型号的手机会出现打不开的现象,点击 ...
js图片压缩后上传方法,图片超过1M先进行压缩，然后再上传
js图片压缩后上传方法,图片超过1M先进行压缩,然后再上传图片上传目录 js图片压缩后上传方法,图片超过1M先进行压缩,然后再上传 html代码 js代码 html代码 <input type ...
js图片压缩并上传？
js: var eleFile = document.querySelector('#file'); // 压缩图片需要的一些元素和对象 var reader = new FileReader(); ...
JS—图片压缩上传（单张）
*vue+webpack环境,这里的that指到vue实例 <input type="file" name="file" accept="ima ...
js图片压缩java上传,JS实现异步上传压缩图片
摘要: 使用iframe来处理异步上传图片,在现在这个时代来说,多多少少都有点落后了!单单就凭AJAX和JS就不能做到异步上传图片了吗? 先看调用页面: 选择图片 var img; $("i ...
base64的php文件上传,PHP传统文件上传和Base64位文件上传
一.基本知识通过使用 PHP 的全局数组 $_FILES,你可以从客户计算机向远程服务器上传文件. 第一个参数是表单的 input name,第二个下标可以是 "name", & ...
JS图片压缩预览/下载
前言好像没啥好说的~ 大概做法先由filereader获取图片的base64,控制图片生成,但不显示. 然后将图片按比例设置好压缩后的宽高绘制在canvas画布上. 之后利用canvas的自带方法 ...
前端JS图片压缩处理
2020-10 分享近期工作遇到了用户上传图片由前端压缩图片大小,再传到OSS.这样可以减少用户上行传输的数据量,减少用上传的等待时长,优化用户体验. 方案:利用js现成canvas. Canvas ...

js 图片压缩上传（base64位）以及上传类型分类

js 图片压缩上传（base64位）以及上传类型分类相关推荐

最新文章

热门文章