在上传之前使用jquery中的画布调整图像大小增加文件大小

Question

我正在使用canvas来调整用户上传图片的大小。

我上传的图像分辨率为4000x3000，大小为962 kb 调整大小后图像变为2000x1500但其大小增加到2.1MB

调整大小之前

调整大小后变为2.1 MB

调整代码大小为：

fileReader.onload = function (event) {
var image = new Image();

image.onload=function(){
  document.getElementById("original-Img").src=image.src;
  var canvas=document.createElement("canvas");
  var context=canvas.getContext("2d");
  canvas.width=image.width/2;
  canvas.height=image.height/2;
  context.drawImage(image,0,0,image.width,image.height,0,0,canvas.width,canvas.height);

  document.getElementById("upload-Preview").src =  canvas.toDataURL();
  }
   image.src=event.target.result;
};

为什么图像的文件大小会增加？