前端图片压缩 js

最新推荐文章于 2021-09-16 16:08:12 发布
最新推荐文章于 2021-09-16 16:08:12 发布
阅读量206 收藏
点赞数
分类专栏： html/js/css相关知识
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xuji7483/article/details/105202345
版权

demo直接下载

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <img id="hehehe" />
        <input type="file" id="selectfile" οnchange="imgChange()" />
        <script src="lib/piccompre/localResizeIMG/dist/lrz.all.bundle.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            function imgChange() {
                lrz(document.getElementById("selectfile").files[0], {
                    width: 500, //设置图片压缩后的最大宽度，默认为原图宽度
                    height: 500, //同上
                    quality: 0.4, //图片压缩质量，取值 0 - 1，默认为 0.7
                }).then(function(rst) {
                    // 展示处理好的图片
                    // var img = new Image();
                    // img.src = rst.base64;
                    // img.onload = function() {
                    //     document.body.appendChild(img);
                    // };
                    document.getElementById("hehehe").setAttribute('src', rst.base64);
                    return rst;
                }).then(function(rst) {
                    // 展示处理好的图片
                    var UForm = new FormData();
                    UForm.append("subImg", rst.file);
                    console.log(UForm.get("subImg"));
                }).catch(function(err) { //处理失败后执行
                    alert(err);
                }).always(function() { //必然执行
                });
            }
        </script>
    </body>
</html>

米心
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js使用lrz压缩图片，上传七牛
12-30
使用js插件lrz压缩图片，然后调用七牛上传接口，上传图片到七牛服务器
lrz实现原理_移动端图片压缩上传
weixin_30373263的博客
12-31 1129
[2017年文章]前提更要：1、压缩图片的几种方式：php、js2、对移动端手机上传的图片进行压缩，lrz的原理和使用方法3、对HHuploadify升级，lrz使其能够对图片进行压缩本地客户端压缩图片js1、作用前端本地客户端压缩图片，兼容IOS，Android，PC：2、原理：canvas渲染图片，再通过 toDataURL 方法压缩保存为base64字符串2.1 用户使用input file...
ReactJS & antd 环境中项目上传图片后压缩（lrz的使用）
Wu_shuxuan的博客
12-26 6034
lrz说明 用于：在客户端压缩好要上传的图片可以节省带宽更快的发送给后端，特别适合在移动设备上使用。 解决了很多问题：图片扭曲、某些设备不自动旋转图片方向，没有jpeg压缩算法.. 不支持new Blob,formData构造的文件size为0.. 还有某些机型和浏览器（例如QQX5浏览器）莫名其妙的BUG.. 按需加载（会根据对应设备自动异步载入JS文件，节省不必要带宽） 原生JS编写，不依赖例如
lrz：图片压缩上传
sunluyi的博客
12-20 1406
lrz图片压缩 npm install lrz // main.js引入 import lrz from 'lrz' <input type="file" @change="upfileimg($event)"> //上传图片 methods:{ upfileimg(e) { this.$toast.loading({ duration: 0, forbidClick...
JavaScript图片压缩上传
刘旭利的博客
12-21 778
采用lrz.bundle.js进行图片压缩 场景：手机端上传的图片都是2M以上，我的手机像素很高通常在5M以上，有的甚至将近10M。这对服务器的带宽带来很大的压力。用户在使用过程中响应的时间长（用户会认为手机卡死）。 为了解决这一问题，我们需要先将图片压缩后再进行上传到服务器。 步骤：1、引入js文件   图1 注意：lrz.bundle.js需要引入到页面中，图1中其他的
js压缩图片
weixin_30662109的博客
08-09 127
第一步： 执行命令： cnpm i lrz -S 第二步： 在main.js中引入： import lrz from 'lrz' 第三步： 使用函数： 返回结果是一个promise对象。 lrz( file, { width : 300 ...
lrz.js获取图片旋转角度_图像旋转
weixin_39807352的博客
12-23 469
图像旋转是指图像按照某一点转动一定的角度的过程，旋转过程中图像的原始大小并不改变。图像旋转后图像的对称轴以及中心坐标原点都有可能会发生变化，因此需要对图像旋转中得坐标进行相应的变换。图像的坐标系是由X轴水平向右，Y轴竖直向下构成。假设图像旋转中心的坐标为（Cx,Cy）,原始图像数据的坐标为（x,y）,旋转后目标图像的坐标为（x1,y1）。变换后的坐标形式是X轴正方向水平向右，y轴正方向竖直向上。在...
lrz的使用
一条会流泪的鱼
11-14 7002
在最近的一个物业管理的项目中，用户上传图片的时，需要对图片的大小进行限制，于是使用了未曾接触到的lrz插件对用户上传的图片进行压缩。关于lrz插件的使用有关以下记录。 1.如何使用 使用 npm 进行下载 cnpm instll lrz --save 在main.js中引入 import lrz from 'lrz' 用户进行图片上传时，需要用一个input fire 来获取图片。 &l...
轻便的前端压缩
qq_21987433的博客
11-16 392
上次的前端压缩，效果是可以达到，但是最终结果总是不近如意，压得是图片的尺寸，现在我将介绍一款前端压缩： html： 上传预生成保单截图
前端实现图片压缩，限制大小和宽高
kanshanhui的博客
09-16 2353
最近公司开发业务里有个需求是对上传图片进行压缩限制大小。实现限制大小的时候，采用的是二分法。 // 图片压缩大小至40kb， device为二分法压缩次数 // 这里压缩次数由图片大小去控制，可以多尝试几个数，来达到最好的压缩效果 CompressorImage(file, size = 40, device = 10) { return new Promise((resolve) => { const reader = new FileReader() // 创建
lrz.mobile.min.js
12-25
base64图片压缩插件工具，lrz插件，适用于微信端和H5，移动端Android，IOS，压缩能达到90%以上
lrz图片压缩插件
09-30
适用于WebApp,后台开发
html img图片等比例缩放_前端如何针对上传图片进行压缩处理
weixin_39623244的博客
12-01 1484
在前端开发中，尤其是公众号开发时，手机上传的拍照图片都是非常大，基本都是几兆以上，对于应用存储来说，非常这个图片功能就非常占用磁盘空间，而且在上传下载时，也占用太多的网络资源，但遇到这种情况时，就需要进入图片等比率进行缩放，把图片压缩至KB级别。以下是前端压缩函数，基本带有注释，供大家参考调用压缩函数压缩函数源码如下：调用压缩函数dealImage(this.result, { //压缩 widt...
前端上传图片并初步压缩图片
jared.wang
07-04 1142
上传图片和压缩 前端处理用户图片, 控制上传图片的大小, 减轻服务器流量压力 首先通过input获取图片 <input type="file" accept="image/*" alt="图片" multiple @change="changeImage"> 获取所有图片数据并添加到一个数组中 let file = e.target.files let arr = ...
Vue压缩图片插件——localResizeIMG(简称lrz)
机智的奎哥的博客
09-10 4961
使用前须知： GitHub:localResizeIMG地址 这个项目已不再维护了，可能很长一段时间都不会更新了。 插件演示地址 引用： npm i lrz -S // 注意：使用npm下载，不要使用cnpm下载，有坑 使用： import lrz from "lrz"; 本人使用的是Vant框架，获取file对象方法为： <van-field name="uploader" label="图片上传" multiple> <template #input>
前端图片压缩（几乎无损）
qq_35168861的博客
12-03 6547
前端经常会有图片压缩这样的需求，我尝试过很多种压缩方法，最后决定推荐lrz压缩方式 lrz(file, [options]); 1、file 通过 input:file 得到的文件，或者直接传入图片路径 2、[options] 这个参数允许忽略 3、width {Number} 图片最大不超过的宽度，默认为原图宽度，高度不设时会适应宽度。 4、height {Number} 同上 5、quality {Number} 图片压缩质量，取值 0 - 1，默认为0.7 库的话直接去http://www.bejso
localResizeIMG lrz压缩文件
combat_me的博客
10-13 646
最近做项目时用到了图片压缩转base64，遇到了一些问题，经过研究学习总结一下。 1.主流用法 通过file插件文件上传，然后获取文件对象进行压缩处理 "upload()" type="file" accept="image/*" /> function upload() { lrz(this.files[0]) .then(function (rst)
vue lrz.js
猿小龙
03-08 4628
最近的项目写一个微信公众号上传图片的功能，在网上找到了一个插件挺好用的； 他是把图片转换成Base64格式的然后上传字符串； 下载插件 cnpm installlrz --save-dev html &lt;input type="file" name="" id="photo" accept="image/*" @change="uploadFiles($event)"&gt;
前端 图片压缩 公共库
最新发布
06-02
在前端中，有很多开源的库可以用于图片压缩。下面是一些常用的图片压缩库： 1. `compressorjs`：这是一款基于`canvas`的图片压缩库，可以将大图片压缩为较小的大小，并保持其清晰度。它支持压缩文件的大小、像素数和宽高比，并且可以在压缩后输出`Blob`、`base64`或压缩后的`canvas`对象。GitHub地址：https://github.com/fengyuanchen/compressorjs 2. `image-compressor`：这是另一款基于`canvas`的图片压缩库，它可以将图片压缩为指定大小，并且可以输出`Blob`或`base64`。它支持多种图片格式，例如`JPEG`、`PNG`、`GIF`等。GitHub地址：https://github.com/xkeshi/image-compressor 3. `lrz`：这是一款基于`HTML5 FileReader`和`canvas`的图片压缩库，可以将图片压缩为指定大小，并且可以输出`Blob`、`base64`或`canvas`对象。它的特点是可以对大图片进行压缩，并且可以保持图片的清晰度。GitHub地址：https://github.com/wsky/lrz 这些库都有非常详细的文档和示例，可以根据自己的需求选择合适的库进行使用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值