2015-03-16

JS 压缩字符串和图片

1. JS压缩字符串

对字符串进行压缩

function Compress(strNormalString) {
    var strCompressedString = "";

    var ht = new Array();
    for(i = 0; i < 128; i++) {
        ht[i] = i;
    }

    var used = 128;
    var intLeftOver = 0;
    var intOutputCode = 0;
    var pcode = 0;
    var ccode = 0;
    var k = 0;

    for(var i=0; i<strNormalString.length; i++) {
        ccode = strNormalString.charCodeAt(i);
        k = (pcode << 8) | ccode;
        if(ht[k] != null) {
            pcode = ht[k];
        } else {
            intLeftOver += 12;
            intOutputCode <<= 12;
            intOutputCode |= pcode;
            pcode = ccode;
            if(intLeftOver >= 16) {
                strCompressedString += String.fromCharCode( intOutputCode >> ( intLeftOver - 16 ) );
                intOutputCode &= (Math.pow(2, (intLeftOver - 16)) - 1);
                intLeftOver -= 16;
            }
            if(used < 4096) {
                used ++;
                ht[k] = used - 1;
            }
        }
    }

    if(pcode != 0) {
        intLeftOver += 12;
        intOutputCode <<= 12;
        intOutputCode |= pcode;
    }

    if(intLeftOver >= 16) {
        strCompressedString += String.fromCharCode( intOutputCode >> ( intLeftOver - 16 ) );
        intOutputCode &= (Math.pow(2,(intLeftOver - 16)) - 1);
        intLeftOver -= 16;
    }

    if( intLeftOver > 0) {
        intOutputCode <<= (16 - intLeftOver);
        strCompressedString += String.fromCharCode( intOutputCode );
    }

    return strCompressedString;
}

对字符串进行解压

function Decompress(strCompressedString) {
    var strNormalString = "";
    var ht = new Array();

    for(i = 0; i < 128; i++) {
        ht[i] = String.fromCharCode(i);
    }

    var used = 128;
    var intLeftOver = 0;
    var intOutputCode = 0;
    var ccode = 0;
    var pcode = 0;
    var key = 0;

    for(var i=0; i<strCompressedString.length; i++) {
        intLeftOver += 16;
        intOutputCode <<= 16;
        intOutputCode |= strCompressedString.charCodeAt(i);

        while(1) {
            if(intLeftOver >= 12) {
                ccode = intOutputCode >> (intLeftOver - 12);
                if( typeof( key = ht[ccode] ) != "undefined" ) {
                     strNormalString += key;
                    if(used > 128) {
                        ht[ht.length] = ht[pcode] + key.substr(0, 1);
                    }
                     pcode = ccode;
                } else {
                    key = ht[pcode] + ht[pcode].substr(0, 1);
                    strNormalString += key;
                    ht[ht.length] = ht[pcode] + key.substr(0, 1);
                    pcode = ht.length - 1;
                }

                used ++;
                intLeftOver -= 12;
                intOutputCode &= (Math.pow(2,intLeftOver) - 1);
            } else {
                break;
            }
        }
    }
    return strNormalString;
}

2. JS压缩图片

摘录

效果展示

代码展示

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8"/>
    <title>compress</title>
    <link href="css/bootstrap.min.css" rel='stylesheet' media="screen">
    <link href="css/bootstrap-theme.min.css" rel='stylesheet' media="screen">
    <script type='text/javascript' src='js/jquery-1.9.1.min.js'></script>
    <script type='text/javascript' src='js/bootstrap.min.js'></script>
</head>

<body>
<div class="col-xs-3">
    <div>
        <p id="original_size"></p>
        <img id="original_image" class="col-xs-6" src="" style="width:600px">
    </div>

    <div>
        <p id="now_size"></p>
        <img id="now_image" class="col-xs-6" src="" style="width:600px">
    </div>
    <form id="image_upload" method="post"  enctype="multipart/form-data">
        <input class="hide" type="file" id="upload_image" name="img" />
    </form>
    <input style="ime-mode:disabled" onkeyup="return ValidateNumber($(this),value)" id="set_size" value="50">
    <input id="choose_box" value="选择本地图片" type="button">
</div>

<script>
    $(window).ready(function() {
        $('#choose_box').click(function() {
            $('#upload_image').click();
            $('#choose_box').addClass('hide');
            $('#set_size').addClass('hide')
        });

        $('#upload_image').change(function() {
            readURL(this);
        })
    });

    function ValidateNumber(e, pnumber){
        if (!/^\d+$/.test(pnumber)){
            $(e).val(/^\d+/.exec($(e).val()));
        }
        return false;
    }

    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $('#original_image').attr('src', e.target.result);
                $('#original_size').html('图片原大小：' + e.target.result.length);
                var i = document.getElementById("now_image");
                i.src = event.target.result;
                var quality =  $('#set_size').val() || 50;
                i.src = compress(i,quality).src;
                $('#now_image').attr('src', i.src);
                $('#now_size').html('压缩后图片大小：' + i.src.length);
            };
            reader.readAsDataURL(input.files[0]);
        }
    }

        function compress (source_img_obj, quality, output_format){
            var mime_type = "image/jpeg";
            if(output_format!=undefined && output_format=="png"){
                mime_type = "image/png";
            }
            var cvs = document.createElement('canvas');
            cvs.width = source_img_obj.naturalWidth;
            cvs.height = source_img_obj.naturalHeight;
            var ctx = cvs.getContext("2d").drawImage(source_img_obj, 0, 0);
            var newImageData = cvs.toDataURL(mime_type, quality/100);
            var result_image_obj = new Image();
            result_image_obj.src = newImageData;
            return result_image_obj;
        }
</script>
</body>
</html>