资讯专栏INFORMATION COLUMN

图片上传预览转压缩并转base64详解(dShowImg64.js)

zorro / 1123人阅读

摘要:本次的内容是图片的上传预览。待上传图像点击蓝色框内,可以选择文件,移动端选择拍照或选择图片进行上传。部分请点击这层就是加号图像是转码后显示图像的地方。最后的预览图像地址以后会加入更多的小插件。

hello,大家好,游戏开始了,欢迎大家收看这一期的讲解。本次的内容是图片的上传预览。最后发源码链接。
废话不多说,先上图。
待上传图像

点击蓝色框内,pc可以选择文件,移动端选择拍照或选择图片进行上传。

HTML部分

请点击

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/98525.html

相关文章

  • 图片上传预览压缩base64详解dShowImg64.js

    摘要:本次的内容是图片的上传预览。待上传图像点击蓝色框内,可以选择文件,移动端选择拍照或选择图片进行上传。部分请点击这层就是加号图像是转码后显示图像的地方。最后的预览图像地址以后会加入更多的小插件。 hello,大家好,游戏开始了,欢迎大家收看这一期的讲解。本次的内容是图片的上传预览。最后发源码链接。废话不多说,先上图。showImg(https://segmentfault.com/img...

    NeverSayNever 评论0 收藏0
  • 图片上传预览压缩base64详解dShowImg64.js

    摘要:本次的内容是图片的上传预览。待上传图像点击蓝色框内,可以选择文件,移动端选择拍照或选择图片进行上传。部分请点击这层就是加号图像是转码后显示图像的地方。最后的预览图像地址以后会加入更多的小插件。 hello,大家好,游戏开始了,欢迎大家收看这一期的讲解。本次的内容是图片的上传预览。最后发源码链接。废话不多说,先上图。showImg(https://segmentfault.com/img...

    wums 评论0 收藏0
  • JS图片压缩上传(单张)

    摘要:环境,这里的指到实例一图片压缩文件类型是图片格式,文件压缩后对象,,容器或者回调函数开始读取指定对象中的内容读取操作完成时返回一个格式的字符串开始压缩利用数据化图片进行压缩图片转指到默认按比例压缩默认图片质量为生成创建属性节点图像质量值越 *vue+webpack环境,这里的that指到vue实例 一、图片压缩 /* file:文件(类型是图片格式), ...

    KaltZK 评论0 收藏0
  • 无需Flash实现图片裁剪——HTML5中级进阶

    摘要:需求就是那么简单,在浏览器里裁剪图片并上传到服务器。原图片对象上传裁剪后的对象初始化图片预览根据裁剪参数绘制转对象以下将对每个环节详解。或者根据获取裁剪信息包括旋转和缩放用进行手动绘制。 前言 图片裁剪上传,不仅是一个很贴合用户体验的功能,还能够统一特定图片尺寸,优化网站排版,一箭双雕。 需求就是那么简单,在浏览器里裁剪图片并上传到服务器。 我第一个想到的方法就是,将图片和裁剪参数(x...

    JerryC 评论0 收藏0

发表评论

0条评论

zorro

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<