利用canvas对上传图片进行上传前压缩
利用谷歌调式工具发现，图片大小直接影响着首屏加载时间。
且考虑到后期服务端压力，图片压缩特别必要。
本文是前端利用canvas实现图片。参考文章：https://www.cnblogs.com/007sx/p/7583202.html
本文将其改为插件形式，适合单文件压缩，多文件可以采用生成多个二进制文件的方法，然后一并上传。具体后面研究。
说说原理，压缩涉及三个关键点：
1，一个图片前端可被加载，基于file:协议的路径是不能产生onload事件，所以需要借助浏览器的接口将图片转为可加载文件，一种是通过FileReader，另一种是
通过URL.createObjectURL。
2，利用canvas，获取图片的高度和宽度之后，利用drawImage输出图片，再利用canvas的toDataURL输出base64的图片。
3，将base64转为二进制文件。
案例代码：
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>XMLHttpRequest上传文件压缩上传图片文件</title>
</head> <body>
<input type="file" id="file" name="myfile" accept="image/x-png, image/jpg, image/jpeg, image/gif" />
<input type="button" onclick="UpladFile()" value="上传" />
<script type="text/javascript">
(function() {
function compress(opts, fileObj) {
this.defaults = {
id: "#file",
quality: 0.4,
url: "",
callback: function(bl) {
console.log(bl);
}
}; if (typeof opts === "object") {
this.options = Object.assign({}, this.defaults, opts)
} else {
this.options = this.defaults;
}
fileObj = fileObj || document.querySelector(this.options.id).files[];
this.init(fileObj);
}
compress.prototype = {
version: "1.0.1",
init: function(fileObj) {
_this = this;
//promise处理异步
this.photoCompress(fileObj).then(function(res) {
return _this.canvasDataUrl.call(_this, res);
}).catch(function(err) {
console.log(err);
}).then(function(res) {
var bl = _this.convertBase64UrlToBlob(res);
_this.options.callback(bl);
}).catch(function(err) {
console.log(err);
}) },
photoCompress: function(file) {
var ready = new FileReader();
ready.readAsDataURL(file);
return new Promise(function(resolve, reject) {
ready.onload = function() {
var re = this.result;
resolve(re);
}
ready.onerror = function(err) {
reject(err)
}
}) },
canvasDataUrl: function(res) { var img = new Image();
img.src = res;
_this = this;
return new Promise(function(resolve, reject) {
img.onload = function() {
// 默认按比例压缩
var w = this.width,
h = this.height;
//生成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);
ctx.drawImage(this, , , w, h); // quality值越小，所绘制出的图像越模糊
var base64 = canvas.toDataURL('image/jpeg', _this.options.quality);
// 回调函数返回base64的值
resolve(base64)
}
img.onerror = function(err) {
reject(err)
}
})
}, //base64转为二进制数据，后端可直接利用
convertBase64UrlToBlob: function(urlData) {
var arr = urlData.split(','),
mime = arr[].match(/:(.*?);/)[],
bstr = atob(arr[]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], { type: mime });
}
}
window.compress = compress; })(); //上传文件方法
function UpladFile() { var url = "./upload"; // 接收上传文件的后台地址
new compress({
quality: 0.4,
url: url,
callback: function(bl) {
var form = new FormData();
form.append("file", bl, "file_" + Date.parse(new Date()) + ".jpg"); // 文件对象
var xhr = new XMLHttpRequest();
xhr.open("post", url, true);
xhr.onreadystatechange = function(evt) {
if (xhr.readyState === && xhr.status === ) {
uploadComplete(evt);
}
} xhr.send(form); //开始上传，发送form数据
}
})
} //上传成功响应
function uploadComplete(evt) {
//服务断接收完文件返回的结果
var data = JSON.parse(evt.target.responseText);
if (data.success) {
alert("上传成功！");
} else {
alert("上传失败！");
} }
</script>
</body> </html>
后端采用thinkphp5，代码index控制器下，方法
public function upload(){
// 获取表单上传文件 例如上传了001.jpg
$file = request()->file('file');
$arr=array("code"=>,"success"=>true);
// 移动到框架应用根目录/public/uploads/ 目录下
if($file){
$info = $file->move(ROOT_PATH . 'public' . DS . 'uploads');
if($info){
echo json_encode($arr);
}else{
return "error";
// 上传失败获取错误信息
echo $file->getError();
}
};
}
多张图片上传前压缩
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>XMLHttpRequest上传文件压缩上传图片文件多</title>
</head> <body>
<input type="file" id="files" name="myfile" multiple accept="image/x-png, image/jpg, image/jpeg, image/gif" />
<input type="button" onclick="UpladFile()" value="上传" />
<script type="text/javascript">
/*
三个参数
file：一个是文件(类型是图片格式)，
w：一个是文件压缩的后宽度，宽度越小，字节越小
objDiv：一个是容器或者回调函数
photoCompress()
*/
function photoCompress(file, w, objDiv) {
var ready = new FileReader();
/*开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容.*/
ready.readAsDataURL(file);
ready.onload = function() {
var re = this.result;
canvasDataURL(re, w, objDiv)
}
} function canvasDataURL(path, obj, 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);
ctx.drawImage(that, , , w, h);
// 图像质量
if (obj.quality && obj.quality <= && obj.quality > ) {
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[].match(/:(.*?);/)[],
bstr = atob(arr[]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], { type: mime });
} //上传文件方法
function UpladFile() { var url = "./upload"; // 接收上传文件的后台地址
var form = new FormData();
var files = document.querySelector("#files").files;
files = Array.prototype.slice.call(files);
files.forEach(function(val, index) {
photoCompress(val, {
quality: 0.2
}, function(base64Codes) {
console.log(index);
//console.log("压缩后：" + base.length / 1024 + " " + base);
var bl = convertBase64UrlToBlob(base64Codes);
form.append("file" + index, bl, "file_" + Date.parse(new Date()) + ".jpg"); // 文件对象
if (index + === files.length) {
xhr = new XMLHttpRequest(); // XMLHttpRequest 对象
xhr.open("post", url, true); //post方式，url为服务器请求地址，true 该参数规定请求是否异步处理。
xhr.onload = uploadComplete; //请求完成
xhr.send(form); //开始上传，发送form数据
}
});
})
} //上传成功响应
function uploadComplete(evt) {
//服务断接收完文件返回的结果
var data = JSON.parse(evt.target.responseText);
if (data.success) {
alert("上传成功！");
} else {
alert("上传失败！");
} }
</script>
</body> </html>
利用canvas对上传图片进行上传前压缩的更多相关文章
- 图片上传前 压缩，base64图片压缩 Exif.js处理ios拍照倒置等问题
曾写过在前端把图片按比例压缩不失真上传服务器的前端和后台,可惜没有及时做总结保留代码,只记得js利用了base64位压缩和Exif.js进行图片处理,还有其中让我头疼的ios拍照上传后会倒置等诸多问题 ...
- hTML5实现表单内的上传文件框，上传前预览图片，针刷新预览images
hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images, 本例子主要是使用HTML5 的File API,建立一個可存取到该file的url, 一个空的img标签,ID为img0,把 ...
- html之file标签 --- 图片上传前预览 -- FileReader
记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...
- 【转】HTML5 jQuery图片上传前预览
hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images,本例子主要是使用HTML5 的File API,建立一個可存取到该 file的url,一个空的img标签,ID为img0,把选 ...
- HTML5 jQuery图片上传前预览
hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images,本例子主要是使用HTML5 的File API,建立一個可存取到该file的url,一个空的img标签,ID为img0,把选择 ...
- file标签 - 图片上传前预览 - FileReader & 网络图片转base64和文件流
记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...
- 前端的图片压缩image-compressor（可在图片上传前实现图片压缩）
https://www.imooc.com/article/40038 https://www.jianshu.com/p/3ce3e3865ae2 前端的图片压缩image-compressor(可 ...
- ASP利用xhEditor编辑器实现图片上传的功能。
本人这几天在做一个软件,无意中用到xhEditor在线编辑器,这个编辑器虽然看着比较简单,但功能非常强大,大家可以去官网上查看,废话不说了. 这篇文件主要是实现在ASP环境中利用xhEditor编辑器 ...
- 利用Selenium实现图片文件上传的两种方式介绍
在实现UI自动化测试过程中,有一类需求是实现图片上传,这种需求根据开发的实现方式,UI的实现方式也会不同. 一.直接利用Selenium实现 这种方式是最简单的一种实现方式,但是依赖于开发的实现. 当 ...
随机推荐
- Java编码算法和摘要算法
编码算法 编码算法是将一种形式转换成等价的另外一种形式.主要是为了方便某种特定场景的处理. 字母如何在计算机中表示呢? 用ASCII编码 那中文字符如何在计算机中表示呢? 用Unicode编码 如何同 ...
- freeradius+xl2tp+mysql整合
freeradius+xl2tp+mysql整合 搭了5个小时,可以说是入门到精通了.首先请确认你已经搭建好L2TP,并可以正常使用. 如何在Ubuntu下配置L2TP VPN L2TP使用radi ...
- 从网上下载小说_keywords:python、multiprocess
# -*- coding: utf-8 -*- __author__ = "YuDian" from multiprocessing import Pool # Pool用来创建进 ...
- 20155212Arrays和String测试_MySort
Arrays和String单元测试 在IDEA中以TDD的方式对String类和Arrays类进行学习 测试相关方法的正常,错误和边界情况 String类 charAt split Arrays类 s ...
- 20155306 2016-2017-2《Java程序设计》课程总结
20155306 2016-2017-2<Java程序设计>课程总结 (按顺序)每周作业链接汇总 •预备作业1:对自己专业看法及.学习Java的期望,以及心中的师生关系. •预备作业2:C ...
- # 2017-2018-1 20155336《信息安全技术》实验二——Windows口令破解
2017-2018-1 20155336<信息安全技术>实验二——Windows口令破解 实验原理 口令破解方法 口令破解主要有两种方法:字典破解和暴力破解. 字典破解是指通过破解者对管理 ...
- 宿主机 PL/SQL Developer 连接虚拟机 ORACLE 数据库
1.确保主机与虚拟机间通信正常,双方关闭window防火墙.如能 ping 通,请确保两机IP在一个网段 2.主机安装orcl客户端 3.虚拟机 D:\app\lin\product\11.2.0\d ...
- stl源码分析之vector
上篇简单介绍了gcc4.8提供的几种allocator的实现方法和作用,这是所有stl组件的基础,容器必须通过allocator申请分配内存和释放内存,至于底层是直接分配释放内存还是使用内存池等方法就 ...
- 车牌,车架号,VIN码毫秒识别技术，汽车后市场的春天到来了
vin码(车架号)识别运用 不仅在制造.销售.保养.保险.车辆评估.交易环节会需要录入汽车的VIN码,在交通事故处理中,作为汽车身份唯一识别码,VIN码是处理事故的执法人员必须要记录的信息之一.随着汽 ...
- sql server 按月对数据表进行分区
当某张数据表数据量较大时,我们就需要对该表进行分区处理,以下sql语句,会将数据表按月份,分为12个分区表存储数据,废话不多说,直接上脚本: use [SIT_L_TMS] --开启 XP_CMDSH ...