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 ...
随机推荐
- U-Boot编译过程完全分析
2.1 U-Boot Makefile分析 2.1.1 U-Boot编译命令 对于mini2440开发板,编译U-Boot需要执行如下的命令: $ make m ...
- win7上安装macaca的报错问题
macaca网上的各种教程中,都建议使用淘宝源安装macaca,使用淘宝源就需要先安装cnpm,在win7上切换到淘宝源安装cnpm后(npm install -g cnpm --registry=h ...
- .NETFramework-Drawing：Font
ylbtech-.NETFramework-Drawing:Font 1.返回顶部 1. #region 程序集 System.Drawing, Version=4.0.0.0, Culture=ne ...
- bzoj 3308: 九月的咖啡店【最大费用最大流】
费用流里spfa最后的判断要写成dis[t]>=0而不是dis[t]!=-inf否则会WAWAWA-- #include<iostream> #include<cstdio&g ...
- [App Store Connect帮助]七、在 App Store 上发行（1）App 发行流程概述
在 App Store 上发行 App 的一般流程如下. 第 1 步:选择您的构建版本 每个 App 都可以有多个版本,且每个版本也可以有多个构建版本.若要在 App Store 上发行您的 App, ...
- 安装配置Eclipse Python开发插件PyDev
一.PyDev安装的版本要求 PyDev是支持在Eclipse中进行Python程序开发的插件,Pydev官方的说法是需要安装 java 8 and Eclipse 4.6 (Neon),当然,你也可 ...
- git提交报错SSL routines:SSL23_GET_SERVER_HELLO:tlsv1 alert protocol version
git push报错 git push origin master Administrator@FREESKYC-92DB80 /e/git/ouyida3/ouyida3.github.io (ma ...
- 标准块CP功能实现
#include<stdio.h> int main(int argc,char *argv[]) { FILE *src_fp,*des_fp; int src_ret; ]={}; ) ...
- windows deintall 12c client
1.unintall: close all oracle app C:\app\client\CICadmin\product\12.1.0\client_1\deinstall deinstall ...
- Windowsforms 中对话框，流、文件操作
对话框: 1.颜色选择控件——ColorDialog //显示颜色选择器 colorDialog1.ShowDialog(); //把取到的颜色赋值给panel panel1.BackColor = ...