有一款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>
    </div>
</div>
<input class="btn" type="button" value="提交"/>


</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') {

$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处理将图片保存在服务器中!

最后修改:2021 年 08 月 20 日 05 : 58 PM
如果觉得我的文章对你有用,请随意赞赏