• js上传图片压缩,并转化为base64


    <input type="file"   onchange="startUpload(this,'front')"  id="renm"/>
    <input type="hidden"   id="front" name="front"/>
    
    
    function startUpload(fileId,site){
        var this_=$(fileId);
        var front;
        if(site=='back' || site=='head'){
            front=$('#front').val();
            if(front.length==0){
                layer.msg('请先上传身份证正面照');
                return;
            }
        }
        readAsDataURL( fileId,function(img){
            this_.prev().attr({src : img});
            this_.show();
            this_.next().val(img);
            });
    }
    
    
    /**
     * 读取图片为base64数据 返回 base64图片
     * @param file 文件
     * @param callback 回调函数
     */
    function readAsDataURL(fileId,callback){
        var file = $(fileId).get(0).files[0];
        var reader = new FileReader();
        var image = new Image();
        var canvas = createCanvas();
        var ctx = canvas.getContext("2d");
        reader.onload = function(){ // 文件加载完处理
            var result = this.result;
            image.onload = function(){ // 图片加载完处理
                var imgScale = imgScaleW(800,this.width,this.height);
                canvas.width = imgScale.width;
                canvas.height = imgScale.height;
                ctx.drawImage(image,0,0,imgScale.width,imgScale.height);
                var dataURL = canvas.toDataURL('image/jpeg'); // 图片base64
                ctx.clearRect(0,0,imgScale.width,imgScale.height); // 清除画布
                callback (dataURL); //dataURL:处理成功返回的图片base64
            };
            image.src = result;
        };
        reader.readAsDataURL(file);
    }
    /**
     *  创建画布
     * @returns
     */
    function createCanvas(){
        var canvas = document.getElementById('canvas');
        if(!canvas){
            var canvasTag = document.createElement('canvas');
            canvasTag.setAttribute('id','canvas');
            canvasTag.setAttribute('style','display:none;');//隐藏画布
            document.body.appendChild(canvasTag);
            canvas = document.getElementById('canvas');
        }
        return canvas;
    }
    /**
     * 图片压缩
     * @param maxWidth 最大宽度或最大高度
     * @param width 宽度
     * @param height 高度
     * @returns {___anonymous1968_1969}
     */
    function imgScaleW(maxWidth,width,height){
        var imgScale = {};
        var w = 0;
        var h = 0;
        if(width <= maxWidth && height <= maxWidth){ // 如果图片宽高都小于限制的最大值,不用缩放
            imgScale = {
                    width,
                    height:height
            };
        }else{
            if(width >= height){ // 如果图片宽大于高
                w = maxWidth;
                h = Math.ceil(maxWidth * height / width);
            }else{     // 如果图片高大于宽
                h = maxWidth;
                w = Math.ceil(maxWidth * width / height);
            }
            imgScale = {
                    w,
                    height:h
            };
        }
        return imgScale;
    }
  • 相关阅读:
    TLE: poj 1011 Sticks
    UVa 116 Unidirectional TSP
    csuoj 1215 稳定排序
    UVa 103 Stacking Boxes
    UVa 147 Dollars
    UVa 111 History Grading
    怎么在ASP.NET 2.0中使用Membership
    asp.net中如何删除cookie?
    ASP.NET中的HTTP模块和处理程序[收藏]
    NET开发中的一些小技巧
  • 原文地址:https://www.cnblogs.com/zhaoyan001/p/10348411.html
Copyright © 2020-2023  润新知