JSFiddle - React, Tailwind, and code Playground

by qian jin

HTML

<div>
    <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>

CSS

.hide{
    display: none
}

JavaScript

$(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;
        }