十分钟教会你原生JS压缩图片,极其精简版
十分钟教会你原生JS压缩图片,极其精简版
原文链接:https://blog.csdn.net/yasha97/article/details/83629510
(一)实现思路
- 先通过input标签获取本地图片
- 把获取到的图片转换成base64格式
- 使用canvas中的API把图片分辨率调低(canvas只能处理base64格式的图片)
注:不懂base64的同学可以花5分钟看看这个《用FileReader对象把图片转换成base64格式》
(二)核心代码
//1.先通过input标签获取本地图片
<input id="file" type="file">//2.把获取到的图片转换成base64格式(以下代码为固定搭配)
let fileObj = document.getElementById('file').files[0] //获取文件对象
let reader = new FileReader() //新建一个FileReader对象
reader.readAsDataURL(fileObj) //将读取的文件转换成base64格式
reader.onload = function(e) {console.log(e.target.result) //转换后的文件数据存储在e.target.result中
}//3.在canvas中把图片分辨率调低
context.drawImage(image, 0, 0, imageWidth, imageHeight)
(三)步骤详解
<body><img id="img" src=""><input id="file" type="file">
</body>
<body><img id="img" src=""><input id="file" type="file" onchange="compress()">
</body>
<script>
// 把图片转换成base64格式
function compress() { let fileObj = document.getElementById('file').files[0] //图片文件对象let reader = new FileReader()reader.readAsDataURL(fileObj)reader.onload = function(e) {console.log(e.target.result) //这里的e.target.result就是转换后base64格式的图片文件}
}
</script>
<body><img id="img" src=""><input id="file" type="file" onchange="compress()">
</body>
<script>// 对图片进行压缩
function compress() { let fileObj = document.getElementById('file').files[0] //上传文件的对象let reader = new FileReader()reader.readAsDataURL(fileObj)reader.onload = function(e) {let image = new Image() //新建一个img标签(不嵌入DOM节点,仅做canvas操作)image.src = e.target.result //让该标签加载base64格式的原图image.onload = function() { //图片加载完毕后再通过canvas压缩图片,否则图片还没加载完就压缩,结果图片是全黑的let canvas = document.createElement('canvas'), //创建一个canvas元素context = canvas.getContext('2d'), //context相当于画笔,里面有各种可以进行绘图的APIimageWidth = image.width / 2, //压缩后图片的宽度,这里设置为缩小一半imageHeight = image.height / 2, //压缩后图片的高度,这里设置为缩小一半data = '' //存储压缩后的图片canvas.width = imageWidth //设置绘图的宽度canvas.height = imageHeight //设置绘图的高度//使用drawImage重新设置img标签中的图片大小,实现压缩。drawImage方法的参数可以自行查阅W3Ccontext.drawImage(image, 0, 0, imageWidth, imageHeight)//使用toDataURL将canvas上的图片转换为base64格式data = canvas.toDataURL('image/jpeg')//将压缩后的图片显示到页面上的img标签document.getElementById('img').src = data}}
}
</script>
(四)完整代码
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>压缩图片demo</title>
</head>
<body><img id="img" src=""><input id="file" type="file" onchange="compress()">
</body>
<script>// 对图片进行压缩
function compress() { let fileObj = document.getElementById('file').files[0] //上传文件的对象let reader = new FileReader()reader.readAsDataURL(fileObj)reader.onload = function(e) {let image = new Image() //新建一个img标签(还没嵌入DOM节点)image.src = e.target.resultimage.onload = function() {let canvas = document.createElement('canvas'), context = canvas.getContext('2d'),imageWidth = image.width / 2, //压缩后图片的大小imageHeight = image.height / 2,data = ''canvas.width = imageWidthcanvas.height = imageHeightcontext.drawImage(image, 0, 0, imageWidth, imageHeight)data = canvas.toDataURL('image/jpeg')//压缩完成 document.getElementById('img').src = data}}
}
</script>
</html>
十分钟教会你原生JS压缩图片,极其精简版相关推荐
- 10分钟教会你原生JS压缩图片,极其精简版
1.实现思路 先通过input标签获取本地图片 把获取到的图片转换成base64格式 使用canvas中的API把图片分辨率调低(canvas只能处理base64格式的图片) 注:不懂base64的同 ...
- 电容指纹识别模块使用教程十分钟教会你使用指纹识别
电容指纹识别模块使用教程十分钟教会你使用指纹识别 FPC1020A 引脚说明 使用前准备 接线说明 使用参考 总结 原文链接:https://www.yourcee.com/newsinfo/2923 ...
- 如何用原生JS制作图片时钟
程序设计之道无远弗届,御晨风而返.---- 杰佛瑞 · 詹姆士 今天分享一个小demo,如何用原生JS制作图片时钟,话不多说上代码. html[外链图片转存失败(img-mD0n42FM-156223 ...
- js 压缩图片及ajax上传图片
js 压缩图片及ajax上传图片 js压缩图片 ajax 上传文件 最近做的一个微信活动中需要用到图片上传功能,具体就是用户通过手机拍照上传图片来参与活动.在测试的过程中我们发现上传的图片非常大.我们 ...
- 如何上传图片到fileupload空间_如何用原生js写图片上传组件v2.0(还有新版本)?...
js图片上传组件: 基本要求: 1.上传的图片可预览,可删除,可被覆盖更新 2.要求图片格式为jpg和png,大小不能超过2M 新加需求: 1.模拟回显,可用本地存储(实际上的回显是通过后台传过来的u ...
- 原生JS实现图片滚动
2019独角兽企业重金招聘Python工程师标准>>> 原生JS实现图片滚动 一.原理 黑色盒子是最终显示滚动图像的区域,绿色盒子为其子容器,其宽度要大于黑色外层盒子,这样才能通过设 ...
- html多图轮播淡入淡出js,原生JS实现图片轮播与淡入效果的简单实例
最近对css的兴趣提不起来,因为以前对图片轮播一直耿耿于怀苦于学艺不精,所以,花了点时间熟悉了一下js.然后一条道走到黑,用jquery和js写了一下轮播和图片淡入的效果.以后学习的路很长,希望自己在 ...
- html原生js实现图片轮播,原生JS实现图片轮播切换效果
原生JS实现图片轮播切换效果 2019-01-06 编程之家 https://www.jb51.cc 编程之家收集整理的这篇文章主要介绍了原生JS实现图片轮播切换效果,编程之家小编觉得挺不错的,现在分 ...
- 十分钟教会女朋友上手阿里云服务器
十分钟教会女朋友上手阿里云服务器 云服务的概念越来越火,阿里云的品牌也经常出现在圈内圈外人的视野里.作为程序员的我们更是不得不接触的一个概念.最近很多人因为很多原因购买了阿里云服务器却不知道怎么使用, ...
最新文章
- php集成paypal付款流程,在PHP中集成PayPal标准支付
- Python学习笔记之五:类定义
- python基础语法有哪些-python有哪些语法元素
- 代码:android崩溃日志收集和处理
- DQN 笔记 State-action Value Function(Q-function)
- Mysql Oracle 工具推荐
- boost::gregorian模块实现自出生以来的天数的测试程序
- 英文书《用unreal来学习c++》_用机器学习来概括《哈利波特》,四句话总结一场戏...
- 项目中AOP的使用-读写分离
- 恭祝月圆·家圆·团圆
- 二叉树的构建--BST
- 为什么每个邮件收到后都会有一个htm的附件_职场邮件:领导、同事都喜欢收到的邮件丨邮件技巧...
- bootstrap 模态框modal
- 获取硬盘序列号(VC)
- R笔记3:ggplot绘制商务图表…
- BUUCTF Misc 神秘龙卷风
- IPD的主要难点在I即集成,这需要在别人身上穿洞
- Maven打包war报错
- 数据分析离不开商业分析
- VC++6.0显示代码行号【成功破解行数显示限制,完全免费!!!】