使用HTML5的两个api，前端js完成图片压缩。

最新推荐文章于 2022-03-24 10:39:57 发布
最新推荐文章于 2022-03-24 10:39:57 发布
阅读量840 收藏
点赞数
分类专栏： html5 jquery javascript 文章标签： html5 jquery javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jjfat/article/details/21951115
版权
jquery 同时被 3 个专栏收录
233 篇文章 0 订阅
订阅专栏
javascript
102 篇文章 0 订阅
订阅专栏
html5
67 篇文章 0 订阅
订阅专栏


主要用了两个html5的 API，一个file，一个canvas，压缩主要使用cnavas做的，file是读取文件，之后把压缩好的照片放入内存，最后内存转入表单下img.src，随着表单提交。

照片是自己用单反拍的，5M多，压缩下面3张分别是600多kb，400多kb，300kb的最后那张失真度很大了，压缩效率蛮高的。

。。。。。(代码请查看原文)




阅读原文：使用HTML5的两个api，前端js完成图片压缩

thegeek
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript前端实现压缩图片功能
11-21
为什么要前端来压缩图片 最近在做一个移动端h5上传图片的功能，本来这个功能并不复杂，只需要将图片文件通过axios传到服务端即可，但是考虑到现在手机设配的拍照功能十分强大，随便一张照片都能动辄五六兆，而服务端的要求是上传图片必须小于两兆，而且直接传这么大图片，带宽它也受不了，所以前端进行压缩图片就成了一个必要的环节。 压缩效果 首先介绍下压缩的大概流程 通过原生的input标签拿到要上传的图片文件 将图片文件转化成img元素标签 在canvas上压缩绘制该HTMLImageElement 将canvas绘制的图像转成blob文件 最后将该blob文件传到服务端 完成！
前端图片压缩方案
最新发布
dfc_dfc的博客
06-17 583
前端图片压缩
使用JSZip实现压缩文件与图片
weixin_42333548的博客
08-21 7237
JSZip简介 JSZip是一个用于创建、读取和编辑.zip文件的javascript库，有一个可爱而简单的API。JSZip支持Nodejs和浏览器端的安装使用。具体方法如下： npm install jszip npm install file-saver 浏览器端解压zip文件 后端Nodejs将zip文件以二进制形式存储到数据库中。当前端需要该zip文件时，后端将zip文件以二进制形式传输到前端，前端再解压还原。 使用JSZip压缩文件 import JSZip from 'j
js中file、blob、base64的相互转换，前端图片压缩、裁剪、文件格式转换
Coder Ben's Writing
09-14 8861
最近做了个前端图片压缩，用到了很多js文件操作api，整理一下防止健忘： 1. file转base64 /** * 获取文件的Base64 * @param file {File} 文件 * @param callback {Function} 回调函数，参数为获取到的base64 */ function fileToBase64(file, callback) { const fileReader = new FileReader() fileReader.read
利用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压缩的实现
weixin_34378969的博客
11-14 1831
本文删简自：www.zhangxinxu.com/wordpress/?…一、功能体验先看demo：使用canvas在前端压缩图片并上传demo如下截图：点击文件选择框，我们不妨选一张尺寸比较大的图片，例如下面这种2M多的钓鱼收获照：于是图片歘歘歘地传上去了：此时我们点击最终上传完毕的图片地址，会发现原来2M多3000多像素宽的图片被限制为400像素宽了：保存到本地会发现图片尺寸已经变成只有70K...
3种常用的图片压缩方法
huangpb的博客
06-03 2万+
3种常用的图片压缩方法：把图片上传到阿里云或七牛云，借用云端的图片缩放技术进行压缩。后端对图片尺寸大小进行压缩。前端用 Canvas 作为媒介压缩图片。作为一名前端攻城狮，主要介绍用 Canvas 作为媒介压缩图片。...
适用于前端的随机图片API，海量图片壁纸
江咏之
03-24 2730
前端江太公 岁月小筑 https://img.xjh.me 保罗API https://api.paugram.com/help/wallpaper 墨天逸 http://api.mtyqx.cn Unsplash https://source.unsplash.com/ 小歪API https://api.ixiaowai.cn 樱花API http://www.dmoe.cc/ EEEDOG https://www.eee.dog/tech/rand-pic-api.h.
Web Api 返回图片流给前端
weixin_30535843的博客
02-22 830
public class TestController : ApiController { public HttpResponseMessage GetImg() { //获取文件的绝对路径 string absolutePath = System.Web.Hosting.Ho...
js中字符串常用api
qq_41189709的博客
08-02 754
更多使用方法请参考 https://blog.csdn.net/grapelove01/article/details/80532566 获取字符串长度 str.length 分割字符串 str.split() 拼接字符串 str1+str2 或 str1.concat(str2) 替换字符串 str.replace(“玩游戏”,”好好学习”) 提取子字符串 str.slice(start, en...
在线API汇总（后端，前端，数据库）很全面
请叫我李先生
06-26 2945
常用API文档索引： http://tool.oschina.net/apidocs在线手册：http://www.jb51.net/shouce/JDK 1.6 API java 中文参考手册：http://shouce.jb51.net/java/jdk1.6/Mysql5.1手册：http://shouce.jb51.net/mysql/mysql 5.1 参考手册 html在线阅读版：ht...
十五个免费随机图片api接口网站[超详细]（不定时更新）
热门推荐
SectSnow的博客
04-18 9万+
随机图片api接口樱花晓晴博客Unsplash Source | API Documentation夏沫博客二次元随机图搏天api姬长信API For Docker樱道小歪API保罗｜API墨天逸EEE.DOG动漫星空岁月小筑东方Project 樱花 随机二次元图片API 网址：https://www.dmoe.cc/ 晓晴博客 随机二次元图片接口 网址：https://www.toubiec.cn/318.html Unsplash Source | API Documentation
深入研究HTML5实现图片压缩上传
weixin_33827590的博客
03-11 566
上篇文章中提到移动端上传图片，我们知道现在流量还是挺贵的，手机的像素是越来越高，拍个照动不动就是好几M，伤不起。虽然客户端可以轻轻松松实现图片压缩再上传，但是我们的应用还可能在浏览器里面打开，怎么办呢，图片压缩。受以前PC上的开发思维影响，尼玛js哪有权限去操作文件，哪有资格压缩图片啊，搞不了，你们客户端去整吧。只能说自己还是有些井底之蛙了。在HTML5的影响下，前端能干的事情越来越多了，开发的功...
前端性能优化之图片压缩详细流程（工作实用）
fearlessxmm的博客
04-22 1674
前端性能优化之图片压缩详细流程 最近在工作中，对于图片压缩效果的需求比较迫切，在这里记录一下目前为止，优化多次的图片压缩流程。 在实际工作中，我们发现，只用一种方法并不能满足实际需要，总有一些图片比较特殊，所以我们选择使用gulp构建工具和手工在线压缩结合。 工作目录 这里简略写了一下必要的文件夹和文件，实际情况文件层次可以更加丰富 myDemo -----dist -----src -...
10分钟教会你原生JS压缩图片，极其精简版
yasha的博客
11-02 2万+
1.实现思路 先通过input标签获取本地图片 把获取到的图片转换成base64格式 使用canvas中的API把图片分辨率调低（canvas只能处理base64格式的图片） 2.核心代码 //1.先通过input标签获取本地图片 <input id="file" type="file"&am
2022前端面试必备知识点：HTTP、HTML、Vue、React、JS全面解析
"这是一份全面的前端面试题集，主要涵盖前端基础，特别是与Vue.js、React.js和JavaScript相关的知识，包括HTTP协议、HTML、浏览器工作原理、Web存储、前端安全等多个方面。" 在前端面试中，了解HTTP的基础至关重要...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值