base64之js压缩图片
在日常的一些项目中会有上传图片之类的接口,如果图片过大了再上传的时候是非常的耗时以及占用资源,在这里就给大家分享一下如何在js中把大的图片压缩成小的图片,我这里的功能是用户点击按钮调用相机或者选择文件后进行压缩的:
直接上代码
- /*
- 三个参数
- 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, 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);
- }
- }
- function setImagePreview(e,a) {
- var fileMsg = e.files[0];
- if(fileMsg==null){
- return;
- }
- //文件名
- var fileName = fileMsg.name;
- //大小 字节
- var fileSize = fileMsg.size;
- /*调用
- * fileMsg 是input type="file" 的值
- * quality 压缩图片质量 范围是(0-1)
- * base64Codes 就是最终压缩成的图片
- */
- photoCompress(fileMsg, {
- quality: 0.3
- }, function(base64Codes){
- //这里可以一个图片预览 把base64Codes 赋值给img的src即可
- });
- }
html的写法:
- <input class="btn takepicture" type="file" name="img5q" id="img5q" accept="image/*" onchange="javascript:setImagePreview(this,5);"/>
其实图片压缩是很简单的,这里说明一下,如果需要上传到服务器的话,把base64Codes当成一个字符串传到服务器即可,mysql表中对应的字段类型可用用longtext来储存,但是longtext的长度也是有限制的,所以在上传的时候要控制文件大小。
如有需要可以加我Q群【308742428】大家一起讨论技术。
后面会不定时为大家更新文章,敬请期待。
喜欢的朋友可以关注下。
如果对你有帮助,请打赏一下!!!
base64之js压缩图片的更多相关文章
- js压缩图片base64长度
var myCanvas=$('.img-container > img').cropper('getCroppedCanvas'); (function (base64){ var image ...
- JS压缩图片(canvas),返回base64码
上传图片时总会遇到图片过大上传不上去的问题,本方法是在网上搜的压缩图片的例子,我测试过了,确实能用,但是照搬别人的代码,发现压缩后图片会失真,不清晰,现经修改图片清晰度还可以,不仔细看差别不大,so, ...
- file上传图片,base64转换、压缩图片、预览图片、将图片旋转到正确的角度
/** * 将base64转换为文件对象 * (即用文件上传输入框上传文件得到的对象) * @param {String} base64 base64字符串 */ function convertBa ...
- js压缩图片上传插件localResizeIMG
示例 /** * 本地图片压缩后上传 */ $("#vfile").change(function(){ var _this = $(this); lrz(this.files[0 ...
- js 压缩图片(只缩小体积,不更改图片尺寸)
1.情景展示 如上图所示,点击上传图片按钮,调用手机摄像头拍照功能. <input onchange="javascript:imgFun.uploadPicture();&quo ...
- js 压缩图片 上传
感谢,参考了以下作者的绝大部分内容 https://blog.csdn.net/tangxiujiang/article/details/78755292 https://blog.csdn.net/ ...
- 了解JS压缩图片,这一篇就够了
前言 公司的移动端业务需要在用户上传图片是由前端压缩图片大小,再上传到服务器,这样可以减少移动端上行流量,减少用户上传等待时长,优化用户体验. 插播一下,本文案例已整理成插件,已上传npm ,可通过 ...
- HTML5 JS 压缩图片,并取得图片的BASE64编码上传
基本过程 1) 调用 FileReader 的 reader.readAsDataURL(img); 方法, 在其onload事件中, 将用户选择的图片读入 Image对象. 2) 在image对象的 ...
- js压缩图片并上传,不失真,保证图片清晰度
<!DOCTYPE HTML> <html lang="zh-CN"> <head> <meta charset="UTF-8& ...
随机推荐
- ubuntu 18.04配置静态ip,解决无法上网问题,解决resolv.conf配置文件被覆盖
Netplan 是 Ubuntu 17.10 中引入的一种新的命令行网络配置实用程序,用于在 Ubuntu 系统中轻松管理和配置网络设置. 它允许您使用 YAML 格式的描述文件来抽像化定义网络接口的 ...
- GUI学习之十——QFrame和的QAbstractScrollArea学习总结
上一章我们学习了单行的文本框QLineEdit类,下面我们要为多行的文本框的学习坐下准备,总结一下QFrame类和QAbstractScrollArea类 一.QFrame类 1.描述 QFrame的 ...
- SQL SERVER 如何把1列多行数据 合并成一列显示
示例 修改前:1列多行数据 修改后:合并成一列 示例语句 1 2 3 4 5 6 7 8 9 10 11 select 类别, 名称 = ( stuff( ...
- STS中applicationContext.xml配置文件
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...
- Cookie随笔
解决了服务器不能识别不同浏览器的问题,相当于给每个浏览器加了个“身份证”. Cookie首先由服务器创建发给浏览器,随后浏览器每次访问服务器时都带上这个Cookie. Cookie缺点: ·Cooki ...
- Eclipse 安装 AmaterasUML 插件
网上很多Eclipse 安装UML插件教程,可能对高版本Eclipse都无法安装成功,本文提供的安装方式,亲测可用. 一.安装GEF插件 1.打开eclipse官网 https://www.eclip ...
- 使用kbmmw中的随机数替换delphi 10.3 自带的随机数
我们在开发中经常会使用随机数模拟各种随机条件,例如生成唯一的密码和令牌. 在计算机中,一般采用PRNG(伪随机序列发生器)模拟真实随机数.既然是随机,就要要没有任何规律, 在取值范围内均匀.独立.以确 ...
- Java基础之一
移位操作符 移位操作符只可用来处理整数类型. <<:左移位操作符,按照操作符右侧指定的位数将操作符左边的操作数向左移动,在低位补0. >>:“有符号”右移位操作符,按照操作符右 ...
- 获取mp3文件的采样率
/** * 获取mp3文件的采样率 * @param filefullname 文件完整路径 * @return 采样率 */public int getMp3SampleRate(String fi ...
- nginx报错:./configure: error: C compiler cc is not found, gcc 是已经安装了的
源码安装nginx报错,找不到gcc,但是实际上gcc是存在的,如下: # ./configure checking for OS + Linux -.el7.x86_64 x86_64 checki ...