标签 jQuery 下的文章

JS - 解决图片压缩 + IOS下拍照图片翻转问题

核心代码

var file = document.getElementById('#file');
//获取的图片文件
var fileList = file.files;
/**************************************************************************************************/
// 压缩图片需要的一些元素和对象
var reader = new FileReader();
var img = new Image();
// 缩放图片需要的canvas
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
//图片大小
var fileSize = fileList[0].size;
reader.readAsDataURL(fileList[0]);
reader.onload = function(e) {
    //e.target.result就是图片的base64地址信息
    img.src = e.target.result;
};
img.onload = function(e) {
    EXIF.getData(img, function() {
        var Orientation = EXIF.getTag(this, 'Orientation');
        console.log('方向:' + Orientation);
        console.log('大小:' + fileSize/(1024*1024));
        var wph = (img.height*1)/(img.width*1);
        var hpw = wph.toFixed(2)*1;
        var square = 700;   //定义画布的大小,也就是图片压缩之后的像素
        var imageWidth = 0;    //压缩图片的大小
        var imageHeight = 0;
        var offsetX = 0;
        var offsetY = 0;
        var hsquare = Math.ceil(square*hpw);
        var u = navigator.userAgent;
        var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
        if(isiOS){
            if(Orientation === 6){
                canvas.width = hsquare;
                canvas.height = square;
                context.clearRect(0, 0, hsquare, square);
            }else if(Orientation === 8){
                canvas.width = hsquare;
                canvas.height = square;
            }else{
                canvas.width = square;
                canvas.height = hsquare;
                context.clearRect(0, 0, square, hsquare);
            }
        }else{
            canvas.width = square;
            canvas.height = hsquare;
            context.clearRect(0, 0, square, hsquare);
        }
        if(isiOS){
            var degree;
            switch(Orientation){
                case 3:
                    degree = 180;
                    imageWidth = -square;
                    imageHeight = -hsquare;
                    break;
                case 6:
                    degree = 90;
                    imageWidth = square;
                    imageHeight = -hsquare;
                    break;
                case 8:
                    degree = 270;
                    imageWidth = -square;
                    imageHeight = hsquare;
                    break;
                default:
                    degree = 0;
                    imageWidth = square;
                    imageHeight = hsquare;
            }
            context.rotate(degree * Math.PI / 180.0);
        }else{
            if (img.width > img.height) {
                imageWidth = square;
                imageHeight = hsquare;
                offsetX = - Math.round((imageWidth - square) / 2);
            } else {
                imageHeight = hsquare;
                imageWidth = square;
                offsetY = - Math.round((imageHeight - hsquare) / 2);
            }
        }
        context.drawImage(this, offsetX, offsetY, imageWidth, imageHeight);
        //压缩处理得到的base64
        var blob = canvas.toDataURL('image/jpeg', 1.0);
        //base64转blob
        var blobs = toBlob(blob);
    });
});
//base64转blob
function toBlob(urlData) {
    var bytes = window.atob(urlData.split(',')[1]);
    // 去掉url的头,并转换为byte
    // 处理异常,将ascii码小于0的转换为大于0
    var ab = new ArrayBuffer(bytes.length);
    var ia = new Uint8Array(ab);
    for (var i = 0; i < bytes.length; i++) {
        ia[i] = bytes.charCodeAt(i);
    }
    return new Blob([ab],{type : 'image/jpeg'});
}

阅读全文

网站雪花特效

<script src="https://unpkg.com/magic-snowflakes/dist/snowflakes.min.js"></script>
<script>
    var sf = new Snowflakes({
    color: "#FFFFFF",
    count: 66,
    minOpacity: 0.3,
    maxOpacity: 1
});
</script>

jQuery - textarea 自适应内容高度

<textarea id="textarea"></textarea>
<script>
function makeExpandingArea(el) {
    var setStyle = function(el) {
        el.style.height = 'auto';
        el.style.height = el.scrollHeight + 'px';
        // console.log(el.scrollHeight);
    }
    var delayedResize = function(el) {
        window.setTimeout(function() {
            setStyle(el);
        },
        0);
    }
    if (el.addEventListener) {
        el.addEventListener('input',function() {
            setStyle(el);
        },false);
        setStyle(el);
    } else if (el.attachEvent) {
        el.attachEvent('onpropertychange',function() {
            setStyle(el);
        });
        setStyle(el);
    }
    if (window.VBArray && window.addEventListener) { //IE9
        el.attachEvent("onkeydown",function() {
            var key = window.event.keyCode;
            if (key == 8 || key == 46) delayedResize(el);
        });
        el.attachEvent("oncut",function() {
            delayedResize(el);
        }); //处理粘贴
    }
}
makeExpandingArea(textarea);
</script>

阅读全文

ajax - 提交 checkbox

html

<button class="batchdel" id="submitbatchdel" type="submit">
    <a href="" onclick="if(confirm('确定要删除数据吗?')) return true;else return false;">批量删除</a>
</button>

阅读全文

jQuery - 回车提交

$(document).keyup(function(e){
    if(e.keyCode == 13){
        $('#submitform').trigger('click');
    }
})
$("#submitform").bind('click', function () {
    var login = {};
    login['username'] = $.trim($("input[name=username]").val());
    login['pwd'] = $.trim($("input[name=pwd]").val());
    login['code'] = $.trim($("input[name=code]").val());
    $('.login-error').html('');
    if (login['username'] == '') {
        errorDis('请输入用户名/手机/邮箱');
        return false;
    }
    if(login['pwd']=='')
    {
        errorDis('请输入密码');
        return false;
    }
    if (login['code'] == '') {
        errorDis('请输入验证码');
        return false;
    }
    $.ajax({
        url: '/login/checkloginmsg',
        type: 'POST',
        dataType: 'json',
        data: login,
        success: function (data) {
        if (data.code == 200) {
            window.location.href = "/main";
        } else {
            errorDis(data.info);//返回错误提示
            return false;
        }
        }
    })
});

阅读全文

jQuery - input 提示

jQuery

<script type="text/javascript">
          $("#username").click(function(event){
              $("#tip-username").show();
              event.stopPropagation();//阻止冒泡
          });
          $("#username").blur(function(){
            $("#tip-username").hide();
          });
          $("body").click(function(){
              $("#tip-username").hide();
          });
          $('#tip-username').click(function(){
              return false;
          });
</script>

阅读全文

jQuery - ajax

jQuery

$.ajax({
            url: '/数据处理页面',
            type: 'POST',
            dataType: 'json',
            data: login,
            success: function (data) {
                if (data.code == 200) {
                    window.location.href = "/验证成功后的跳转页";
                } else {
                    errorDis(data.info);//返回错误提示
                    //alert(data.info);
                    return false;
                }
            }
        })

阅读全文