html下纯JS实现图片压缩、预览、图片Base64转换
1 function ImgToBase64(file, maxLen, callBack) { 2 var img = new Image(); 3 4 var reader = new FileReader();//读取客户端上的文件 5 reader.onload = function () { 6 var url = reader.result;//读取到的文件内容.这个属性只在读取操作完成之后才有效,并且数据的格式取决于读取操作是由哪个方法发起的.所以必须使用reader.onload, 7 img.src = url;//reader读取的文件内容是base64,利用这个url就能实现上传前预览图片 8 }; 9 img.onload = function () { 10 //生成比例 11 var width = img.width, height = img.height; 12 //计算缩放比例 13 var rate = 1; 14 if (width >= height) { 15 if (width > maxLen) { 16 rate = maxLen / width; 17 } 18 } else { 19 if (height > maxLen) { 20 rate = maxLen / height; 21 } 22 }; 23 img.width = width * rate; 24 img.height = height * rate; 25 //生成canvas 26 var canvas = document.createElement("canvas"); 27 var ctx = canvas.getContext("2d"); 28 canvas.width = img.width; 29 canvas.height = img.height; 30 ctx.drawImage(img, 0, 0, img.width, img.height); 31 var base64 = canvas.toDataURL('image/jpeg', 0.9); 32 callBack(base64); 33 }; 34 reader.readAsDataURL(file); 35 }
调用方式:
1 $(function () { 2 $("#img").change(function () { 3 var file = $(this)[0].files[0];//获取input file控件选择的文件 4 5 ImgToBase64(file, 720, function (base64) { 6 $("#img1")[0].src = base64;//预览页面上预留一个img元素,载入base64 7 $("#img1")[0].width = 300;//设定宽高,不然会自动按照压缩过的图片宽高设定,有可能超出预想的范围。 //直接利用ajax上传base64到服务器,完毕 8 }); 9 }) 10 })
转载于:https://www.cnblogs.com/tiomer/p/7040742.html
html下纯JS实现图片压缩、预览、图片Base64转换相关推荐
- 纯js实现点击预览图片效果
效果如图所示 具体实现如下 //点击放大 function clickImg(){var lis=document.getElementById('imgList').getElementsByTag ...
- H5开发:使用H5、CSS、JS、JQUERY实现从本地选择图片、预览图片、上传图片列表
需求描述 使用H5.CSS.JS.JQUERY 点击添加图片按钮,从本地选择图片(同名图片不可重复选择),在页面预览选中的图片 点击图片查看大图,点击图片右上角"×"删除此图 点击 ...
- 微信小程序 - 选择图片、预览图片、删除图片
为什么80%的码农都做不了架构师?>>> 小程序开发中你可能会遇到上传的图片首先会选择图片之后预览看下或者不满意需要删除图片,才会提交吧,这样应该是一个比较好的处理方式. 微信 ...
- 微信小程序选择图片和预览图片
作者>:燕潇洒 视频中,老师也是看着官方文档,为学生们讲解,微信提供了系统的方法来选择图片. wx.chooseImage({}) 此方法是用来选择图片的方法,具体使用如下: data: {av ...
- html 缩略图点击预览,[每天进步一点点~] uni-app 点击图片实现预览图片列表
点击图片,实现预览图片功能,并且可循环预览图片列表! image.png 一.多张图片预览 html代码 js代码 data(){ return { photos:[ { src: '图片路径1'}, ...
- JS图片压缩预览/下载
前言 好像没啥好说的~ 大概做法 先由filereader获取图片的base64,控制图片生成,但不显示. 然后将图片按比例设置好压缩后的宽高绘制在canvas画布上. 之后利用canvas的自带方法 ...
- 原生js+css实现带预览图片的幻灯片效果实例
先总结一下,里面的用到的关键知识点 CSS中用到的知识点有: 过渡效果:transition,下面是语法,用到时候一般要加上浏览器内核前缀.本实例中主要用到过渡的地方是opacity和right tr ...
- jQuery点击头像上传头像图片并预览图片
HTML代码 <div class="img_show img_show1"> <img src="img2/img06.jpg&quo ...
- imagepreview使用案例_微信小程序wx.previewImage预览图片实例详解
一.小知识 二.例子 1.wxml 2.wxss .container { box-sizing:border-box; padding:20px; } .previewimg{ float:left ...
- uniapp点击上传图片,预览图片,删除图片
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言 一.uniapp点击上传图片 二.使用步骤 1.html部分 2.js部分 3.css部分 前言 提示:这里可以添加本 ...
最新文章
- 慕课网Flask高级编程实战-10.鱼书业务处理
- 构建之法阅读笔记01
- python functools.wraps functools.partial实例解析
- jmeter怎么在服务器上运行,如何通过jenkins在远程服务器上运行jmeter测试
- java 8 stream_Java 8 Stream示例
- C/C++线程与多线程工作笔记0007---单线程实现文件查找系统
- java的写法作文,RxJava系列文章(二) - 网络图片添加水印RxJava写法
- linux下,如何迁移mysql数据库存放目录。利用软连接简单快捷实现移动到home数据盘下...
- mysql5.5.53安装教程_mysql5.5.28安装教程 超详细!
- Jenkins和Docker在HULK的落地实践
- 11. 符号和符号解析
- unity3d RTS即时战略 鼠标点选主角移动到点击地面位置 代码
- KDZD608屏蔽服效率测试仪
- 六成受访美国人认为教育系统正在令这一代人失望
- 7.Python条件语句之if语句——从入门到实践
- 微软office365服务器地址,由世纪互联运营的 Office 365 的 URL 和 IP 地址范围
- OpenGL---GLUT教程(一) GLUT简介,体系
- 苦过 痛过 一笑而过
- java访问局域网共享资源
- doGet或doPost请求
热门文章
- 我的Android进阶之旅------gt;Android中MediaRecorder.stop()报错 java.lang.RuntimeException: stop failed....
- wpa_supplicant与kernel的接口
- squid介绍及其简单配置
- timus-1507 Amount of Degrees 按位DP
- Activity中的任务和返回站
- 华为p40论坛_花粉俱乐部网友:华为P40千万别上双扬声器,小米10方向错了
- uni-app 修改富文本信息中的图片样式
- 工作中如何使用线程池的?自己如何定义一个线程池?
- jquery的each()详细介绍
- 白盒测试工具 - sonar的安装、配置与使用入门手册,用sonar检查代码质量实战演示