前言

• Cropper.js v1.5.7

通過Cropper.js裁切圖片后，發(fā)現(xiàn)圖片變大了（原圖446k，裁切后圖片6.16m）。

變大原因

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

Cropper.js通過HTMLCanvasElement重繪裁切后的圖片，因此，得到的裁切后的圖片的數(shù)據(jù)的大小有可能變大。

限制圖片大小

• 指定圖片展示質(zhì)量
• 指定HTMLCanvasElement的寬高

指定圖片展示質(zhì)量

Cropper.js默認生產(chǎn)’image/png’的圖片。可通過HTMLCanvasElement.toBlob()指定JPG圖片格式('image/jpeg')和展示質(zhì)量（值在0與1之間），比如canvas.toBlob(function(img) { ... }, 'image/jpeg', 0.8);

指定HTMLCanvasElement的寬高

有時，用戶上傳的圖片非常大（比如，寬高為：4032 * 2388）。只設(shè)定圖片展示質(zhì)量還不能將圖片的數(shù)據(jù)大小降下來，這時，指定HTMLCanvasElement的寬高就很有必要。

調(diào)用Cropper.js的getCroppedCanvas方法時，指定最大寬度，可以將圖片的數(shù)據(jù)大小快速降下來。

示例

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。