h5图片压缩

最新推荐文章于 2023-08-14 19:01:13 发布

雪城以东

最新推荐文章于 2023-08-14 19:01:13 发布

阅读量354

点赞数

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>图片压缩为base64，再转blob对象上传</title>
    <script src="../js/libs/zepto.min.js"></script>
</head>

<body >
<form id="form1" name="form1" method="post" action="">
    <img src="" alt="">
    <input type="file" name="fileToUpload" id="fileToUpload"/> <br />
    <input type="text" name="compressValue" id="compressValue" style="display:none;" /><br/>
    <input type="button" id='uploadBtn' value="上传" /><br/>
</form>
</body>
<script type="text/javascript">

    //图片上传change事件
    $('#fileToUpload').change(function(){
        uploadBtnChange();
    });

    function uploadBtnChange(){
        var scope = this;
        if(window.File && window.FileReader && window.FileList && window.Blob){
            //获取上传file
            var filefield = document.getElementById('fileToUpload');
            var file = filefield.files[0];

            console.log(file.size/1024);

            //获取用于存放压缩后图片base64编码
            var compressValue = document.getElementById('compressValue');
            processfile(file,compressValue);
        }else{
            alert("此浏览器不完全支持压缩上传图片");
        }
    }

    function processfile(file,compressValue) {
        var reader = new FileReader();
        reader.onload = function (event) {
            var blob = new Blob([event.target.result]);
            window.URL = window.URL || window.webkitURL;
            var blobURL = window.URL.createObjectURL(blob);
            var image = new Image();
            image.src = blobURL;
            image.onload = function() {
                /*压缩*/
                var resized = resizeMe(image);
                compressValue.value = resized;
                /*转成blob对象*/
                var blobblob = convertImgDataToBlob(resized);
                console.log(blobblob);
                $("img").attr('src',image.src)
            }
        };
        reader.readAsArrayBuffer(file);
    }
    /*压缩图片*/
    function resizeMe(img) {
        //压缩的大小
        /*这个大小直接影响压缩后图片的大小*/
        var max_width = 100;
        var max_height = 100;

        var canvas = document.createElement('canvas');
        var width = img.width;
        var height = img.height;
        if(width > height) {
            if(width > max_width) {
                height = Math.round(height *= max_width / width);
                width = max_width;
            }
        }else{
            if(height > max_height) {
                width = Math.round(width *= max_height / height);
                height = max_height;
            }
        }

        canvas.width = width;
        canvas.height = height;

        var ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0, width, height);
        //压缩率
        return canvas.toDataURL("image/jpeg",0.92);
    }
    /*base64转成blob对象*/
    function convertImgDataToBlob(base64Data) {
        var format = "image/jpeg";
        var base64 = base64Data;
        var code = window.atob(base64.split(",")[1]);
        var aBuffer = new window.ArrayBuffer(code.length);
        var uBuffer = new window.Uint8Array(aBuffer);
        for(var i = 0; i < code.length; i++){
            uBuffer[i] = code.charCodeAt(i) & 0xff ;
        }
//        console.info([aBuffer]);
//        console.info(uBuffer);
//        console.info(uBuffer.buffer);
//        console.info(uBuffer.buffer==aBuffer); //true

        var blob=null;
        try{
            blob = new Blob([uBuffer], {type : format});
        }
        catch(e){
            window.BlobBuilder = window.BlobBuilder ||
                    window.WebKitBlobBuilder ||
                    window.MozBlobBuilder ||
                    window.MSBlobBuilder;
            if(e.name == 'TypeError' && window.BlobBuilder){
                var bb = new window.BlobBuilder();
                bb.append(uBuffer.buffer);
                blob = bb.getBlob("image/jpeg");

            }
            else if(e.name == "InvalidStateError"){
                blob = new Blob([aBuffer], {type : format});
            }
            else{

            }
        }
        console.log(blob.size/1024);
        return blob;
    }


    //提交click事件
    $('#uploadBtn').click(function(){
        var preview = document.getElementById('compressValue').value;
        /*if(preview){
         $.ajax({
         url:"index.php",
         type: "POST",
         data:{'imgBase64':preview},
         dataType:'json',
         success:function(json) {
         alert(json);
         },
         error:function(){
         alert('操作失败，请跟技术联系');
         }
         });
         }*/
    });

</script>
</html>

雪城以东

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
h5图片压缩

html> charset="utf-8"> name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 图片压缩为base64，再转blob对象上传 src="../js/libs/zepto.min.js">id="
复制链接

扫一扫