图片的压缩---使用canvas进行压缩（简洁版）

最新推荐文章于 2024-07-08 15:10:13 发布

wenmin1987

最新推荐文章于 2024-07-08 15:10:13 发布

阅读量598

点赞数

分类专栏：性能优化与兼容文章标签：图片canvas压缩

本文链接：https://blog.csdn.net/wenmin1987/article/details/107005191

版权

性能优化与兼容专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<input id="file" type="file">

// 代码来源于廖雪峰博客，是最实用的，也是最简洁的，但有个问题就是图片过小，‘压缩’后会更大，这个区间大概是1.5M以内，所以超过1.5M才进行此canvas压缩

var eleFile = document.querySelector('#file');

// 压缩图片需要的一些元素和对象

var reader = new FileReader(), img = new Image();

// 选择的文件对象

var file = null;

// 缩放图片需要的canvas

var canvas = document.createElement('canvas');

var context = canvas.getContext('2d');

// base64地址图片加载完毕后

img.onload = function () {

    // 图片原始尺寸

    var originWidth = this.width;

    var originHeight = this.height;

    // 最大尺寸限制

    var maxWidth = 400, maxHeight = 400;

    // 目标尺寸

    var targetWidth = originWidth, targetHeight = originHeight;

    // 图片尺寸超过400x400的限制

    if (originWidth > maxWidth || originHeight > maxHeight) {

        if (originWidth / originHeight > maxWidth / maxHeight) {

            // 更宽，按照宽度限定尺寸

            targetWidth = maxWidth;

            targetHeight = Math.round(maxWidth * (originHeight / originWidth));

        } else {

            targetHeight = maxHeight;

            targetWidth = Math.round(maxHeight * (originWidth / originHeight));

        }

    }

    // canvas对图片进行缩放

    canvas.width = targetWidth;

    canvas.height = targetHeight;

    // 清除画布

    context.clearRect(0, 0, targetWidth, targetHeight);

    // 图片压缩

    context.drawImage(img, 0, 0, targetWidth, targetHeight);

    // canvas转为blob并上传

    canvas.toBlob(function (blob) {

        // 图片ajax上传

        var xhr = new XMLHttpRequest();

        // 文件上传成功

        xhr.onreadystatechange = function() {

            if (xhr.status == 200) {

                // xhr.responseText就是返回的数据

            }

        };

        // 开始上传

        xhr.open("POST", 'upload.php', true);

        xhr.send(blob);

    }, file.type || 'image/png');

};

// 文件base64化，以便获知图片原始尺寸

reader.onload = function(e) {

img.src = e.target.result;

};

eleFile.addEventListener('change', function (event) {

    file = event.target.files[0];

    console.log('压缩前的尺寸大小',file.size)

    // 选择的文件是图片

    if (file.type.indexOf("image") == 0) {

        reader.readAsDataURL(file);

    }

});

</script>

</body>

</html>