html5图片压缩

发布于 / 程序员 / 0 条评论

有一款html5图片压缩的JS,支持pc,mobile(ios/android)和multiple,可在前端页面对图片进行压缩(压缩效果可达到10倍以上)。
这个html5图片的插件是从GitHub上面找到的,这是地址html5ImgCompress。引入方式及简单的使用方法在里面都有介绍,这个图片压缩插件已经在真实项目中使用过了,暂时没发现什么问题。

HTML部分(css样式这里就不放了)

<div>
    <form action="upload.php" method="post" class="up_form">
        <div class="m_list_wrap">
            <div class="m_list clear">
                <label>图片1<span></span></label>
                <div class="upload_wrap relative">
                    <input class="upload upload1" type="file" name="up1" value="" />
                    <div class="phone clear">
                        <span>点击上传图片</span><img src="1949874599.jpg"/><i>></i>
                    </div>
                </div>
            </div>

            <div class="m_list clear">
                <label>图片2<span></span></label>
                <div class="upload_wrap relative">
                    <input class="upload upload2" type="file" name="up2" value="" />
                    <div class="phone clear">
                        <span>点击上传图片</span><img src="1949874599.jpg"/><i>></i>
                    </div>
                </div>
            </div>
        </div>
        <input class="btn" type="button" value="提交"/>
    </form>
</div>

js图片压缩部分

    $('.upload').change(function() {
        var othis = $(this);
        var oimg = $(this).next().children('img')
        var file = this.files[0];
        var r = new FileReader();
        r.readAsDataURL(file);
        $(r).load(function() {
            oimg.attr('src',this.result);
        })
    });

    $('.upload1').change(function() {
        var file = this.files[0];
        new html5ImgCompress(file, {
            //控制图片质量
            quality:0.9,
            before: function(e) {
                //这里可限制图片类型,也可加上传特效
            },
            done: function (e, base64) {
                base64.substring(2,11);
                $('.upload1').next().append('<div class="pst"><input type="hidden" name="img[1]" value="'+base64+'"></div>');
            },
            fail: function(e) {
            },
            complete: function(e) {
            },
            notSupport: function(e) {
                //   alert('浏览器不支持!');
            }
        });
    });
    $('.upload2').change(function() {
        var file = this.files[0];
        new html5ImgCompress(file, {
            //控制图片质量
            quality:0.9,
            before: function(e) {
                //这里可限制图片类型,也可加上传特效

            },
            done: function (e, base64) {
                base64.substring(2,11);
                $('.upload2').next().append('<div class="pst"><input type="hidden" name="img[2]" value="'+base64+'"></div>');
            },
            fail: function(e) {
            },
            complete: function(e) {
            },
            notSupport: function(e) {
                //   alert('浏览器不支持!');
            }
        });
    });

ajax上传数据部分

$('.btn').click(function(e){
        if($("[name=up1]").val() == ""){
            alert("请上传图片1");
            $("[name=up1]").focus();
            return false;
        }
        if($("[name=up2]").val() == ""){
            alert("请上传图片2");
            $("[name=up2]").focus();
            return false;
        }
        $.ajax({
            type: 'post',
            url: "upload.php",
            dataType: "json",
            data:$('.up_form').serialize(),
            success: function (data) {
                if(data.code==1 || data.code==2 ){
                    alert(data.msg);
                    location.href =data.url;
                }else {
                    alert(data.msg);
                }
            },
            error: function (xhr, type, errorThrown) {
                alert("提交失败,请检查您的网络!");
            }

        });

    });

php代码部分

<?php
header("Content-Type:text/html;charset=utf-8");
date_default_timezone_set("PRC");

if ($_POST) {
    $content = array();
    $content['code'] = 0;

    if (!$_POST['img'][1] || !$_POST['img'][2]) {
        $content['msg'] = '存在图片尚未上传!';
        echo json_encode($content);
        die;
    }

    $imgs = $_POST['img'];
    //增加判断,错误就不存放图片,占用服务器空间
    foreach ($imgs as $k => $v) {
        if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $v, $result)) {
            //匹配成功
            if (!in_array($result[2], array('jpg', 'jpeg', 'png'))) {
                $content['msg'] = '图片类型不正确!';
                echo json_encode($content);
                die;
            }
        } else {
            $content['msg'] = '数据格式错误!';
            echo json_encode($content);
            die;
        }
    }

    foreach ($imgs as $k => $v) {
        //post的数据里面,加号会被替换为空格,需要重新替换回来,如果不是post的数据,则注释掉这一行
        $v = str_replace(' ', '+', $v);
        $s = base64_decode(preg_replace('/data:image\/.+;base64,/', '', $v));
        //目标目录
        $destination_folder = './data/upload/' . date('Y-m-d') . '/';
        if (!file_exists($destination_folder)) {
            mkdir($destination_folder);
        }

        $tmp_name = sprintf('%010d', time() - 946656000) . sprintf('%03d', microtime() * 1000) . sprintf('%04d', mt_rand(0, 9999));
        $imgName = $destination_folder . $tmp_name . '.jpg';
        $res = file_put_contents($imgName, $s);
        if ($imgName) {
            switch ($k) {
                case 1:
                    $img1 = substr($imgName, 1);;
                    break;
                case 2:
                    $img2 = substr($imgName, 1);;
                    break;
            }
        }
    }

    /**这里可进行相关数据库操作**/
    $content['msg'] = '上传成功!';
    $content['code'] = 1;
    echo json_encode($content);
    die;
}
?>

以上就是使用html5ImgCompress对图片压缩,压缩过的图片数据形式是base64,可通过PHP处理将图片保存在服务器中!

转载原创文章请注明,转载自: karnc » html5图片压缩
Not Comment Found