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 ...
随机推荐
- Surface pro4 触摸板手势快捷键
[一个手指]:这个大家都知道就不必在介绍了,跟之前win7一样,滑动就是鼠标,轻点(或者按左下方)就相当于点鼠标左键.(两个按键按起来真心手感不咋的,所以基本不用)[两个手指]:1.两个手指向上或下滑 ...
- ES6 基础知识-----简记 let const
ES5中只有函数作用域和全局作用域,声明变量使用var,在es6中添加声明变量 let const let 声明块级作用域变量, let 不存在变量提升 var命令会发生”变量提升“现象,即变量可以在 ...
- Python安装、配置图文详解
原文地址:http://weixiaolu.iteye.com/blog/1617440 目录: 一. Python简介 二. 安装python 1. 在windows下安装 2. 在Linux下安装 ...
- java笔记之IO2写操作
IO流的分类 流向: 输入流 读出数据 输出流 写出数据 数据类型 字节流 字节输入流 读取数据 inputstream 字节输出流 写出数据 outputstream 字符流 字符输入流 读取数据 ...
- 开源ORM
Farseer.net轻量级开源框架 目录 https://github.com/steden/Farseer.net ---------------------------------- SunSo ...
- javascript前端面试题及答案整理
Part1 手写代码 现场手写代码是现在面试中很常见的一类面试题,考察基础的数据结构与算法能力. 1 数组去重的实现 基本数组去重 Array.prototype.unique = function( ...
- 安装privoxy后curl 操作
如果讲privoxy服务关掉 sudo /etc/init.d/privoxy restart 这时候发现 curl www.baidu.com 也没法正常工作,直接显示的是无法连接到相应端口还是 主 ...
- Python爬虫库-Beautiful Soup的使用
Beautiful Soup 是一个可以从HTML或XML文件中提取数据的Python库,简单来说,它能将HTML的标签文件解析成树形结构,然后方便地获取到指定标签的对应属性. 如在上一篇文章通过爬虫 ...
- AC自动机 HDOJ 5384 Danganronpa
题目传送门 /* 题意:多个文本串,多个模式串在每个文本串出现的次数 AC自动机:这就是一道模板题,杭电有道类似的题目 */ /************************************ ...
- WebSphere中数据源连接池太小导致的连接超时错误记录
WebSphere中数据源连接池太小导致的连接超时错误记录. 应用连接超时错误信息: [// ::: CST] webapp E com.ibm.ws.webcontainer.webapp.WebA ...