一、html部分
<!-- accept限制上传类型 -->
<input type="file" name="" id="upload" accept="image/*">
<!-- -->
<img src="" alt="" id="preview">
二、js部分
2.1获取预览链接以及宽高
这里是通过URL.createObjectURL()获取预览链接
/**
* 实现图片预览
* file => 文件对象
*/
function previewFile(file) {
// 获取预览链接
const url = window.URL.createObjectURL(file);
// 创建异步对象将其return出去
return new Promise((res, rej) => {
// 创建Image对象
const element = new Image();
// 绑定src
element.src = url
// 当图片加载完成时触发 onload
element.onload = () => {
// 获取图片的宽高
const w = Math.floor(element.width),
h = Math.floor(element.height);
// 返回获取到的值
res({
code: 1,
data: {
wh: [w, h],
}
})
}
// 当图片渲染错误时触发 onerror
element.onerror = () => {
rej({
code: 0,
msg: '渲染错误'
});
}
})
}
2.2获取图片的宽高比
/**
* 获取图片比例
* w => 宽
* h => 高
*/
function reductionTo(w, h) {
try {
if (!isInteger(w) || !isInteger(h)) {
throw '宽和高须为整数';
}
if (w <= 0 || h <= 0) {
throw '宽和高须大于0';
}
let a = w,
b = h;
(a >= b) ? (a = w, b = h) : (a = h, b = w);
if (w != 1 && h != 1) {
for (let i = b; i >= 2; i--) {
if (w % i == 0 && h % i == 0) {
w = w / i;
h = h / i;
}
}
}
return [w, h];
} catch (e) {
console.log('%c ======>>>>>>>>', 'color:orange;', e)
return false;
}
}
// 判断数值是否是整数
function isInteger(v) {
return v % 1 === 0;
}
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img {
display: block;
}
</style>
</head>
<body>
<input type="file" name="" id="upload" accept="image/*">
<!-- -->
<img src="" alt="" id="preview">
<script>
const dom = document.getElementById('upload');
const image = document.getElementById('preview');
// 绑定change事件
dom.addEventListener('change', function (e) {
// 获取当前file文件对象
const file = this.files[0];
/**
* 获取预览链接
* 图片的宽高及宽高比
* 这里用的是异步不懂的小伙伴可以百度哈Promise
*/
previewFile(file).then(res => {
if (res.code) {
const {
data
} = res;
image.src = data.imageUrl;
image.width = data.wh[0];
image.height = data.wh[1];
}
})
})
/**
* 实现图片预览
* file => 文件对象
*/
function previewFile(file) {
// 获取预览链接
const url = window.URL.createObjectURL(file);
// 创建异步对象将其return出去
return new Promise((res, rej) => {
// 创建Image对象
const element = new Image();
// 绑定src
element.src = url
// 当图片加载完成时触发 onload
element.onload = () => {
// 获取图片的宽高
const w = Math.floor(element.width),
h = Math.floor(element.height);
// 获取图片比例
let a = reductionTo(w, h)
// 返回获取到的值
res({
code: 1,
data: {
imageUrl: url,
wh: [w, h],
whRatio: a
}
})
}
// 当图片渲染错误时触发 onerror
element.onerror = () => {
rej({
code: 0,
msg: '渲染错误'
});
}
})
}
/**
* 获取图片比例
* w => 宽
* h => 高
*/
function reductionTo(w, h) {
try {
if (!isInteger(w) || !isInteger(h)) {
throw '宽和高须为整数';
}
if (w <= 0 || h <= 0) {
throw '宽和高须大于0';
}
let a = w,
b = h;
(a >= b) ? (a = w, b = h) : (a = h, b = w);
if (w != 1 && h != 1) {
for (let i = b; i >= 2; i--) {
if (w % i == 0 && h % i == 0) {
w = w / i;
h = h / i;
}
}
}
return [w, h];
} catch (e) {
console.log('%c ======>>>>>>>>', 'color:orange;', e)
return false;
}
}
// 判断数值是否是整数
function isInteger(v) {
return v % 1 === 0;
}
</script>
</body>
</html>