hello，大家好，游戏开始了，欢迎大家收看这一期的讲解。本次的内容是图片的上传预览。最后发源码链接。
废话不多说，先上图。
待上传图像
点击蓝色框内，pc可以选择文件，移动端选择拍照或选择图片进行上传。
- HTML部分
<div class="img-box">
<div class="card-box">
<div class="default-box" >
<img class="default-img" src="./cardFactory.png" alt="">
<div class="default-title">请点击</div>
<img class="add-img" src="./add.png" alt="">
</div>
<div class="up-img" id="upImg"></div>
<input type="file" id="addImg" class="upImg-btn">
</div>
</div>.default-box这层就是加号图像
up-img是转码后显示图像的地方。
下面input是选择图像的地方。
- css
.img-box {
display: flex;
justify-content: center;
align-items: center;
}
.card-box {
width: 7.5rem;
height: 4rem;
border: solid .04rem #23a7fe;
border-radius: 4px;
box-sizing: border-box;
position: relative;
}
.upImg-btn {
width: 100%;
height: 100%;
opacity: 0;
position: absolute;
top: 0;
left: 0;
}
.up-img {
width: 5.58rem;
height: 3.12rem;
margin: .2rem .6rem;
position: absolute;
top: .2rem;
left: 0;
background-repeat: no-repeat;
background-position: center center;
background-size: cover
}
.default-box {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.add-img {
position: absolute;
top: 50%;
left: 50%;
margin-left: -.64rem;
margin-top: -.64rem;
width: 1.28rem;
height: 1.28rem;
}
.default-img {
position: absolute;
padding: 0 1.1rem;
bottom: .68rem;
box-sizing: border-box;
width: 100%;
opacity: .5;
}
.default-title {
position: absolute;
width: 100%;
bottom: .12rem;
text-align: center;
color: #23a7fe;
font-size: .32rem;
}内部就是定位了。
- 页面js
document.querySelector("#addImg").addEventListener("change",function () {
changeImg({
id:"addImg", //input的Id 必须
imgBox:'upImg', //显示位置Id 必须
limitType:['jpg','png','jpeg'], //支持的类型 必须
limitSize:819200 //图片超过多大开始进行压缩 可不传
});
});我们监听input的change时间，然后传入参数
- dShowImg64.js代码
//id,limitType,limitSize
function changeImg(obj = {}) {
if(!obj.id) return;
if(!obj.limitType)return;
var dom = document.querySelector("#"+obj.imgBox);
var files = document.querySelector("#"+obj.id).files[0];
var reader = new FileReader();
var type = files.type && files.type.split('/')[1]; //文件的类型，判断是否是图片
var size = files.size; //文件的大小，判断图片的大小
if (obj.limitType.indexOf(type) == -1) {
alert('不符合上传要求');
return;
}
//判断是否传入限制大小。压不压缩。
var limitSize = obj.limitSize ? parseInt(obj.limitSize) : 0;
if (size < limitSize) {
reader.readAsDataURL(files); // 不压缩，直接转base64
reader.onloadend = function () {
dom.style.backgroundImage = "url("+this.result+")";
//如果要上传的话，在这里调用ajax
document.querySelector(".default-box").style.display = "none";
}
} else { //压缩
var imageUrl = this.getObjectURL(files); //创造url
this.convertImg(imageUrl, function (base64Img) { //调用压缩函数
dom.style.backgroundImage = "url("+base64Img+")";
//如果要上传的话，在这里调用ajax
document.querySelector(".default-box").style.display = "none";
}, type)
}
}
function convertImg(url, callback, outputFormat) {
var canvas = document.createElement('CANVAS'); //绘制canvas
var ctx = canvas.getContext('2d');
var img = new Image; //初始化图片
img.crossOrigin = 'Anonymous';
img.onload = function () {
var width = img.width;
var height = img.height;
// 按比例压缩2倍 //设置压缩比例，最后的值越大压缩越高
var rate = (width < height ? width / height : height / width) / 2;
canvas.width = width * rate;
canvas.height = height * rate; //绘制新图
ctx.drawImage(img, 0, 0, width, height, 0, 0, width * rate, height * rate); //转base64
var dataURL = canvas.toDataURL(outputFormat || 'image/png');
callback.call(this, dataURL); //回调函数传入base64的值
canvas = null;
};
img.src = url;
}
function getObjectURL(file) { //创造指向该图的URL
var url = null;
if (window.createObjectURL != undefined) { //大部分执行这个
url = window.createObjectURL(file);
} else if (window.URL != undefined) { // 兼容
url = window.URL.createObjectURL(file);
} else if (window.webkitURL != undefined) { // 兼容
url = window.webkitURL.createObjectURL(file);
}
return url;
}首先获取各种属性如类型、大小
判断图片是否小于限制大小、小于的话直接转base64，大于的话 利用canvas 进行缩小完成压缩后转base64 然后将得到的值设置为背景图。然后隐藏add的样式。
最后的预览图像
git地址：https://github.com/Zhoujiando...
以后会加入更多的小插件。 最后祝大家身体健康，谢谢。