前言

• Cropper.js v1.5.7

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

變大原因

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

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

限制圖片大小

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

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

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

指定HTMLCanvasElement的寬高

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

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

示例

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

總結(jié)

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

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