前言

• 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);

總結

以上是生活随笔為你收集整理的【cropper】限制图片大小的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。