裁剪完成后，cropper有一個(gè)方法可以生成裁剪后的圖片代碼： (); 該方法可以返回一個(gè)裁剪后的canvas元素。 生成base64格式的圖片： var base64 ().toDat

裁剪完成后，cropper有一個(gè)方法可以生成裁剪后的圖片代碼：

();

該方法可以返回一個(gè)裁剪后的canvas元素。

生成base64格式的圖片：

var base64  ().toDataURL('image/jpeg');

也可以生成blob格式的圖片：

var blob  ().toBlob(function(blob){
    // 處理blob對象
}, 'image/jpeg', 0.8);

首先我們使用的是base64格式將圖片傳遞到后臺。但在網(wǎng)絡(luò)慢的情況下，直接使用上述方法生成blob對象可能會(huì)出現(xiàn)問題，因?yàn)樯傻腷lob對象沒有文件名，需要手動(dòng)給它賦值。

解決方法：

var fileName  '';
var blob  ().toBlob(function(blob){
    // 處理blob對象
}, 'image/jpeg', 0.8);
// 創(chuàng)建File對象
var file  new File([blob], fileName, {type: blob.type});

將生成的File對象傳遞給后臺。

在傳遞給后臺之前，可能會(huì)遇到一些問題：

1. 圖片大小過大，無法上傳。
2. 圖片質(zhì)量降低，導(dǎo)致顯示效果不佳。

解決方法：

var quality  0.8; // 圖片質(zhì)量，取值范圍為0到1
var fileName  '';
var blob  ().toBlob(function(blob){
    // 處理blob對象
}, 'image/jpeg', quality);
// 創(chuàng)建File對象
var file  new File([blob], fileName, {type: blob.type});

通過指定圖片質(zhì)量來控制文件大小與顯示效果。