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 ...
随机推荐
- ubuntu搭建开发环境踩坑实录
谨以此文,记录和ubuntu系统不死不休的搏斗过程,后续待补. 1.双系统安装,windows采用uefi模式安装(优启通可制作uefi的win10安装盘),ubuntu不要划分boot区,而应该划分 ...
- Gym 100512B Betting Fast (题意+概率)
题意:你开始有 s 元钱,然后你要在 t 场内赚到 n 元,每次赢的概率是 p,并且要越快越好. 析:当时没注意这个条件,要越快越好,然后写概率dp,怎么看也不像是对.其实是每次赌 min(s, n- ...
- ASP.NET Core MVC 打造一个简单的图书馆管理系统 (修正版)（三）密码修改以及密码重置
前言: 本系列文章主要为我之前所学知识的一次微小的实践,以我学校图书馆管理系统为雏形所作. 本系列文章主要参考资料: 微软文档:https://docs.microsoft.com/zh-cn/as ...
- mybatis基础学习4-插件生成器(根据数据库的表生成文件)
1:安装(根据数据库的表生成文件) 2:在所建项目单击右键输入mybatis如下图 *建项目文件时不用建包和类,插件可以根据数据表自动生成,在配置文件(generatorConfig.xml)里写即可 ...
- 组件-实体-系统 Entiy-Compoent-System ECS架构整理
继承体系的问题,为什么要用ECS 面向对象的问题 当一个新的类型需要多个老类型的不同功能的时候,不能很好的继承出来 游戏开发后期会有非常多的类,很难维护 游戏中子系统很多,它们对一个对象的关注点往往互 ...
- 徐州联赛选拔赛 - 计算IP地址值
题目链接 思路:这是一道非常简单的题目,直接用公式计算就好了.对于IP地址a.b.c.d,转换为十进制数就是(a<<24)|(b<<16)|(c<<8)|d.唯一要 ...
- CentOS 7安装并设置启动图形桌面
服务器端有时没有安装图形桌面,采用下面的步骤安装gnome桌面,并能够启动后进入图形桌面 1.安装图形环境 #yum grouplist#yum groupinstall 'GNOME Desktop ...
- quickpow || 快速幂
洛谷例题 推荐自行脑补:百度百科 如果 ,那么 : 前言:快速幂就是快速算底数的n次幂.其时间复杂度为 O(log₂N), 与朴素的O(N)相比效率有了极大的提高. 拿题目样例 Input :2 1 ...
- 使用方向变换（directional transform）图像分块压缩感知
论文的思路是先介绍分块压缩感知BCS,然后介绍使用投影和硬阈值方法的迭代投影方法PL,接着将PL与维纳滤波器结合形成SPL(平滑PL),并且介绍了稀疏表示的几种基,提出了两种效果较好的稀疏基:CT与D ...
- 水题 Gym 100553K Knockout Racing
题目传送门 /* 题意:有若干个点在一个区间内来回移动,1m/s. 水题:n^2的复杂度能解决,注意时间可能大于一个周期,要取模 */ #include <cstdio> #include ...