Question

我想要用户在正面上传的压缩图像。

源图像为651Kb（Mac OS），在我将尺寸形式（1920 * 1080）更改为（1000 * 562）后，图像尺寸变为1.2Mb（浏览器），1.4Mb（Mac OS），1.29Mb （Windows 7的）。无论如何，它增加了原始图像的大小。

为什么？

源图片：http://7xoaqt.com1.z0.glb.clouddn.com/maikailun.jpg

代码：https://codepen.io/maicss/pen/ayLgdo/

<input type="file" multiple accept="image/*">

<canvas></canvas>


const $ = document.querySelector.bind(document)
const input = $('input')
const canvas = $('canvas')
const ctx = canvas.getContext('2d')

const readableSize =  (size) => {
    return size / 1024 > 1024 ? (~~(10 * size / 1024 / 1024)) / 10 + 'MB' : ~~(size / 1024) + 'KB'
}

input.onchange = function (e) {
    const files = e.target.files;
    [].forEach.call(files, file => {
    const img = new Image()
    img.src = URL.createObjectURL(file)
    img.onload = function () {
        let radio = 1
        if (Math.min(this.height, this.width) > 1000) {
            radio = Math.max(this.height / 1000, this.width / 1000)
        }
        canvas.height = this.height / radio
        canvas.width = this.width / radio

        ctx.fillRect(0, 0, canvas.width, canvas.height);
        ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
        canvas.toBlob(function (b) {
            console.log(readableSize(b.size))
        })
        URL.revokeObjectURL(this.src)
    }
  })
}

Answer 1

图像类型的方法toBlob() with no mime-type argument默认会生成PNG文件，这是一种无损格式，因此通常比JPEG类型的源图像大。

更改此行：

canvas.toBlob(function (b) {
  console.log(readableSize(b.size))
})

获取图像mime参数，使其使用JPEG以及质量设置：

canvas.toBlob(function(b) {
  console.log(readableSize(b.size))
}, "image/jpeg", 0.7);

尝试质量参数（[0.0,1.0]）以满足您的需求。

为什么画布放大图像尺寸？

1 个答案: