【cropper】限制图片大小

前言

• 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