js 实现图片压缩

最新推荐文章于 2024-03-26 00:42:08 发布
最新推荐文章于 2024-03-26 00:42:08 发布
阅读量581 收藏 1
点赞数
文章标签： canvas javascript js html5 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zz975896590/article/details/119990841
版权

js 实现图片压缩

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    </head>
    <body>
        <input id="file" type="file">
        <img src="" alt="" id="img">
    </body>
    <script type="text/javascript">
        var eleFile = document.querySelector('#file');
        // 压缩图片需要的一些元素和对象
        var reader = new FileReader(),
            //创建一个img对象
            img = new Image();

        // 选择的文件对象
        var file = null;

        // 缩放图片需要的canvas
        var canvas = document.createElement('canvas');
        var context = canvas.getContext('2d');

        // base64地址图片加载完毕后
        img.onload = function() {
            // 图片原始尺寸
            var originWidth = this.width;
            var originHeight = this.height;
            // 最大尺寸限制，可通过国设置宽高来实现图片压缩程度
            var maxWidth = 800,
                maxHeight = 800;
            // var maxWidth = originWidth,
            //  maxHeight = originHeight;
            // // 目标尺寸
            var targetWidth = originWidth,
                targetHeight = originHeight;
            // 图片尺寸超过400x400的限制
            if (originWidth > maxWidth || originHeight > maxHeight) {
                if (originWidth / originHeight > maxWidth / maxHeight) {
                    // 更宽，按照宽度限定尺寸
                    targetWidth = maxWidth;
                    targetHeight = Math.round(maxWidth * (originHeight / originWidth));
                } else {
                    targetHeight = maxHeight;
                    targetWidth = Math.round(maxHeight * (originWidth / originHeight));
                }
            }
            // canvas对图片进行缩放
            canvas.width = targetWidth;
            canvas.height = targetHeight;
            // 清除画布
            context.clearRect(0, 0, targetWidth, targetHeight);
            // 图片压缩
            context.drawImage(img, 0, 0, targetWidth, targetHeight);
            /*第一个参数是创建的img对象；第二个参数是左上角坐标，后面两个是画布区域宽高*/
            //压缩后的图片base64 url
            /*canvas.toDataURL(mimeType, qualityArgument),mimeType 默认值是'image/jpeg';
             * qualityArgument表示导出的图片质量，只要导出为jpg和webp格式的时候此参数才有效果，默认值是0.92*/
            var newUrl = canvas.toDataURL('image/jpeg', 0.5); //base64 格式
            //console.log(canvas.toDataURL('image/jpeg', 0.92));
            console.log(newUrl) //压缩过后的base64码
            $('#img').attr('src',newUrl)
        };

        // 文件base64化，以便获知图片原始尺寸
        reader.onload = function(e) {
            img.src = e.target.result;
        };
        eleFile.addEventListener('change', function(event) {
            file = event.target.files[0];
            // 选择的文件是图片
            if (file.type.indexOf("image") == 0) {
                reader.readAsDataURL(file);
            }
        });
    </script>
</html>
沉、睡
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端页面JavaScript实现图片压缩
12-07
可以实现前端图片压缩，基于canvas 是 HTML5 提供的一个用于展示绘图效果的标签. 在 HTML 页面中用于展示绘图效果. 最早 canvas 是苹果提出的一个方案, 今天已经在大多数浏览器中实现.所以兼容性很高，操作简单，...
Js利用Canvas实现图片压缩功能
10-19
下面小编就为大家带来一篇Js利用Canvas实现图片压缩功能。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
前端js实现canvas压缩图片并上传
铁锤妹妹的博客
12-12 4106
可以减少用户的等待时间，提升使用体验，目前手机拍摄的图片文件大小一般在几 M 左右，文件直接上传时会有卡顿现象
js对图片进行压缩，并上传
weixin_40841731的博客
08-07 1955
以下代码，可以直接拷进html文件中，在浏览器打开即可看到效果。
ElementPlus Upload组件使用compressorjs压缩图片上传
最新发布
applebomb的专栏
03-26 1208
Compressor.js 是一个用于在客户端（即在浏览器中）对图片进行压缩的 JavaScript 库，将其整合在element-ui的upload组件，令组件可以自动压缩数据后上传，加快网络效率
JavaScript简单粗暴实现图片压缩(工具向)
u014572178的博客
03-28 522
互联网技术的快速发展，越来越多的业务需要大量的图片资源。而在处理这些图片资源的过程中，图片压缩是必不可少的一部分，因为它可以显著的减少资源文件的大小，加快资源的加载速度
JS图片压缩+图片上传前检测类型、大小、尺寸
初心
01-13 2454
原生JS压缩图片 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js压缩图片</title> </head> <body> <img id="img" src=""> <input id="file" type="file" onchange="compressImg()"> </bod
js上传图片并压缩
Fly的博客
05-21 1600
js上传图片并压缩1.html&lt;input type="file" name="file" onchange="showPreview(this)" /&gt; &lt;img id="portrait" src="" width="70" height="75"&gt;2.jsfunction showPreview(sour
JavaScript前端实现压缩图片功能
10-15
主要介绍了JavaScript前端实现压缩图片功能，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
前端JS实现图片压缩，简易好用版
11-15
前端JS实现图片压缩，直接浏览器打开后，选择要压缩的图片文件即可
js 压缩图片上传
10-11 1403
js 压缩图片， 上传，
纯js 实现图片压缩，并返回file图片信息
qq_40591925的博客
05-26 886
压缩方法： /* *file：文件的file *obj配置 {quality：0.2}压缩比例 *callback 回调 */ compressImg(file, obj, callback) { let _this = this; var ready = new FileReader(); /*开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,readyState属.
原生js实现上传图片按比例压缩方案【附带插件方案】
weixin_44314609的博客
03-22 965
【代码】原生js实现上传图片按比例压缩方案【附带插件方案】
使用JS压缩图片上传图片
小小博客
05-28 3506
对于图片使用JS进行压缩上传
使用js将图片压缩到指定大小
weixin_42601608的博客
01-07 1529
可以使用 JavaScript 库或框架来实现图片压缩功能。 例如可以使用 "canvas" 元素和 "FileReader" 对象来实现图片压缩。 以下是一个简单的示例代码： // 选择文件 input 元素的 id const inputId = 'input'; // 压缩后图片的大小(单位为字节) const targetSize = 100000; // 选择文件 const inp...
如何使用js对图像进行压缩
忧郁的蛋的专栏
07-05 7948
JavaScript 可以使用类似于 canvas 和 web workers 来实现图像压缩。使用 canvas，可以将图像绘制到 canvas 上，然后使用 canvas 提供的 toBlob() 或 toDataURL() 方法将其转换为不同格式的图像。在这些方法中指定图像质量参数即可实现压缩。使用 web workers，可以在后台执行图像压缩，以避免阻塞 UI 线程。
JavaScript 图像压缩
商内在的博客
01-11 4932
这个示例代码中，在主线程中通过创建一个 Worker 对象并加载一个 worker.js 文件来启动一个后台线程. 在 worker.js 中，我们在 onmessage 中定义了图像压缩的逻辑，并使用 postMessage 来将压缩后的图像发送回主线程。值得注意的是，这个示例代码中进行图像压缩时的质量是每次减少0.1，如果压缩后的图像的文件大小仍然超出限制，可能需要调整这个减少量，或者考虑其他压缩策略，比如更改图像的分辨率等。该参数的值应该在 0 到 1 之间，表示图像质量的百分比。
js图片压缩
qq_23244029的博客
05-11 7096
js图片压缩
JavaScript 压缩图片
且听风吟的博客
01-18 6099
上传图片时候，遇到要上传很大的图片，上传的时候就会很慢。所以，需要对图片进行压缩处理来优化上传功能。 图片压缩函数： /* * 图片压缩 * img 原始图片 * width 压缩后的宽度 * height 压缩后的高度 * ratio 压缩比率 */ function compress(img, width, height, ratio) { var canvas, ctx, img64; canvas = document.
使用 html 和javascript 实现 图片压缩上传到服务器
05-17
可以通过以下步骤使用 HTML 和 JavaScript 实现图片压缩并上传到服务器： 1. 在 HTML 文件中创建一个 input 元素，使用户可以选择要上传的图片文件： ```html <input type="file" id="file-input"> ``` 2. 使用 JavaScript 获取用户选择的图片文件，并将其转换为 base64 格式： ```javascript const fileInput = document.getElementById('file-input'); const file = fileInput.files[0]; const reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function() { const base64Image = reader.result; }; ``` 3. 使用 JavaScript 创建一个 Image 对象，加载用户选择的图片文件，并在加载完成后将其绘制到一个 Canvas 上： ```javascript const img = new Image(); img.src = base64Image; img.onload = function() { const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); // 设置 Canvas 大小为图片大小 canvas.width = img.width; canvas.height = img.height; // 在 Canvas 上绘制图片 ctx.drawImage(img, 0, 0); // 获取 Canvas 上的压缩后的图片数据 const compressedImage = canvas.toDataURL('image/jpeg', 0.5); }; ``` 在这个例子中，我们将图片压缩为质量为 50% 的 JPEG 格式。 4. 创建一个 XMLHttpRequest 对象，将压缩后的图片数据作为请求体发送到服务器： ```javascript const xhr = new XMLHttpRequest(); xhr.open('POST', '/upload'); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.send(`image=${encodeURIComponent(compressedImage)}`); ``` 在这个例子中，我们将压缩后的图片数据作为 image 参数发送到服务器。 完整的 HTML 和 JavaScript 代码如下： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>图片上传</title> </head> <body> <input type="file" id="file-input"> <button id="upload-btn">上传</button> <script> const fileInput = document.getElementById('file-input'); const uploadBtn = document.getElementById('upload-btn'); fileInput.addEventListener('change', function() { const file = fileInput.files[0]; const reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function() { const base64Image = reader.result; const img = new Image(); img.src = base64Image; img.onload = function() { const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); // 设置 Canvas 大小为图片大小 canvas.width = img.width; canvas.height = img.height; // 在 Canvas 上绘制图片 ctx.drawImage(img, 0, 0); // 获取 Canvas 上的压缩后的图片数据 const compressedImage = canvas.toDataURL('image/jpeg', 0.5); uploadBtn.addEventListener('click', function() { const xhr = new XMLHttpRequest(); xhr.open('POST', '/upload'); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.send(`image=${encodeURIComponent(compressedImage)}`); }); }; }; }); </script> </body> </html> ``` 请注意，这只是一个简单的示例，实际应用中还需要考虑更多的因素，例如图片大小限制、上传进度显示、错误处理等等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值