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 ...
随机推荐
- STM32F4 LTDC学习
很久没有写东西了,也很久没看文档了吼吼,觉得有点无聊,找来F4看看,主要看F429.督促自己多看多记录. 首先配置同步时序先看参考手册 下面看一个实际例子,一块439的开发板 设置: LTDC_Ini ...
- Java 支持JavaScript脚本计算
Java支持了JavaScript脚本的执行计算能力: import javax.script.Invocable; import javax.script.ScriptEngine; import ...
- patch用法 （转载）
转载:http://shenze60.blog.163.com/blog/static/315747722009724113026896/ 首先介绍一下diff和patch.在这里不会把man在线文档 ...
- bzoj P2045 方格取数加强版【最大费用最大流】
今天脑子不太清醒,把数据范围看小了一直TTTTLE-- 最大费用最大流,每个格子拆成两个(x,y),(x,y)',(x,y)向(x,y)'连一条费用a[x][y]流量1的边表示选的一次,再连一条费用0 ...
- 阿里云CentOS7.4启动Tomcat9没有报错，端口已经开放，但是浏览器一直等待响应解决办法7
tomcat9,启动和退出均无报错.centOS7.4防火墙已关闭,阿里云防火墙已经开放端口,telnet测试服务器的端口也通过了,**浏览器访问以后没有提示"无法访问",而是一直 ...
- _bzoj1001 [BeiJing2006]狼抓兔子【平面图】
传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=1001 顺便推荐一个ppt,里面有对平面图的介绍:浅析最大最小定理在信息学竞赛中的应用. 这里 ...
- 如何用PS快速做出3D按钮效果的图片
1 先建立一个透明图层 2:再创建一个矩形 3:选用过喷样式 4: 双击图层并应用蓝色,记得这里应该复制下颜色的16进制值. 效果如图所示 取消光泽选项,大功告成! 最终效果如图所示,将其保存为PNG ...
- java数组实现买彩票（平移覆盖思想）
package com.wh.shuzu; /** * 买彩票 * @author 贾相如同学 * 平移覆盖思想 */ public class Lotery3 { public static voi ...
- poj2573Bridge（过桥问题）
链接 A,B为最快和次快 有两种方式可以使c,d过桥 一是a与c一起走,a回来接d再与d一起走,一直到对岸人为0为止 而是 a与b一起走 a回来送灯 c与d一起走 b回来送灯 重复此过程. 只剩2人时 ...
- 移动端UI自动化Appium测试——Windows系统Appium环境配置
1.安装JDK,官网下载即可,这里用的1.8,环境变量配置 2.安装Android sdk,API >= 17,环境变量配置 3.安装Nodejs,官网http://nodejs.org/dow ...