js 上传图片、压缩、旋转
亲测
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>js上传图片</title>
<script src="/exif.js"></script>
</head>
<body>
<input id="file" type="file"> <script type="text/javascript">
var fileTypes = ['image/jpeg', 'image/gif', 'image/png'];
window.onload = function myfunction() {
var input = document.getElementById('file');
input.onchange = function () {
var files = this.files;
for (var i = 0, len = files.length; i < len; i++) {
var file = files[i];
if (!fileTypes.includes(file.type)) {
alert("只可上传图片")
return false;
}
if (file.size / 1024 > 1025) {
photoCompress(file, { quality: 0.3 }, upload_html5);
}
else {
upload_html5(file);
}
}
};
} function upload_html5(file) {
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", function (e) { }, false);
xhr.addEventListener("load", function (e) {
var obj = JSON.parse(e.target.responseText);
if (obj.code == 200) {
alert("上传成功");
}
else {
alert(obj.message);
}
}, false);
xhr.addEventListener("error", function (e) {
console.log(e);
alert("上传失败");
}, false);
xhr.addEventListener("abort", function (e) {
alert("上传取消");
}, false); var fd = new FormData;
fd.append("file", file);
fd.append("hallName", '分会场1');
fd.append("dateTime", '2019-06-21');
xhr.open("post", "/Common/UploadFile");
xhr.send(fd);
} /*
三个参数
file：一个是文件(类型是图片格式)，
w：一个是文件压缩的后宽度，宽度越小，字节越小
objDiv：一个是容器或者回调函数
photoCompress()
*/
function photoCompress(file, obj, objDiv) {
var Orientation = null;//ios选择上传图片是图片角度问题
EXIF.getData(file, function () {
EXIF.getAllTags(this);
Orientation = EXIF.getTag(this, 'Orientation');
});
var ready = new FileReader();
/*开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,
* 如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容.*/
ready.readAsDataURL(file);
ready.onload = function () {
canvasDataURL(this.result, obj, Orientation, objDiv)
}
}
function canvasDataURL(path, obj, Orientation, 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.createAttribute("width");
anw.nodeValue = w;
var anh = document.createAttribute("height");
anh.nodeValue = h;
canvas.setAttributeNode(anw);
canvas.setAttributeNode(anh); if (Orientation != "" && Orientation != 1 && Orientation != undefined) {
switch (Orientation) {
case 6://需要顺时针90度旋转
canvas.width = h;
canvas.height = w;
ctx.rotate(90 * Math.PI / 180);
ctx.drawImage(this, 0, -h);
break;
case 8://需要逆时针90度旋转
canvas.width = h;
canvas.height = w;
ctx.rotate(-90 * Math.PI / 180);
ctx.drawImage(this, -w, 0);
break;
case 3://需要180度旋转
ctx.rotate(180 * Math.PI / 180);
ctx.drawImage(this, -w, -h);
break;
}
}
else {
ctx.drawImage(that, 0, 0, w, h);
}
// 图像质量
if (obj.quality && obj.quality <= 1 && obj.quality > 0) {
quality = obj.quality;
}
// quality值越小，所绘制出的图像越模糊
var base64 = canvas.toDataURL('image/jpeg', quality);
// 回调函数返回base64的值
callback(base64);
}
}
/**
* 将以base64的图片url数据转换为Blob
* @param urlData
* 用url方式表示的base64图片数据
*/
function convertBase64UrlToBlob(urlData) {
var arr = urlData.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], { type: mime });
} </script>
</body>
</html>
js 上传图片、压缩、旋转的更多相关文章
- JS 上传图片压缩，原比例压缩
复制 粘贴 改吧改吧就可用,原生js var fileObj = file.file;//原文件 file是我用vue-vant里的组件,里边有file(原文件)和content(base64) 其它 ...
- js上传图片压缩，并转化为base64
<input type="file" onchange="startUpload(this,'front')" id="renm"/& ...
- layui中实现上传图片压缩
一.关于js上传图片压缩的方法,百度有很多种方法,这里我参考修改了一下: function photoCompress(file, w, objDiv) { var ready = new FileR ...
- 使用ajax上传图片，支持图片即时浏览，支持js图片压缩后上传给服务器
使用ajax上传图片,支持图片即时浏览,支持js图片压缩后上传给服务器 ajax上传主要使用了 var reader = new FileReader() 此方法 js图片压缩主要是利用canvas进 ...
- 原生 js 上传图片
js <!doctype html> <html> <head> <meta charset="utf-8"> <title& ...
- JS,html压缩及混淆工具
现在已经出现了不少有自己特色的: JSMin Javascript compressor Packer Closure Compiler YUI Compressor Pretty Diff Java ...
- gulpfile.js 合并压缩 requirejs 的配置文件
var gulp = require("gulp"); // var babel = require("gulp-babel"); // 用于ES6转化ES5 ...
- js实现图片旋转、模板文件查看图片大图之记录篇[二]
一个小小的前端需求送给大家,使用js实现图片旋转,并且点击图片能够实现规定格式的大图. 主要使用的是jQuery的delegate()方法实现图片旋转,该方法主要的功能就是给某个组件绑定一个或一组事件 ...
- c#使用js上传图片
前几天朋友说用js上传图片过去遇到点问题,于是自己也想写一个demo这里就把自己挖的坑填了. 话不多说上代码 前台就一个file控件加按钮 <!DOCTYPE html> <html ...
随机推荐
- CodeForces-427D：Match & Catch （后缀自动机）
Police headquarter is monitoring signal on different frequency levels. They have got two suspiciousl ...
- 洛谷P3004 宝箱Treasure Chest——DP
题目:https://www.luogu.org/problemnew/show/P3004 似乎有点博弈的意思,但其实是DP: f[i][j] 表示 i~j 的最优结果,就可以进行转移: 注意两个循 ...
- Java-Runoob-高级教程-实例-字符串：12. Java 实例 - 字符串优化
ylbtech-Java-Runoob-高级教程-实例-字符串:12. Java 实例 - 字符串优化 1.返回顶部 1. Java 实例 - 字符串优化 Java 实例 以下实例演示了通过 Str ...
- 三步升级已安装的 Android SDK 和 ADT 插件（转载）
转载:http://www.tfan.org/update-adt-and-android-sdk-in-five-minutes/ 如何快速地把已安装的 Android SDK 及 Eclipse ...
- Tomcat配置JVM运存
setenv.bat set "JAVA_OPTS=-server -Xms256M -Xmx1024M -XX:PermSize=256m -XX:MaxPermSize=1024m&qu ...
- bzoj 1597: [Usaco2008 Mar]土地购买【斜率优化】
按xy降序排序,把能被完全包含的去掉 然后就得到了x升序y降序的一个数组 然后方程就显然了:f[i]=min(f[j]+y[j+1]x[i]) 斜率优化转移 说起来我还不会斜率优化呢是不是该学一下了 ...
- python安装教学
1.首先登陆到python的官方网站 1https://www.python.org/ 2.鼠标放在Download上,点击下面对应的型号,我的是Windows 3.点击Windows到此页面,点击3 ...
- Elasticsearch 2.3.2 安装部署
先按照http://blog.csdn.net/love13135816/article/details/51690280这个教程安装, 不过后面的IK分词器安装部分有问题. 所以中文分词器插件的安装 ...
- 安装ipython解释器
安装ipython解释器 1.安装ipython,指定douban源下载 pip3 install -i https://pypi.douban.com/simple ipython 2.安装朱皮特 ...
- python包管理工具他们之间的关系
python包管理工具之间的关系 现在的python包管理工具有很多,非常混乱,必须理清他们之间的关系才能更好的使用python构建强大的包关系系统工具. 首先:python官方推荐的第三方库是PyP ...