base64 上传图片并压缩至base64

<input type="file" name="" id="fileval" onchange="getUrl2(this.files,this.id);">

function getUrl2(fil, id) {
$('#myImage').html('');//此处就是显示图片的div
    var file = $("#" + id);
    if (fil[0].type.indexOf("image") < 0) {
        if (fil[0].name.indexOf(".") < 0) {
            var picname = fil[0].name.split('%');
            if (picname.indexOf("image") < 0) {
                alert('不允许上传非图片格式的图片');

                file.after(file.clone().val(""));
                file.remove();
                return;
            }
        }
        else {
            alert('不允许上传非图片格式的图片');

            file.after(file.clone().val(""));
            file.remove();
            return;
        }
    }
    var Cnv = document.getElementById('myCanvas2');
    var Cntx = Cnv.getContext('2d');//获取2d编辑容器
    var imgss2 = new Image();//创建一个图片
    var agoimg2 = document.getElementById("images2");
    for (var intI = 0; intI < fil.length; intI++) {//图片回显
        var tmpFile = fil[intI];
        var reader = new FileReader();
        reader.readAsDataURL(tmpFile);
        reader.onload = function (e) {
            url2 = e.target.result;
           
            dealImage2(url2, agoimg2)
        }
    }

}

function dealImage2(base64Str, obj) {
    var img = new Image();
    img.src = base64Str;
    img.onload = function () {
        var that = this;
        // 默认按比例压缩
        var w = that.width,
            h = that.height,
            scale = w / h;
        w = obj.width || w;
        h = obj.height || (w / scale);
        var quality = 0.9;
        // 默认图片质量为0.7
        //生成canvas
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
        // 创建属性节点
        var anw = document.createAttribute("width");
        anw.nodeValue = w;
        var anh = document.createAttribute("height");
        anh.nodeValue = h;
        canvas.setAttributeNode(anw);
        canvas.setAttributeNode(anh);
        ctx.drawImage(that, 0, 0, w, h);
        // 图像质量
        if (obj.quality && obj.quality <= 1 && obj.quality > 0) {
            quality = obj.quality;
        }
        // quality值越小,所绘制出的图像越模糊
        var base64 = canvas.toDataURL('image/jpeg', quality);
        // 回调函数返回base64的值
       
       //这里就调用接口处理数据,根据自己的需求设置
		// var content = '<img src="" alt="" class="tempclass2" style="max-width:90px;height:80px;z-index:999;"/>';
       // $('#myImage').append(content);

        // $('#myImage').css('display', 'block');

        //getMonthLists2("IIS3380", "/AnnouncementManage.aspx?action=uploadPictures", {
           // "usercode": "",
           // "announcementcode": getQueryString("announcementcode"),
            //"base64": base64
       // }, $('.tempclass2'));/
    }
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值