JS图片压缩+图片上传前检测类型、大小、尺寸

原生JS压缩图片

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>js压缩图片</title></head><body><img id="img" src=""><input id="file" type="file" onchange="upload()"></body><script>async function upload() {let fileObj = document.getElementById('file').files[0] //上传文件的对象try {// 开启上传文件前检测let imageSize = await beforeUpload(fileObj)if (imageSize) {let initSize = (fileObj.size / 1024).toFixed(2)let reader = new FileReader()reader.readAsDataURL(fileObj)reader.onload = function(e) {let image = new Image() //新建一个img标签image.src = e.target.resultimage.onload = function() {let setImg = compressImg(image, fileObj)document.getElementById('img').src = setImg//如果原图小于压缩后的就长传压缩图if (getImgSize(setImg) < (initSize * 1024)) {console.log('长传压缩后的图片')} else {console.log('长传原图')}}}}} catch (e) {console.log(e);}}// 对图片进行压缩function compressImg(img, fileObj, quality = 0.7, width = 1, height = 1) {let canvas = document.createElement('canvas'),context = canvas.getContext('2d'),imageWidth = img.width / width,imageHeight = img.height / height,result = '';canvas.width = imageWidthcanvas.height = imageHeightcontext.drawImage(img, 0, 0, imageWidth, imageHeight)result = canvas.toDataURL('image/jpeg', quality)return result}function getImgSize(base64url) {//获取base64图片大小，var str = base64url.replace('data:image/jpeg;base64,', ''); //这里根据自己上传图片的格式进行相应修改var strLength = str.length;var fileLength = parseInt(strLength - (strLength / 8) * 2);// 由字节转换为Kbvar size = "";size = (fileLength / 1024).toFixed(2)return parseInt(size);}//检测图片尺寸const getFileWidthAndHeight = (file, initwidth, initheight) => {return new Promise((resolve, reject) => {let width = initwidth;let height = initheight;let _URL = window.URL || window.webkitURL;let img = new Image();img.src = _URL.createObjectURL(file);img.onload = function() {if (img.width > width || img.height > height) {reject(`上传尺寸最大${initwidth}px * ${initheight}px!`);} else {resolve(true);}};});};// 上传文件前const beforeUpload = (file) => {const isJpgOrPng =file.type === "image/jpeg" ||file.type === "image/png" ||file.type === "image/bmp";//临时关闭校验if (!isJpgOrPng) {console.log('你必须上传 JPG/PNG 文件!');return false;}const isLt3M = file.size / 1024 / 1024 < 3;if (!isLt3M) {console.log('图像必须小于3MB!');return false;}//开启检测尺寸return getFileWidthAndHeight(file, 500, 500);};</script>
</html>

JS图片压缩+图片上传前检测类型、大小、尺寸相关推荐

js图片压缩后上传方法,图片超过1M先进行压缩，然后再上传
js图片压缩后上传方法,图片超过1M先进行压缩,然后再上传图片上传目录 js图片压缩后上传方法,图片超过1M先进行压缩,然后再上传 html代码 js代码 html代码 <input type ...
js 裁剪图片压缩并且上传图片
今天接到一个比较懒的后台的要求:后台要求在裁剪图片的同时,根据文件大小来按不同比例压缩图片. 页面代码 <!--** * *----------Created by 黄伟峰 on 2018/6/ ...
js图片压缩java上传,JS实现异步上传压缩图片
摘要: 使用iframe来处理异步上传图片,在现在这个时代来说,多多少少都有点落后了!单单就凭AJAX和JS就不能做到异步上传图片了吗? 先看调用页面: 选择图片 var img; $("i ...
返回图片_Vue 图片压缩并上传至服务器
日常开发中经常会遇到上传图片的需求,随着手机的蓬勃发展,现在拍出来的照片分辨率越来越高,随之带来的问题就是图片占用空间越来越大,如果我们直接上传图片可能就会浪费很大一笔资源,本文主要讲解基于 Vue ...
android 快速实现图片压缩与上传
由于最近项目更新功能比较的忙,也没时间去整理自己的知识点和管理自己的博客.在android对手机相册中的图片的压缩和上传到服务器上,这样的功能在每个app开发中都会有这样的需求.所以今天就对andro ...
Vue 图片压缩并上传至服务器
本文主要讲解基于 Vue + Vant ,实现移动端图片选择,并用 Canvas 压缩图片,最后上传至服务器.还会封装一个工具类,方便直接调用. 一.工具类封装废话不多说先上代码,封装一个 Comp ...
Bmob+Luban（鲁班）压缩图片实现相册选择图片压缩后上传到Bmob后台Glide加载图片显示到本地
源代码已上传CSDN:https://download.csdn.net/download/qq_16519957/11068345 因为本章需要跟前面的知识结合起来看所以就做了一个前面链接方便大家查 ...
html5 中input type=‘file’实现文件图片等的上传的文件类型限制
可以直接设置input标签的accept属性来限制上传文件的类型 <input type="file" accept="application/msword&quo ...
js图片压缩并上传？
js: var eleFile = document.querySelector('#file'); // 压缩图片需要的一些元素和对象 var reader = new FileReader(); ...
jqWEUI对图片压缩并上传
jqWEUI样式,加图片上传到页面并预览 ------------------------------------------------- 补充:增加了图片压缩js 2018年6月29日 ---- ...

JS图片压缩+图片上传前检测类型、大小、尺寸

原生JS压缩图片

JS图片压缩+图片上传前检测类型、大小、尺寸相关推荐

最新文章

热门文章