项目中做身份证识别时,需要传送图片的 base64 格式编码,但是手机拍摄的照片都太大了,转成 base64 简直可怕,因此找了一下解决办法
input 标签的 onchange 事件是在上传完文件之后触发。
当 input 标签 type="file" 时,使用 files 属性获取到上传的文件对象。
readAsDataURL 用于将读取内容转换成 base64 编码
区分canvas的画布 和 绘画环境:
画布:对应代码中的 cvs,可以设置画布 width,height;
绘画环境:对应代码中的 ctx,由 cvs 得来。ctx = cvs.getContext('2d'),可以设置 fillStyle,fillRect 等;
使用 canvas 自带的 drawImage() 方法将上传的图片画到 canvas 上,想取到压缩后图片的 base64 可以使用 canvas 自带的 toDataURL() 方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<input type="file" onchange="loadImg(this)">
<hr>
<div>800×449,544KB</div>
<img src="" alt="">
<hr>
<div>400×224,157KB</div>
<canvas></canvas>
<script>
// 上传图片
function loadImg(me) {
let img = document.querySelector('img');
let cvs = document.querySelector('canvas');
let file = me.files[0]; // 获取到文件对象
// 上传的图片大于 500KB 时才压缩
if (file && (file.size / 1024 > 500)) {
let reader = new FileReader();
reader.readAsDataURL(file); // 转成 base64 编码
reader.onload = function (e) {
let naturalBase64 = e.target.result; // 获取 base64 编码,这是原图的
img.src = naturalBase64;
img.onload = function () {
let ratio = img.naturalWidth / img.naturalHeight; // 获取原图比例,为了等比压缩
cvs.width = 400;
cvs.height = cvs.width / ratio;
let ctx = cvs.getContext('2d');
ctx.drawImage(img, 0, 0, cvs.width, cvs.height); // 画在 canvas 上
// 压缩后新图的 base64
let zipBase64 = cvs.toDataURL();
}
}
}
}
</script>
</body>
</html>
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的时候进行。
我们知道现在,手机拍照在10MB左右,体积太大,在上传到服务器前,能不能只缩小图片的体积,而不改变图片尺寸? 这里我们可以通过canvas实现对图片的重新绘制,已便达到图片压缩的效果。
Nginx的ngx http .gzip_ module压缩模块提供对文件内容压缩的功能,允许Nginx服务器将输出内容在发送客户端之前进行压缩,以节约网站带宽,提升用户的访问体验,默认已经安装
随着前端的发展,特别是 React,Vue 等构造单页应用的兴起,前端的能力得以很大提升,随之而来的是项目的复杂度越来越大。此时的前端的静态资源也越来越庞大,而毫无疑问 javascript 资源已是前端的主体资源,对于压缩它的体积至为重要
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!