前言

Cropper.js v1.5.7

通过Cropper.js裁切图片后，发现图片变大了（原图446k，裁切后图片6.16m）。

变大原因

操作Cropper.js完成裁切图片后，先通过var canvas = cropper.getCroppedCanvas();得到HTMLCanvasElement。再通过HTMLCanvasElement的toBlob()得到裁切后的图片。

Cropper.js通过HTMLCanvasElement重绘裁切后的图片，因此，得到的裁切后的图片的数据的大小有可能变大。

限制图片大小

指定图片展示质量 指定HTMLCanvasElement的宽高

指定图片展示质量

Cropper.js默认生产’image/png’的图片。可通过HTMLCanvasElement.toBlob()指定JPG图片格式(image/jpeg)和展示质量（值在0与1之间），比如canvas.toBlob(function(img) { ... }, image/jpeg, 0.8);

指定HTMLCanvasElement的宽高

有时，用户上传的图片非常大（比如，宽高为：4032 * 2388）。只设定图片展示质量还不能将图片的数据大小降下来，这时，指定HTMLCanvasElement的宽高就很有必要。

调用Cropper.js的getCroppedCanvas方法时，指定最大宽度，可以将图片的数据大小快速降下来。

示例

var canvas = cropper.getCroppedCanvas({
            
     maxWidth:1600});
	canvas.toBlob(function(img) {
            
     
    	uploadImage(img);
    }, image/jpeg, 0.8);
   
          
   
   
          
   1
           
    2
           
    3
           
    4

前言 Cropper.js v1.5.7 通过Cropper.js裁切图片后，发现图片变大了（原图446k，裁切后图片6.16m）。 变大原因 操作Cropper.js完成裁切图片后，先通过var canvas = cropper.getCroppedCanvas();得到HTMLCanvasElement。再通过HTMLCanvasElement的toBlob()得到裁切后的图片。 Cropper.js通过HTMLCanvasElement重绘裁切后的图片，因此，得到的裁切后的图片的数据的大小有可能变大。 限制图片大小 指定图片展示质量 指定HTMLCanvasElement的宽高 指定图片展示质量 Cropper.js默认生产’image/png’的图片。可通过HTMLCanvasElement.toBlob()指定JPG图片格式(image/jpeg)和展示质量（值在0与1之间），比如canvas.toBlob(function(img) { ... }, image/jpeg, 0.8); 指定HTMLCanvasElement的宽高 有时，用户上传的图片非常大（比如，宽高为：4032 * 2388）。只设定图片展示质量还不能将图片的数据大小降下来，这时，指定HTMLCanvasElement的宽高就很有必要。 调用Cropper.js的getCroppedCanvas方法时，指定最大宽度，可以将图片的数据大小快速降下来。 示例 var canvas = cropper.getCroppedCanvas({ maxWidth:1600}); canvas.toBlob(function(img) { uploadImage(img); }, image/jpeg, 0.8); 1 2 3 4