代码如下:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
<style type="text/css">
.wrap_info {
display: flex;
align-items: center;
justify-content: flex-start;
margin-bottom: 20px;
}
.btn {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 80px;
height: 30px;
margin-right: 20px;
border-radius: 5px;
font-size: 12px;
color: #fff;
background: #0eaee2;
cursor: pointer;
}
.download {
text-decoration: none;
}
.select_img input {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0;
cursor: pointer;
}
.select_wrap {
margin-right: 20px;
width: 80px;
height: 30px;
padding: 0 5px;
border-radius: 5px;
border: 1px solid #ccc;
}
select {
height: 100%;
outline: none;
border: none;
background: transparent;
}
.image_name {
min-width: 100px;
margin-right: 20px;
}
.preview {
margin: 5px 0;
font-size: 14px;
}
</style>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="wrap">
<div class="wrap_info">
<div class="btn select_img">
选择图片<input type="file" id="inputimg" />
</div>
<div class="image_name"></div>
<div class="select_wrap">
<select id="myselect">
<option value="1">png格式</option>
<option value="2">jpeg格式</option>
<option value="3">webp格式</option>
</select>
</div>
<div class="btn" id="change">转换格式</div>
<a href="javascript:void(0)" class="btn download" id="download"
>下载图片</a
>
</div>
<div class="preview">格式转换后的图片：</div>
<img id="showImg" alt="这是图片" />
</div>
<script type="text/javascript">
// 格式转换
document.getElementById('change').addEventListener('click', function () {
getImg(function (image) {
console.log('image', image)
var can = imgToCanvas(image),
showImg = document.getElementById('showImg')
showImg.setAttribute('src', canvasToImg(can))
})
})
// 把image 转换为 canvas对象
function imgToCanvas(image) {
var canvas = document.createElement('canvas')
canvas.width = image.width
canvas.height = image.height
canvas.getContext('2d').drawImage(image, 0, 0)
return canvas
}
// canvas转换为image
function canvasToImg(canvas) {
var array = ['image/png', 'image/jpeg', 'image/webp'],
type = document.getElementById('myselect').value - 1
var src = canvas.toDataURL(array[type])
return src
}
// 获取图片信息
function getImg(fn) {
var imgFile = new FileReader()
try {
imgFile.onload = function (e) {
console.log('获取图片信息', e)
var image = new Image()
image.src = e.target.result // base64数据
image.onload = function () {
fn(image)
}
}
imgFile.readAsDataURL(document.getElementById('inputimg').files[0])
} catch (e) {
alert('请上传图片！' + e)
}
}
// input change事件
document.getElementById('inputimg').onchange = function uploadImg(e) {
console.log('上传图片', e)
let file = e.target.files || e.dataTransfer.files
if (!file.length) {
return
}
console.log(file[0])
if (/^image/.test(file[0].type)) {
document.querySelector('.image_name').innerHTML = file[0].name
} else {
alert('请上传正确图片格式!')
}
}
// 点击下载图片
document.getElementById('download').onclick = function downloadImg(e) {
let url = document.getElementById('showImg').src
if (url) {
this.setAttribute('href', url)
this.setAttribute('download', new Date().getTime())
}
}
</script>
</body>
</html>
