js压缩图片

最新推荐文章于 2025-12-22 00:56:07 发布
原创 最新推荐文章于 2025-12-22 00:56:07 发布 · 143 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
GEO检测 
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
    <title>layui上传图片压缩</title>
    <link rel="stylesheet" href="./style/weui.css"/>
    <link rel="stylesheet" href="./style/example.css"/>
    <link rel="stylesheet" href="./style/jquery-weui.min.css">
    <link rel="stylesheet" href="./style/my.css">
    <link rel="stylesheet" type="text/css" href="./static/mobile/css/wx/style.css" />
    <link rel="stylesheet" type="text/css" href="./static/assets/layui/css/layui.css" />
    <style>
        /*.weui-cells{
            background: #fff !important;
        }*/
    </style>
</head>
<body>
<div class="page js_show home">
    <div style="font-size:30px;text-align: center;margin-top:20px;margin-bottom: 20px;">
        上传防溺水防控人员照片
    </div>
    <div class="weui-form__control-area">
        <div class="weui-cells__group weui-cells__group_form">
            <div class="weui-cells weui-cells_form">
                <div class="weui-cell weui-cell_active">
                    <div class="weui-cell__hd"><label class="weui-label">姓名:</label></div>
                    <div class="weui-cell__bd">
                        <input id="name" class="weui-input" placeholder="请填写姓名" type="text" value=""/>
                    </div>
                </div>
                <div class="weui-cell weui-cell_active">
                    <div class="weui-cell__hd"><label class="weui-label">联系电话</label></div>
                    <div class="weui-cell__bd">
                        <input id="tel" class="weui-input" placeholder="请填写联系电话" value="" type="number" pattern="[0-9]*"/>
                    </div>
                </div>
                <div class="weui-cell weui-cell_active">
                    <div class="weui-cell__hd"><label class="weui-label">上传照片：</label></div>
                    <div class="weui-cell__bd" style="display: block;">
                        <div class="device_detail" style="">
                            
                            <div class="layui-upload" style="width: 100px;">
                                <div class="layui-upload-list" id="demo1" style="width: 100%; height:100px;">
                                    <img src="" height="100" style="display: none;" />
                                    <input type="hidden" id="thumb_pic" name="thumb" value="">
                                </div>
                            </div>
                            <div style="width:100px">
                                <button type="button" class="layui-btn layui-btn-normal" style="width: 100%;border-radius: 20px;" id="uploadBtn">上传照片</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div style="color:red; font-size: 14px;margin-left:20px;margin-top:0px">
                建议照片使用1寸电子照片，小于500K。
            </div>
            <div class="button-sp-area" style="margin-top:65px;">
                <a href="javascript:" class="weui-btn weui-btn_primary" id="weui-btn_update">提交</a>
            </div>
        </div>
    </div>
</div>

<script src="./js/jquery.min.js"></script>
<script src="./js/jquery-weui.min.js"></script>
<script src="./js/zepto.min.js?a=1"></script>
<script src="./js/jweixin-1.0.0.js"></script>
<script src="./js/weui.min.js"></script>
<script src="./static/mobile/js/jquery2.min.js"></script>
<script src="./static/mobile/js/layer/layer.js"></script>
<script src="./static/assets/layui/layui.js"></script>
<script src="./static/assets/gougu/gouguInit.js"></script>
<script src='./static/mobile/js/wx/jweixin-1.4.0.js'></script>
<script src='./static/mobile/js/wx/recharge.js?v=2'></script>
<script src="./static/mobile/js/wx/jquery.cookie.js"></script>
<script>
    const moduleInit = ['tool','layer', 'form', 'upload'];
    function gouguInit() {
        var form = layui.form, tool = layui.tool, upload = layui.upload;

        // 头像上传
        var uploadInst = upload.render({
            elem: '#uploadBtn'
            //, url: ''
            ,accept: 'images'
            ,auto: false // 禁止自动上传
            ,multiple: true
            , before: function(obj) { // 上传前的回调
                // 显示加载效果
                layer.load(1);
            }
            , choose: function(obj) {
                // 读取图片文件
                var files = Object.entries(obj.pushFile())[0][1];
                console.log(obj);
                console.log(files);
                console.log(files instanceof Blob);
                if (files) {
                    var file = files;
                    if (file && file instanceof Blob) {
                        compressImage(file, function(compressedFile) {
                            // 替换原始文件
                            /*var newFileList = new DataTransfer();
                            newFileList.items.add(compressedFile);
                            console.log(newFileList.files[0]);
                            obj.files[0] = newFileList.files[0];

                            // 继续上传
                            obj.upload();*/
                            var formData = new FormData();
                            console.log(compressedFile);
                            console.log(compressedFile.name);
                            formData.append('file', compressedFile, compressedFile.name);
                            uploadCompressedFile(formData);
                            console.log(formData);
                        });
                    } else {
                        layer.msg('文件选择错误');
                    }
                    /*if (file && file instanceof Blob) {
                        var reader = new FileReader();
                        reader.onload = function(e) {
                            var img = new Image();
                            img.src = e.target.result;
                            img.onload = function() {
                                var canvas = document.createElement('canvas');
                                var ctx = canvas.getContext('2d');
                                var maxWidth = 800; // 最大宽度
                                var maxHeight = 800; // 最大高度
                                var width = img.width;
                                var height = img.height;

                                // 计算新的尺寸
                                if (width > height) {
                                    if (width > maxWidth) {
                                        height *= maxWidth / width;
                                        width = maxWidth;
                                    }
                                } else {
                                    if (height > maxHeight) {
                                        width *= maxHeight / height;
                                        height = maxHeight;
                                    }
                                }

                                canvas.width = width;
                                canvas.height = height;
                                ctx.drawImage(img, 0, 0, width, height);
                                // 将画布内容转换为Blob
                                canvas.toBlob(function(blob) {
                                    // 创建一个新的File对象
                                    var newFile = new File([blob], file.name, {
                                        type: file.type,
                                        lastModified: Date.now()
                                    });
                                    callback(newFile);
                                }, file.type, 0.5); // 设置质量参数为0.8
                                // 将画布内容转换为Blob
                                canvas.toBlob(function(blob) {
                                    // 创建一个新的File对象
                                    var newFile = new File([blob], file.name, {
                                        type: file.type,
                                        lastModified: Date.now()
                                    });
                                    console.log(newFile);
                                    console.log(obj);
                                    obj.item[0]=[];
                                    // 替换原始文件
                                    var newFileList = new DataTransfer();
                                    newFileList.items.add(newFile);
                                    console.log(newFileList);
                                    obj.item[0] = newFileList.files[0];

                                    // 继续上传
                                    obj.upload();
                                }, file.type);
                            };
                        };
                        reader.readAsDataURL(file);
                    } else {
                        layer.msg('文件选择错误');
                    }*/
                } else {
                    layer.msg('请选择文件');
                }
                return false; // 阻止默认上传
                // 读取图片文件
                //var files = obj.pushFile();
                /*var files = this.file = obj.pushFile()
                console.log(files); // 打印文件对象
                console.log(files.length); // 打印文件对象
                console.log(files[0]); // 打印文件对象
                obj.preview(function (index, file, result) {
                    files = Object.keys(files);
                    console.log(files);
                     if (files && files.length > 0) {
                        var file = files[0];
                        if (file && file instanceof Blob) {
                            compressImage(file, function(compressedFile) {
                                // 替换原始文件
                                var newFileList = new DataTransfer();
                                newFileList.items.add(compressedFile);
                                obj.item[0] = newFileList.files[0];

                                // 继续上传
                                obj.upload();
                            });
                        } else {
                            layer.msg('文件选择错误');
                        }
                    } else {
                        layer.msg('请选择文件');
                    }
                    return false; // 阻止默认上传

                });
                if (files && files.length > 0) {
                    var file = files[0];
                    if (file && file instanceof Blob) {
                        compressImage(file, function(compressedFile) {
                            // 替换原始文件
                            var newFileList = new DataTransfer();
                            newFileList.items.add(compressedFile);
                            obj.item[0] = newFileList.files[0];

                            // 继续上传
                            obj.upload();
                        });
                    } else {
                        layer.msg('文件选择错误');
                    }
                } else {
                    layer.msg('请选择文件');
                }
                return false; // 阻止默认上传*/
            }
            , done: function(e) {
                // 隐藏加载效果
                layer.closeAll('loading');

                // 如果上传失败
                if (e.code == 1) {
                    return layer.msg('上传失败');
                }
                layer.msg('上传成功');
                $('#demo1 img').show();
                // 上传成功
                $('#demo1 input').attr('value',  e.data.filepath);
                $('#demo1 img').attr('src',  + e.data.filepath);
            }
            , error: function() {
                // 隐藏加载效果
                layer.closeAll('loading');
                layer.msg('上传失败');
            }
        });

        $('#weui-btn_update').on('click', function() {
            var name = $("#name").val();
            if (name.length <= 0 || name.length > 8) {
                layer.msg('请检查姓名');
                return false;
            }
            var tel = $("#tel").val();
            if (tel.length <= 0 || tel.length != 11) {
                layer.msg('请检查联系方式');
                return false;
            }
            var img = $('#thumb_pic').val();
            if (img.length <= 0) {
                layer.msg('请检查图片');
                return false;
            }
            var pinjie ='此信息确认提交? <br>姓名：'+name+'</br>联系方式：'+tel
            layer.confirm(pinjie, {
              btn: ['确认', '取消'] //可以无限个按钮
              ,btn1: function(index, layero){
                alert(index);
              }
            }, function(index){
              //按钮【按钮二】的回调
                layer.close(index)
                let index2 = layer.load(1);
                $.ajax({
                    url: url, // 后端接口 URL
                    type: 'POST',
                    data: {
                        name: name,
                        contact: tel,
                        face_img: img,
                    },
                    success: function(res) {
                        layer.msg(res.msg);
                        if (res.code == 0) {
                            location.href = "success.html";
                        } else {
                            // location.href="warn.html";
                        }
                        layer.close(index2);
                    }
                    /*,
                    error: function(error) {
                        layer.msg(error.msg);
                        layer.close(index);
                    }*/
                });
                
            });
            //return false;
            
        });
    }
    // 上传压缩后的文件的函数
  function uploadCompressedFile(formData) {
    // 使用 AJAX 或 Fetch API 发送 FormData 对象
    $.ajax({
      url: url, // 替换为你的上传 URL
      type: 'POST',
      data: formData,
      processData: false, // 告诉 jQuery 不要去处理发送的数据
      contentType: false, // 告诉 jQuery 不要去设置 Content-Type 请求头
      success: function(e) {
        // 处理上传成功的情况
        

        // 如果上传失败
        if (e.code == 1) {
            layer.closeAll('loading');
            layer.msg('上传失败');
            //layer.msg(e.msg);
            return false;
        }
        
        $('#demo1 img').show();
        // 上传成功
        $('#demo1 input').attr('value',  e.data.filepath);
        $('#demo1 img').attr('src',  e.data.filepath);
        layer.closeAll('loading');
        layer.msg('上传成功');
        // ... 其他逻辑 ...
      },
      error: function(jqXHR, textStatus, errorThrown) {
        // 处理上传失败的情况
        layer.msg('上传失败');
        // ... 其他逻辑 ...
      },
      complete: function() {
        // 上传完成后执行的逻辑（无论成功还是失败）
        // 隐藏加载层等
      }
    });
  }
    function compressImage(file, callback) {
        var reader = new FileReader();
        reader.onload = function(e) {
            var img = new Image();
            img.src = e.target.result;
            img.onload = function() {
                var canvas = document.createElement('canvas');
                var ctx = canvas.getContext('2d');
                var maxWidth = 200; // 最大宽度
                var maxHeight = 200; // 最大高度
                var width = img.width;
                var height = img.height;

                // 计算新的尺寸
                if (width > height) {
                    if (width > maxWidth) {
                        height *= maxWidth / width;
                        width = maxWidth;
                    }
                } else {
                    if (height > maxHeight) {
                        width *= maxHeight / height;
                        height = maxHeight;
                    }
                }

                canvas.width = width;
                canvas.height = height;
                ctx.drawImage(img, 0, 0, width, height);

                // 将画布内容转换为Blob
                canvas.toBlob(function(blob) {
                    // 创建一个新的File对象
                    var newFile = new File([blob], file.name, {
                        type: file.type,
                        lastModified: Date.now()
                    });
                    callback(newFile);
                }, file.type, 0.3); // 设置质量参数为0.8
            };
        };
        reader.readAsDataURL(file);
    }
</script>
</body>
</html>

标签
#javascript #开发语言 #ecmascript #html5
compressor.js一款基于浏览器的JavaScript 图片压缩javascript库
天天打码-16年老码农
07-04 1447
今天，我们就来聊聊一个轻量级的 JavaScript 图像压缩库 —— Compressor.js，它和 Node 端的 Sharp.js 一样，都是图片处理的利器，但Compressor.js 更擅长在浏览器端进行操作。什么是 Compressor.jsCompressor.js，就是一个压缩器。它是一个基于浏览器原生canvas.toBlob API的 JavaScript 图像压缩库，能够实现有损压缩，而且是异步进行的。
JavaScript 压缩图片
且听风吟的博客
01-18 6513
上传图片时候，遇到要上传很大的图片，上传的时候就会很慢。所以，需要对图片进行压缩处理来优化上传功能。 图片压缩函数： /* * 图片压缩 * img 原始图片 * width 压缩后的宽度 * height 压缩后的高度 * ratio 压缩比率 */ function compress(img, width, height, ratio) { var canvas, ctx, img64; canvas = document.
JavaScript压缩图片,JS压缩图片，Canvas压缩图片
august_wy的博客
07-31 197
1. 选择一张图片 const img_original = document.getElementById('img_original'); const img_output = document.getElementById('img_output'); let blob; function preview(file) { let reader ...
js对图片进行压缩
weixin_30809173的博客
05-21 247
摘抄自：https://www.cnblogs.com/dsn727455218/p/10489574.html记录。。。 上传图片太大，可能会导致上传失败或者太久，可以对上传的图片进行压缩后在进行上传。 首先，上传文件的input <input class="btn takepicture" type="file" name="img5q" id="img5q" ac...
js获取图片的base64编码、js压缩图片
carcarrot的博客
11-17 705
案例1：js获取图片的base64编码 <!DOCTYPE html> <html> <head> <meta charset="gbk"> <title></title> </head> <body> <input accept="image/*" name="upimage" id="upload_file" type="fil
js/vue图片压缩
weixin_30902251的博客
02-28 550
js版 新建compressImage.js，内容如下： // 将base64转换为blob（有需要可加上，没需要可不加） function convertBase64UrlToBlob(urlData) { var arr = urlData.split(',') var mime = arr[0].match(/:(.*?);/)[1] var bstr = atob(arr[...
java js 压缩图片,JavaScript 压缩图片
weixin_35521169的博客
03-12 157
2018-10-092168原理 new一个image，然后 用canvas来绘图functioncompress(base64,width,callback){varimage=newImage();image.src=base64;image.onload=function(){varheight=(width/this.width)*this.hei...
JS 图片压缩
高先生的猫
06-17 656
说起图片压缩，大家想到的或者平时用到的很多工具都可以实现，例如，客户端类的有图片压缩工具 PPDuck3， JS 实现类的有插件 compression.js ，亦或是在线处理类的 OSS 上传，文件上传后，在访问文件时中也有图片的压缩配置选项，不过，能不能自己撸一套 JS 实现的图片压缩代码呢？当然可以，那我们先来理一下思路。 压缩思路 涉及到 JS 的图片压缩，我的想法是需要用到 Canvas 的绘图能力，通过调整图片的分辨率或者绘图质量来达到图片压缩的效果，实现思路如下： 获取上传 Inp.
如何来通过JavaScript来进行图片本地压缩
张国军_Suger
03-07 938
如何来通过JavaScript来进行图片本地压缩 作者：张国军_Suger 开发工具与关键技术：HTML、JavaScript 有些时候我们需要一些HTML页面进行图片的本地压缩，下面直接上一下代码，希望可以帮到大家。 &amp;amp;lt;!DOCTYPE html&amp;amp;gt; &amp;amp;lt;html&amp;amp;gt; &amp;amp;lt;head&amp;amp;gt; &amp;amp;
JavaScript：js中利用localResizeIMG来实现图片压缩后上传
東辰的博客
04-22 393
誊抄自原来的笔记 一、需要用到的js文件 二、页面引入js文件 <input type="file" id="img-picker2" name="image" accept="image/*" style="display:none;" onchange="changeHandle(this)"> 三、定义file框，并写好onchange事件 <input type="file" id="img-picker2" name="image" accept="image/*" st.
Compressor.js终极指南：浏览器端JavaScript图片压缩快速上手
最新发布
gitblog_00776的博客
12-22 363
Compressor.js是一个功能强大的JavaScript图片压缩库，专为现代Web开发设计。它利用浏览器原生的Canvas API进行高效压缩，帮助开发者在前端轻松实现图片体积优化。🚀 ## 为什么需要图片压缩？ 在当今的Web应用中，图片占据了大量的网络带宽和存储空间。过大的图片文件不仅影响页面加载速度，还增加服务器负担。Compressor.js正是为解决这一问题而生！ - **
html js 图片压缩,JavaScript前端实现压缩图片功能
weixin_39751769的博客
06-03 659
为什么要前端来压缩图片最近在做一个移动端h5上传图片的功能，本来这个功能并不复杂，只需要将图片文件通过axios传到服务端即可，但是考虑到现在手机设配的拍照功能十分强大，随便一张照片都能动辄五六兆，而服务端的要求是上传图片必须小于两兆，而且直接传这么大图片，带宽它也受不了，所以前端进行压缩图片就成了一个必要的环节。压缩效果首先介绍下压缩的大概流程通过原生的input标签拿到要上传的图片文件将图片文...
终极图像优化指南：如何用Compressor.js实现Web图片极速压缩
gitblog_00941的博客
10-24 1183
你是否曾因网页图片加载缓慢而失去访客？根据研究，40%的用户会放弃加载时间超过3秒的网站。**Compressor.js**——这款轻量级JavaScript图像压缩库，正是解决这一痛点的利器！它利用浏览器原生Canvas API，在不损失视觉质量的前提下，将图片体积减少60%以上，让你的网页如闪电般加载⚡ ## ???? 为什么选择Compressor.js？三大核心优势解析 ### 1️⃣ 零...
【js】Compressor.js前端图片压缩功能的实现
未央claw
06-27 629
实战Compressor.js ，一个基于 HTML5 Canvas 和 JavaScript 编写的客户端图片压缩工具。它支持多种配置选项，可以在浏览器端对图片进行高质量的压缩和裁剪操作。
js 实现压缩图片
qq_44862552的博客
03-15 360
JavaScript本身没有提供压缩图片的方法，但是可以使用第三方库或API来实现。一种常用的方法是使用canvas，将图片绘制到canvas上，再将canvas转换为图片格式。在绘制时可以控制canvas的尺寸，从而达到压缩图片的效果。
base64之js压缩图片
dsn727455218的博客
03-07 2466
在日常的一些项目中会有上传图片之类的接口，如果图片过大了再上传的时候是非常的耗时以及占用资源，在这里就给大家分享一下如何在js中把大的图片压缩成小的图片，我这里的功能是用户点击按钮调用相机或者选择文件后进行压缩的： 直接上代码 /* 三个参数 file：一个是文件(类型是图片格式)， w：一个是文件压缩的后宽度，宽度越小，字节越小 ...
JS中通过指定大小来压缩图片
WangYuLue的博客
12-20 6067
前不久王二写了一个图片处理库，可以指定图片质量压缩图片，调用的是javaScript的原生方法 toDataURL 和 toBlob，库里有如下这些方法： 但是通过质量压缩图片有一些不足之处：无法确定压缩后图片的大小； 比如下图，王二随机选了三张图片做测试(感兴趣的小伙伴可以戳这里自行测试)，图中x轴是图片压缩质量，取值0~1,y轴是图片的压缩比： 可以看到，在设置相同的压缩图片质量下，每张图...
js优化上传大图片显示问题（压缩图片展示）
u012833739的博客
01-18 4114
亲测有效，下面是上传后的图片加载时间以及压缩图片加载时间。 一、解决方案 上传文件时，发现上传4M的图片，上传时有进度条，但是进度条结束之后，加载图片耗时917ms,当用户焦急的盯着进度条结束后，还要等上传之后的图片加载时间，这期间没有任何提示信息。   优化方案：在文件上传后，获取文件流，进行压缩图片，优先展示压缩后的图片，然后把上传成功的图片进行替换，图片展示由模糊到清晰的，在用户...
【js】javascript中base64转file、file压缩图片：
SunPeng的博客
07-24 453
【js】javascript中base64转file、file压缩图片：
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

i吵吵

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值