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

我想压缩图像，用户上传在前端

源图像是651Kb（Mac OS），在我将大小形式（1920*1080）更改为（1000*562）后，图片大小变为1.2Mb（浏览器）、1.4Mb（Mac OS）、1.29Mb（Windows 7）。不管怎样，这都是为了增加原始图像的大小

为什么?

源图像：

代码：

const$=document.querySelector.bind（文档）
常量输入=$（“输入”）
常量画布=$（“画布”）
const ctx=canvas.getContext（'2d'）
常量可读大小=（大小）=>{
返回大小/1024>1024？（~（10*size/1024/1024））/10+'MB'：~（size/1024）+'KB'
}
input.onchange=函数（e）{
const files=e.target.files；
[].forEach.call（文件，文件=>{
常量img=新图像（）
img.src=URL.createObjectURL（文件）
img.onload=函数（）{
让收音机=1
如果（数学最小值（此高度、此宽度）>1000）{
radio=Math.max（this.height/1000，this.width/1000）
}
canvas.height=this.height/收音机
canvas.width=this.width/收音机
ctx.fillRect（0，0，canvas.width，canvas.height）；
ctx.drawImage（img，0，0，canvas.width，canvas.height）
canvas.toBlob（函数（b）{
console.log（readableSize（b.size））
})
revokeObjectURL（this.src）
}
})
}

默认情况下，图像类型的方法将生成一个无损格式的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]）来满足您的需要。

是的，您是对的。但我想知道“异常”数据来自何处，这是因为PNG使用了与JPEG不同的压缩方案，而JPEG也保留了所有数据的原样，从而产生了更大的尺寸。Canvas不跟踪源图像和类型，只跟踪画布上存在的图像。原始图像和输出图像之间没有相关性，而通过Canvas生成的图像除外。要修复此问题，请参阅答案（使用JPEG作为带有质量参数的源图像）。或者换言之：新图像是从画布位图生成的，而不是原始图像。由于默认值为PNG，因此图像将更大（通常是无论如何）。要匹配原始图像，请使用相同的压缩方案，即jpeg而不是png，谢谢！！（这是字符计数器…）

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