javascript实现压缩图片

最新推荐文章于 2024-04-02 11:41:18 发布
最新推荐文章于 2024-04-02 11:41:18 发布
阅读量661 收藏
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tangxinzhuan/article/details/86692149
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>压缩图片</title>
	</head>
	<body>
		<div id="">
			<label>请选择图片：</label>
			<input type="file" name="" id="myfile" value="" />
			<button type="button" onclick="YaSuo()">确定</button>
		</div>
		<div id="">
			<img id="showImg" src="" >
		</div>
		
		<script type="text/javascript">
			var quality = 0.6;	// 画质，取值范围0-1
			var maxWidth = 1080;	// 最大像素宽度
			
			/*
			 * 压缩图片。
			 */
			function YaSuo() {
				
				var fileObj = document.getElementById('myfile').files[0];
				
				console.log('文件大小：' + fileObj.size);
				
				var reader = new FileReader();
				reader.readAsDataURL
最低0.47元/天 解锁文章
糖薪砖
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端 JS 压缩图片的思路（附源码）
chenyajundd的博客
03-28 3192
我们将图片绘制到 canvas 之后，还需要将 canvas 转化为 Data URl，转化为 DataURl 之后可以显示到我们的屏幕上面，也可以存放到后端服务器，使用 canvas 所提供的 toDataURL 实例方法即可。​ 官方解释：HTMLCanvasElement.toDataURL() 方法返回一个包含图片展示的 data URI ​HTMLCanvasElement.toDataURL() - Web API 接口参考 | MDN (mozilla.org)
前端页面JavaScript实现图片压缩
12-07
可以实现前端图片压缩，基于canvas 是 HTML5 提供的一个用于展示绘图效果的标签. 在 HTML 页面中用于展示绘图效果. 最早 canvas 是苹果提出的一个方案, 今天已经在大多数浏览器中实现.所以兼容性很高，操作简单，...
JavaScript 图像压缩
商内在的博客
01-11 4993
这个示例代码中，在主线程中通过创建一个 Worker 对象并加载一个 worker.js 文件来启动一个后台线程. 在 worker.js 中，我们在 onmessage 中定义了图像压缩的逻辑，并使用 postMessage 来将压缩后的图像发送回主线程。值得注意的是，这个示例代码中进行图像压缩时的质量是每次减少0.1，如果压缩后的图像的文件大小仍然超出限制，可能需要调整这个减少量，或者考虑其他压缩策略，比如更改图像的分辨率等。该参数的值应该在 0 到 1 之间，表示图像质量的百分比。
JavaScript简单粗暴实现图片压缩(工具向)
u014572178的博客
03-28 558
互联网技术的快速发展，越来越多的业务需要大量的图片资源。而在处理这些图片资源的过程中，图片压缩是必不可少的一部分，因为它可以显著的减少资源文件的大小，加快资源的加载速度
JS创建ZIP文件，JSZip的使用
砷碲 - Shendi
01-30 2941
最近编写压缩工具，需要使用js创建zip文件，使用 JSZip 插件官网： https://stuk.github.io/jszip/
JavaScript前端实现压缩图片功能
10-15
因此，前端压缩图片功能显得尤为重要。本文将详细介绍如何使用JavaScript在前端实现图片压缩功能。 首先，我们探讨一下为什么要在前端进行图片压缩。传统的图片上传方式是直接将图片文件发送到服务器，但当图片尺寸...
纯 Js 结合 Canvas 实现图片压缩
最新发布
06-19
本文将深入探讨如何使用纯JavaScript结合Canvas API实现图片压缩，这是一项非常实用的技术，可以帮助我们减少图片文件大小，从而提高网页性能。 首先，我们要了解HTML5中的Canvas元素。Canvas是一个二维绘图上下文...
JavaScript图片压缩前端基操
06-16
使用原生的html、js实现图片压缩，主要思想是创建一个canvas对象，再将选中的图片转化为base64的图片格式画在canvas画布上，最后将所得到的canvas图片进行图片压缩。提供了base64位压缩后的图片转化为原始的File对象
js实现图片压缩功能（超过设定大小自动压缩图片）
CHINESE0726的博客
04-02 373
在开发中如果图片过大需要压缩，则可通过该方法进行压缩并返回压缩完成后的图片。
探索JSZip：一款强大的JavaScript压缩与解压库
gitblog_00026的博客
03-20 742
探索JSZip：一款强大的JavaScript压缩与解压库 项目地址:https://gitcode.com/Stuk/jszip 在前端开发中，处理文件和数据包的压缩与解压是一项常见的任务。而JSZip正是这样一个工具，它是一个纯JavaScript实现的ZIP文件处理库，能够无缝地集成到你的Web应用中。 项目简介 JSZip是一款轻量级且功能丰富的库，允许你在浏览器或者Node.js环境中创...
对JavaScript代码压缩有什么好处？
w2sft的博客
03-13 422
对JavaScript代码压缩有什么好处？
javascript是如何压缩代码的
m0_68997646的博客
10-28 5016
javascript是如何压缩代码的
js实现对上传图片进行压缩并且预览
热门推荐
感恩、奋进、自信
12-08 5万+
js实现对上传图片的路径转成base64编码，并且对图片进行压缩，实现预览功能 需要先引入jquery:  1、html如下 2、css如下 #previewImg{ background-color: black; width: 400px;
js实现图片质量压缩demo
逸尘的专栏
12-28 1万+
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>XMLHttpRequest上传文件</title> <script type="text/javascript"> /* 三个参数 file：一个是文件(类型是图片格式)， w：一个是文件压缩的后宽度
JavaScript的压缩
.
11-21 252
简述 如果非常着急，这块可以跳过直接从约束条件开始也行。 JavaScript压缩这块需要权衡一下，压缩的成本会影响咱们自己的调试进度增加了编码、测试的负担，而的确给产品或用户带来了多一些的安全、性能上的提升。 参考ext、jquery等开源Java Script框架的风格，需要有两种JavaScript版本： 有一版是我们开发人员自己调试、开发用的 另一版则是被产品用的，这种方...
利用HTML5，前端js实现图片压缩
Shidoudou
03-22 1万+
主要用了两个html5的 API，一个file，一个canvas，压缩主要使用cnavas做的，file是读取文件，之后把压缩好的照片放入内存，最后内存转入表单下img.src，随着表单提交。 照片是自己用单反拍的，5M多，压缩下面3张分别是600多kb，400多kb，300kb的最后那张失真度很大了，压缩效率蛮高的。   charset="utf-8"/> File API
js实现图片压缩
不染心的博客
08-24 534
商品发布 var image = ''; var base64=""; function selectImage(file){ if(!file.files || !file.files[0]){ return; } var reader = new FileReader(); reader.on
BMP格式的图片怎在线压缩
weixin_33711647的博客
04-02 1418
BMP格式的图片怎在线压缩，大家在上传图片的时候有没有遇到过“因文件太大，上传失败”的问题，图片太大不仅占用空间，而且十分影响传递，那有没有什么解决方法呢，接下来让小编来告诉大家吧。第一、打开电脑，进入电脑上的浏览器，点开迅捷在线压缩网站。 第二、点入在线压缩的界面后，会看到有三个选项，分别是在线PDF压缩、在线图片压缩、在线视频压缩、我们点击在线图片压缩。 第三、进入在线图片压缩后，点击添加图片...
BMP图片的解析,关于压缩方式
weixin_30483697的博客
04-11 457
在做一个显示bmp图片到lcd屏的时候,发现有些bmp图显示不对. 同样是16bit bmp却有差异. 就查了一下格式. bmp文件格式 位图文件的组成 结构名称 符号 位图文件头(bitmap-file header) BITMAPFILEHEADER bmfh 位图信息头(bitmap-info...
使用 html 和javascript 实现 图片压缩上传到服务器
05-17
可以通过以下步骤使用 HTML 和 JavaScript 实现图片压缩并上传到服务器： 1. 在 HTML 文件中创建一个 input 元素，使用户可以选择要上传的图片文件： ```html ``` 2. 使用 JavaScript 获取用户选择的图片文件，...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值