H5 canvas实现客户端压缩图片上传

最新推荐文章于 2024-05-16 11:12:50 发布

最强的法师

最新推荐文章于 2024-05-16 11:12:50 发布

阅读量5.9k

点赞数 1

分类专栏： jQuery 文章标签： php 图片压缩 canvas H5

本文链接：https://blog.csdn.net/ityang521/article/details/70667037

版权

jQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

现在手机随随便便拍个照都是5、6MB，如果用户提交图片，即占服务器资源，上传速度又慢，影响用户体验度，所以一般都会对图片进行处理。
之前用php写过一个压缩图片程序，是先将图片上传到服务器之后，在服务器端进行压缩，效果不是很理想。
后来想想，还是决定要在客户端压缩，依靠H5的canvas来对图片在本地进行压缩处理，将图片处理成为base64编码，然后发送到后台，后台再做处理然后存储就好了（这样就是普通的post的提交了）。
这样比较友好些，无论是对服务器还是对用户。

html代码：

<!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</title>
        <script src="../src/jquery.min.js"></script>
    </head>

    <body >
        <form id="form1" name="form1" method="post" action="">
            <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();
        });

        //提交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('操作失败，请跟技术联系');
                   } 
                });
            }
        });

        function uploadBtnChange(){
            var scope = this;
            if(window.File && window.FileReader && window.FileList && window.Blob){ 
                //获取上传file
                var filefield = document.getElementById('fileToUpload'),
                    file = filefield.files[0];
                //获取用于存放压缩后图片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;
                }
            };
            reader.readAsArrayBuffer(file);
        }

        function resizeMe(img) {
            //压缩的大小
            var max_width = 1920; 
            var max_height = 1080; 

            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); 
        }       
    </script>
</html>

php代码：

header('Content-type:text/html;charset=utf-8');
$base64_image_content = $_POST['imgBase64'];
//echo $base64_image_content;die;
//匹配出图片的格式
if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $base64_image_content, $result)){
    $type = $result[2];
    $new_file = './upload/';

    //如果文件不存在,则创建
    if(!file_exists($new_file))
    {
        mkdir($new_file, 0777, true);
    }

    $new_file = $new_file.time(). '.' .$type;
    if (file_put_contents($new_file, base64_decode(str_replace($result[1],'', $base64_image_content)))){
        echo json_encode('上传成功！');
    }else{
        echo json_encode('上传失败！');
    }
}

注意：
1、部分代码是参照网上的，安全性不能全部保证
2、运行index.html选择要上传的图片文件点击上传
3、必须配置安装在php服务器中使用，否则有些功能不能正常使用（但压缩图片不受影响）
4、仅支持主流及ie9以上浏览器，ie9以下请单独做处理。

最强的法师

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
H5 canvas实现客户端压缩图片上传

现在手机随随便便拍个照都是5、6MB，如果用户提交图片，即占服务器资源，上传速度又慢，影响用户体验度，所以一般都会对图片进行处理。之前用php写过一个压缩图片程序，是先将图片上传到服务器之后，在服务器端进行压缩，效果不是很理想。后来想想，还是决定要在客户端压缩，依靠H5的canvas来对图片在本地进行压缩处理，将图片处理成为base64编码，然后发送到后台，后台再做处理然后存储就好了（这样...
复制链接

扫一扫

专栏目录