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...
以后会加入更多的小插件。 最后祝大家身体健康，谢谢。