我们知道现在,手机拍照在10MB左右,体积太大,在上传到服务器前,能不能只缩小图片的体积,而不改变图片尺寸? 这里我们可以通过canvas实现对图片的重新绘制,已便达到图片压缩的效果。
/**
* 图片压缩
* @explain 借助canvas对图片进行重绘(canvas2DataURL)
* @param base64Url base64格式的图片字符串
* @param imgAttr 重绘图片宽度、高度、质量等属性的设置
* @param callback 该函数执行完毕后,要执行的回调函数
* @returns
*/
function photoCompress (base64Url, imgAttr, callback){
var img = new Image();
img.src = base64Url;
img.onload = function(){
var that = this;
// 默认按比例压缩
var w = that.width,
h = that.height,
// 宽高比例
scale = w / h;
w = imgAttr.width || w;
h = imgAttr.height || (w / scale);
// 默认图片质量为0.7
var quality = 0.7;
//生成canvas
var canvas = document.createElement(‘canvas‘);
var ctx = canvas.getContext(‘2d‘);
// 创建属性节点
var anw = document.createAttribute("width");
anw.nodeValue = w;
canvas.setAttributeNode(anw);
var anh = document.createAttribute("height");
anh.nodeValue = h;
canvas.setAttributeNode(anh);
ctx.drawImage(that, 0, 0, w, h);
// 图像质量(0-1)
if(imgAttr.quality && imgAttr.quality <= 1 && imgAttr.quality > 0){
quality = imgAttr.quality;
}
// 重绘后的图片类型
var imgType = imgAttr.type || ‘image/jpeg‘;
// quality值越小,所绘制出的图像越模糊
var base64 = canvas.toDataURL(imgType, quality);
// 回调函数返回base64的值
callback(base64);
};
}
可自定义设置图片质量,图片的宽高(通过imgAttr设置)。
// js 获取文件对象
var fileObj = document.getElementById("file").files[0];
if (null == fileObj) {
alert("图像上传失败,请重试!");
}
// 文件读取对象
var reader = new FileReader();
// 图片转base64(Blob对象或File对象)
reader.readAsDataURL(fileObj);
// 图片大小<=1MB,size的单位:B(1Mb=1B*1024*1024)
if(fileObj.size/1024 <= 1024) {
reader.onload = function(e) {
// 获取对应的base64
var imgBase64 = e.target.result;
// 将图片的base64码传给后台
// 调用腾讯接口
$.post(baseUrl + "/weixin/facein/upImg2.do",{imgBase64:imgBase64},function(resData){
// TODO 对返回的接口数据进行自动填充处理
});
};
} else {
// 读取完毕
reader.onload = function(){
// 图片转换成为base64Url
var fileBase64 = this.result;
// 图片参数
var imgAttr = {quality : 0.2, type : ‘img/jpeg‘};
// 回调函数
var callBack = function (base64Codes) {
// 图片比较
// 调用腾讯接口
};
// 压缩图片
photoCompress(fileBase64,imgAttr,callBack);
};
}
说明:
前端对图片进行重绘,对浏览器有一定的要求,我测试的时候再电脑端没有问题,但是,在微信上使用时,就会很难受了,会将微信的qq浏览器内核搞垮,根本无法使用。不得以,放弃了在前端进行压缩的想法。
TS语言的Laya项目里,要用typescript对压缩过的文件解压缩。文件是AS3写的工具导出的。下载找到的zlib.js或zlib.min.js文件,自己编写zlib.min.d.ts文件,代码如下:
Gzip是一种流行的文件压缩算法,现在的应用十分广泛,尤其是在Linux平台,Gzip在现代浏览器中默认都是支持的,当一个纯文本文件使用Gzip压缩可以减少70%以上的文件大小,本文讲解了如何开启Apache平台上的Gzip压缩功能
正常情况下,如果我们配置生成环境,webpack会自动帮js压缩,必须配置--mode=production,但是如果我们要把css也压缩的话,问题就来了,css压缩
在php中,有时我们需要使用到压缩文件操作,压缩文件可以节省磁盘空间;且压缩文件更小,便于网络传输,效率高,下面我们就来了解php的压缩解压相关操作
在使用 HBase 的时候,为了节省数据的空间占用,通常我们会为 HBase 设置压缩属性。与其他的表级别属性一样,压缩设置也是针对具体列族进行设置的。HBase 创建表时默认压缩为 NONE ,即没有压缩,除非指定
讲干货,不啰嗦,当涉及对图片有质量压缩要求的时候,可以使用Canvas实现图片压缩。步骤:1.获取img元素,既要压缩的图片2.创建canvas对象3.使用canvas的drawImage方法绘制图片
团队开启了一个新项目,希望能在原来项目的工程化基础上再进一步,于是想到了图片自动压缩。这里的图片自动压缩并不是在webpack构建阶段压缩,而是在git commit的时候进行。
项目中做身份证识别时,需要传送图片的 base64 格式编码,但是手机拍摄的照片都太大了,转成 base64 简直可怕,因此找了一下解决办法,input 标签的 onchange 事件是在上传完文件之后触发。
Nginx的ngx http .gzip_ module压缩模块提供对文件内容压缩的功能,允许Nginx服务器将输出内容在发送客户端之前进行压缩,以节约网站带宽,提升用户的访问体验,默认已经安装
随着前端的发展,特别是 React,Vue 等构造单页应用的兴起,前端的能力得以很大提升,随之而来的是项目的复杂度越来越大。此时的前端的静态资源也越来越庞大,而毫无疑问 javascript 资源已是前端的主体资源,对于压缩它的体积至为重要
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!