js图片压缩上传demo

以为目前没有找到原声javascript的方法进行替换所以我们还是引入了jquery

一,引入jquery

二,界面展示

三,压缩上传的逻辑

    function Upload() {

        setTimeout(function () {

            UploadMethod();

        },100)

    }

    function UploadMethod() {

        const imgPath = document.getElementById("idCardFront").value;

        console.log("正面的图片地址:imgPath="+imgPath);

        if (imgPath == '') {

            return;

        }

        //判断上传文件的后缀名

        const strExtension = imgPath.substr(imgPath.lastIndexOf('.') + 1);

        if (strExtension != 'jpeg' && strExtension != 'jpg' && strExtension != 'gif'

            && strExtension != 'png' && strExtension != 'bmp'&&strExtension != 'JPG' && strExtension != 'GIF'

            && strExtension != 'PNG' && strExtension != 'BMP') {

            console.log('请选择图片文件');

            return;

        }

        const file = $("#idCardFront").prop('files')[0];

        if(file.size > 10 * 1024 * 1024){//如果大于10MB就重新选择图片

            console.log('图片大小超过10M,请重新选择');

            return;

        }

        photoCompress(file, function (base64Codes) {

            let xhr="";

            const url = "https://***/upload"; // 接收上传文件的后台地址

            const form = new FormData(); // FormData 对象

            const bl = convertBase64UrlToBlob(base64Codes);

            form.append("uploadFile", bl, "file_"+Date.parse(new Date())+".png"); // 文件对象

            xhr = new XMLHttpRequest();  // XMLHttpRequest 对象

            xhr.open("post", url, true); //post方式,url为服务器请求地址,true 该参数规定请求是否异步处理。

            xhr.onload = function (evt) {

                //服务断接收完文件返回的结果

                console.log(evt);

                const res = JSON.parse(evt.target.responseText);

                if (res.status == "success") {

                    console.log("上传成功:res.result="+res.result);

                    document.getElementById("showImg").src=base64Codes;

                } else {

                    console.log(res.message);

                }

            }; //请求完成

            xhr.onerror =  function (evt) {

                console.log("上传失败")

            }; //请求失败

            xhr.send(form); //开始上传,发送form数据

        });

    }

    /*

    两个参数

    file:一个是文件(类型是图片格式),

    objDiv:一个是容器或者回调函数

    */

    function photoCompress(file, objDiv) {

        const ready = new FileReader();

        /*开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容.*/

        ready.readAsDataURL(file);

        ready.onload = function () {

            const re = this.result;

            const w={

                quality:300/(10*1024)

            }

            canvasDataURL(re, w,file, objDiv)

        }

    }

    function canvasDataURL(path, obj,file, callback) {

        const img = new Image();

        img.src = path;

        img.onload = function () {

            /* 按图片缩小宽高完成图片压缩(未启用) */

            const that = this;

            let w = that.width,

                h = that.height;

            //生成canvas

            const canvas = document.createElement('canvas');

            const ctx = canvas.getContext('2d');

            const anw = document.createAttribute("width");

            anw.nodeValue = w;

            const anh = document.createAttribute("height");

            anh.nodeValue = h;

            canvas.setAttributeNode(anw);

            canvas.setAttributeNode(anh);

            ctx.drawImage(that, 0, 0, w, h);

            /* 按图像质量压缩(启用) */

            // quality值越小,所绘制出的图像越模糊。用图片质量压缩

            let quality = 0.7;  // 默认图片质量为0.7

            if (obj.quality && obj.quality <= 1 && obj.quality > 0) {

                quality = obj.quality;

            }

            if(file.size<=300*1024){

                quality=1;

            }


            /* 最后将图片转换成base64 */

            const base64 = canvas.toDataURL('image/jpeg', quality);

            callback(base64);//回调

        }

    }

    /**

    * 将以base64的图片url数据转换为Blob,用于form表单上传

    * @param urlData

    * 用url方式表示的base64图片数据

    */

    function convertBase64UrlToBlob(urlData){

        let arr = urlData.split(','), mime = arr[0].match(/:(.*?);/)[1],

            bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);

        while(n--){

            u8arr[n] = bstr.charCodeAt(n);

        }

        return new Blob([u8arr], {type:mime});

    }

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,372评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,368评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,415评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,157评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,171评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,125评论 1 297
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,028评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,887评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,310评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,533评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,690评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,411评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,004评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,659评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,812评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,693评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,577评论 2 353

推荐阅读更多精彩内容